This tutorial will teach you how to create signup and login functionality on an app built with Vue3, Express, Mongo, and Node.  We'll start where our last tutorial left off: Connecting our ExpressJs/Vue3 App to a Mongoose Database.  Following along this example project will show you how to get started with user logins.

Prerequisites

• This tutorial picks up from our last tutorial: Connecting our ExpressJs/Vue3 App to a Mongoose Database
• Make sure to have .env variables setup with your MongoDB as this file cannot be in our git repo.
• A basic understanding of git, and npm.

Setup

Let's start by cloning the project from our last tutorial.  

git clone git@github.com:Initial-Apps/vue3-express-mongo.git passportJs-MEVN

Open a new terminal window, move into the server folder and install our npm modules.

cd passportJs-MEVN/server
npm install

Make sure to also have your .env folder setup with your MongoDB key as we did in the last tutorial.  

You can then start the server by running:

node serverjs

Next, let's also setup the client side. Open a new terminal window, move into the client folder and install our npm modules.

cd client
npm install

You can then start the client development server by:

npm run dev

Implementing PassportJs

PassportJs is a popular npm module that runs on our server.  This module provides functionality for signing up, as well as logging in and out on our server.  Some notable functionalities include validating usernames and passwords, storing logged in user session data for access on our server.

We start by making a passport directory on our server.  Open a new terminal window and make the new directory inside the server folder by running the following from the terminal or using your preferred code editor:

cd server
mkdir passport

Then we make a new file titled init.js and add the following:

const login = require('./login');
const signup = require('./signup');
const User = require('../models/user');

module.exports = function(passport){
	passport.serializeUser(function(user, done) {
		done(null, { 
			_id: user._id,
		});
	});
	passport.deserializeUser(function(userSession, done) {	
		User.findById(userSession._id)
		.then((user)=>{
			console.log('deserializingUser');
			done(null, user)
		})
		.catch((err)=>{
			console.log(err);
			done(err)
		})
	});
	login(passport);
	signup(passport);
}

In summarizing the above, the serialize function stores the user id into the session for our app to reference.  The deserialize function can retrieve any user data we specify based on the stored user id. Together, these functions enable Passport.js to maintain user sessions and facilitate authentication throughout the application.

Then we make a new file titled signup.js and add the following:

const LocalStrategy = require('../node_modules/passport-local').Strategy;
const mongoose = require('mongoose');
const User = require('../models/user');
const bCrypt = require('bcrypt-nodejs');

module.exports = function(passport){
	// LOCAL AUTHORIZATION STRATEGY
	passport.use('signup', new LocalStrategy({
		usernameField: 'email',
		passReqToCallback : true // allows us to pass back the entire request to the callback
	},
	function(req, username, password, done) {
		findOrCreateUser = function(){
			// find a user in Mongo with provided username
			User.findOne({ 'email' :  username })
			.then((user)=>{
				// If already exists
				if (user) {
					console.log('User already exists with email: '+username);
					return done(null, false, 'That Email Already Exists');
				} else {
					// Hash the password
					const hash = createHash(password);
					// If there is no user with that email
					// create the user
					let newUser = new User({
						email: username,
						password: hash,
					});	
					// save the user
					newUser.save()
					.then((user)=> {
						console.log('User Registration succesful');
						return done(null, newUser);						
					})
					.catch((err)=>{
						if (err){
							console.log('Error in Saving user: '+err);
							throw err;
						}
					});
				}
			})
			.catch((err)=>{
				console.log('Error in SignUp: '+err);
				return done(err);
			});
		};
		// Delay the execution of findOrCreateUser and execute the method
		// in the next tick of the event loop
		process.nextTick(findOrCreateUser);
	}));
	// Generates hash using bCrypt
	const createHash = function(password){
		return bCrypt.hashSync(password, bCrypt.genSaltSync(10), null);
	}
}

The above code first checks for any issues such as searching our database for any existing email address matches to ensure the user email is unique.  It then encrypts the user password using bcrypt,  stores it to our database on the save function, and returns our new user to our prior created init.js for use in our session.

Next we create a file called login.js and add the following:

const LocalStrategy   = require('passport-local').Strategy;
const User = require('../models/user');
const bCrypt = require('bcrypt-nodejs');

module.exports = function(passport){
	passport.use('login', new LocalStrategy({
		usernameField: 'email',
		passReqToCallback : true
	},
	function(req, username, password, done) {
		username = username.toLowerCase(); // clear caps
		User.findOne({email: username})
		.catch((err) => {
			return done(err);
		})
		.then ((user) => {
			if(!user) {
				console.log('User Not Found with username '+username);
				return done(null, false, 'Invalid Username');
			}
			// User exists but no password, log the error
			if (user && !user.password){
				console.log('No Password');
				return done(null, false, 'No Password'); // redirect back to login page
			}
			// User exists but wrong password, log the error
			if (!isValidPassword(user, password)){
				console.log('Invalid Password');
				return done(null, false, 'Invalid Password'); // redirect back to login page
			}
			if(isValidPassword(user, password)){
                return done(null, user);
			}
		})
	}));
	const isValidPassword = function(user, password){
		return bCrypt.compareSync(password, user.password);
	}
}

The above file handles our server logins.  When a user logs in, this code validates the email and password by checking that it matches in our database. If all matches up with no errors, it will return our user for session use in our prior created init.js file.

Setting Up Our Database User Model

Next we will setup our database model. Since we are creating an authentication app, we will need a place to store our user data, such as email addresses and passwords. That's where our MongoDB comes in.  In order to do this, we'll need to create a data model, outlining what data we will store for each user.

First, we will create a models folder in our server directory, to hold the data models.  If using the terminal, do this by running the following from within our server directory, or use your preferred code editor:

mkdir models

Create a new file called user.js and add the following:

const mongoose = require('mongoose');

function toLower (v) {
	if(v){
		return v.toLowerCase();
	}
}

const Users = new mongoose.Schema({
	email: { type: String, set: toLower },
	password: String,
});

module.exports = mongoose.model('User', Users);

A brief explanation of the above:  First we require the mongoose module, which is a middleware that connects our app data with our database.  The toLower function is used to rewrite all email addresses to lowercase.  This is done as a best practice to ensure all email addresses are formatted the same and we don't accidentally add 2 of the same email addresses because one is capitalized and hence not recognized as different from it's lowercase counterpart.  Finally, we define the data we are collecting in our mongoose.Schema.   In our case, we are storing just the user email address, and password.  

Building Our Server

Next we setup our server, which runs on Node and Express.  Together, these code modules handle all actions performed by our user on the server side.  These include actions such as listening for user signups, logins, or logouts.  

Let's open the server.js file.  I am modifying the file from our last tutorial as follows:

const express = require('express')
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const session  = require('express-session'); // Authentication is stored in sessions, so we'll use express-session
const MongoStore = require('connect-mongo');  // Used to connect our session data to our MongoDB
const passport = require('passport'); // Passport is used for authentication

const app = express()
const port = 3000
require('dotenv').config(); 

// Connect to our MONGOOSE DB
const connectString = process.env.MONGODB;  
mongoose.connect(connectString, { useNewUrlParser: true }).then(
  () => { 
    console.log ('Succeeded connected to database');
   },
  err => { 
    console.log ('ERROR connecting to database: ' + err);
   }
);

// Initialize Passport
const initPassport = require('./passport/init');
initPassport(passport);
// Create the Session
app.use(session({
	secret: process.env.SESSION_SK,
	resave: true,
	saveUninitialized: false,
	cookie: {
    	httpOnly: false,
		sameSite: true,
		maxAge: 10* 4 * 60 * 60 * 1000,
	},
	store: MongoStore.create({
		mongoUrl: connectString,
		ttl: 10*4 * 60 * 60, // logout after 1hr
	})
}));
app.use(passport.initialize()); // initialize passport login sessions
app.use(passport.session()); // for persistent login sessions


app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.post('/api/login', (req, res, next) => {
	// general flow, 1) calls passport/login, 2) this function, 3) serializes in passport/init 4) deserializes in passport/init
	passport.authenticate('login', function(err, user, info) {
		if (err) {
			console.log('err');
			return res.sendStatus(400);
		}
		if (!user) {
			console.log('no user');
			return res.sendStatus(400);
		}		
		req.logIn(user, function(err) {
			if (err) { return next(err); } else {
				console.log(req.session)
				// return
				return res.sendStatus(200);					
			}
		});
	})(req, res, next);
});

/*** POST SIGNUP A USER ***/
app.post('/api/signup', (req, res, next) => {
	passport.authenticate('signup', registerUser)(req, res, next);
	function registerUser(err, user, info) {
		if (err) { console.log(err); return res.send(err) }
		if (!user) {
			return res.status(400).json(info);
		}
		if (user){
			req.logIn(user, function(err) {
				if (err) { return next(err); }
				// return
				return res.sendStatus(200);
			});
		}
	}
});

/*** LOGOUT A USER ***/
app.post('/api/logout', (req, res, next) => {
	res.clearCookie('connect.sid'); 
	req.logout(function(err) {
		console.log('logged out');
		console.log(err)
		req.session.destroy(function (err) {
			res.send();
		});
	});
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

Let's take a closer look at what was changed.  We are requiring 3 new npm modules: express-session, connect-mongo, and passport.  

const session  = require('express-session'); // Authentication is stored in sessions, so we'll use express-session
const MongoStore = require('connect-mongo');  // Used to connect our session data to our MongoDB
const passport = require('passport'); // Passport is used for authentication

express-session and connect-mongo are both used to connect our login sessions to our Mongo database. These allow us to store a user login session on our database after the user has logged in.  Our server script can then connect and check our database if a user is logged in.  

We then initialize passport initPassport and start a session.

// Initialize Passport
const initPassport = require('./passport/init');
initPassport(passport);
// Create the Session
app.use(session({
	secret: process.env.SESSION_SK,
	resave: true,
	saveUninitialized: false,
	cookie: {
 		httpOnly: false,
		sameSite: true,
		maxAge: 10 * 4 * 60 * 60 * 1000,
	},
	store: MongoStore.create({
		mongoUrl: connectString,
		ttl: 10 *4 * 60 * 60,
	})
}));
app.use(passport.initialize()); // initialize passport login sessions
app.use(passport.session()); // for persistent login sessions

The above adds our passport init.js, signup.js, and login.js files for use.  The session then creates a connection between our server and database to handle the login session.  The session will be stored as a cookie on our server, and contain needed login information such as a unique identifier for the session, and when the session should expire for server and database ( maxAge & ttl).

The last part we added are the API routes:

app.post('/api/login', (req, res, next) => {
	passport.authenticate('login', function(err, user, info) {
		if (err) {
			console.log('err');
			return res.sendStatus(400);
		}
		if (!user) {
			console.log('no user');
			return res.sendStatus(400);
		}		
		req.logIn(user, function(err) {
			if (err) { return next(err); } else {
				console.log(req.session)
				// return
				return res.sendStatus(200);					
			}
		});
	})(req, res, next);
});

/*** POST SIGNUP A USER ***/
app.post('/api/signup', (req, res, next) => {
	passport.authenticate('signup', registerUser)(req, res, next);
	function registerUser(err, user, info) {
		if (err) { console.log(err); return res.send(err) }
		if (!user) {
			return res.status(400).json(info);
		}
		if (user){
			req.logIn(user, function(err) {
				if (err) { return next(err); }
				// return
				return res.sendStatus(200);
			});
		}
	}
});

/*** LOGOUT A USER ***/
app.post('/api/logout', (req, res, next) => {
	res.clearCookie('connect.sid'); 
	req.logout(function(err) {
		console.log('logged out');
		console.log(err)
		req.session.destroy(function (err) {
			res.send();
		});
	});
});

The above routes handle the client post actions when the user signs up, logs in, or logs out.  They utilize the passport scripts we created and sends authentication data back to the client.

Since, we've added new npm modules, we'll need to install them.  From our terminal within the server directory, install them by running the following:

npm install  express-session connect-mongo passport passport-local bcrypt-nodejs

We also need to create a session key in our .env file.  This can be any secret text that you like, and adds a security layer when sending data between our server and our mongo database.  In the example below, I am adding this under our MONGODB key created in our last tutorial.

MONGODB=mongodb+srv://<username>:<password>@cluster0.ltkorue.mongodb.net/?retryWrites=true&w=majority
SESSION_SK = mysecretkey

Building Our Client

Now we build our front end framework using VueJs. The frontend framework defines everything on our user's browser, including how the app looks via HTML & CSS.  It also handles our client side actions, for example when the user clicks "Login," the client side will post this action to our server.

Now, we'll be working from our client directory.  First, we'll be using the vue3-cookies module to get our authentication cookie on the client.  Let's install this now.  From our client directory, run the following:

npm install vue3-cookies --save

Next, open the App.vue file and rewrite the entire file as follows:

<template>
	<div>
		<main class="main">
			<form v-if="!authenticated">
				<input
					type="text"
					placeholder="Email Address"
					v-model="email"
				/>
				<input
					type="password"
					placeholder="Password"
					v-model="password"
				/>
				<input type="submit" value="Sign Up" @click.prevent="onSignup"/>
				<input type="submit" value="Login" @click.prevent="onLogin" />
			</form>
			<form @submit.prevent="onLogout" v-if="authenticated">
				<h1>You're Logged In!</h1>
				<br>
				<input type="submit" value="Logout" />
			</form>
		</main>
	</div>
</template>

<script lang="ts">
	import { defineComponent, onMounted, ref } from 'vue'
	import axios from 'axios'
	import { useCookies } from "vue3-cookies";

	axios.defaults.withCredentials = true
	export default defineComponent({
		setup() {
			const { cookies } = useCookies() as any
			return { cookies }
		},
		data() {
			return {
				email: "" as string,
				password: "" as string,
				result: "" as string,
				authenticated: false as boolean,
			}
		},
		computed: {
			checkCookie() {
				if (this.cookies.get('connect.sid')) {
					return true
				} else {
					return false
				}
			},
		},
		methods: {
			onSignup() {
				try {
				axios
				.post("/api/signup", { 
					email: this.email,
					password: this.password,
				})
				.then((response) => {
					this.authenticated = true
				}, (error) => {
					throw error || new Error(`Request failed`);
				})
				} catch(error:any) {
				}
			},
			onLogin() {
				try {
				axios
				.post("/api/login", { 
					email: this.email,
					password: this.password,
				})
				.then((response) => {
					this.authenticated = true
				}, (error) => {
					throw error || new Error(`Request failed`);
				})
				} catch(error:any) {
					// Consider implementing your own error handling logic here
					alert(error.message);
				}
			},
			onLogout() {
				try {
					axios
					.post("/api/logout")
					.then((response) => {
						this.authenticated = false
					}, (error) => {
						throw error || new Error(`Request failed`);
					})
				} catch(error:any) {
					// Consider implementing your own error handling logic here
					console.error(error);
					alert(error.message);
				}
			},
		},
		mounted(){
			this.authenticated = this.checkCookie
		}
	});
</script>

<style>
  @font-face {
    font-family: "ColfaxAI";
    src: url(https://cdn.openai.com/API/fonts/ColfaxAIRegular.woff2)
        format("woff2"),
      url(https://cdn.openai.com/API/fonts/ColfaxAIRegular.woff) format("woff");
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: "ColfaxAI";
    src: url(https://cdn.openai.com/API/fonts/ColfaxAIBold.woff2) format("woff2"),
      url(https://cdn.openai.com/API/fonts/ColfaxAIBold.woff) format("woff");
    font-weight: bold;
    font-style: normal;
  }
  .main,
  .main input {
    font-size: 16px;
    line-height: 24px;
    color: #353740;
    font-family: "ColfaxAI", Helvetica, sans-serif;
  }
  .main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 60px;
  }
  .main .icon {
    width: 34px;
  }
  .main h3 {
    font-size: 32px;
    line-height: 40px;
    font-weight: bold;
    color: #202123;
    margin: 16px 0 40px;
  }
  .main form {
    display: flex;
    flex-direction: column;
    width: 320px;
  }
  .main input {
    padding: 12px 16px;
    border: 1px solid #10a37f;
    border-radius: 4px;
    margin-bottom: 24px;
    outline-color: #10a37f;
  }
  .main ::placeholder {
    color: #8e8ea0;
    opacity: 1;
  }
  .main input[type="submit"] {
    padding: 12px 0;
    color: #fff;
    background-color: #10a37f;
    border: none;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
  }
  .main .result {
    font-weight: bold;
    margin-top: 40px;
  }
</style>

Let's explain the above.  The first major change is our login form:

<form v-if="!authenticated">
    <input
        type="text"
        placeholder="Email Address"
        v-model="email"
    />
    <input
        type="password"
        placeholder="Password"
        v-model="password"
    />
    <input type="submit" value="Sign Up" @click.prevent="onSignup"/>
    <input type="submit" value="Login" @click.prevent="onLogin" />
</form>
<form @submit.prevent="onLogout" v-if="authenticated">
    <h1>You're Logged In!</h1>
    <br>
    <input type="submit" value="Logout" />
</form>

We've added an HTML form that takes both the email and password inputs.  We've also added a signup and login button.  Below that is another form intended for logged in users, with only one button to log out.  Both forms use the v-if functionality provided by VueJs to check against an authenticated variable.  If the user is not authenticated, it shows the first login/signup form, and if the user is authenticated, it shows the second logout form.  

Implementing Vue3 Cookies

The next major highlight is the use of vue3-cookies:

import { useCookies } from "vue3-cookies";

axios.defaults.withCredentials = true
export default defineComponent({
    setup() {
        const { cookies } = useCookies() as any
        return { cookies }
    },

Per the vue3-cookies documentation, we are importing this module and making it available to our app during setup(). When a user logs in, our server sends a cookie to the client. It's important for our client to search for this cookie, especially on hard reloads, to see if we've already logged in.  Hence, later in this file we add a computed property to check for authentication by cookie:

computed: {
    checkCookie() {
        if (this.cookies.get('connect.sid')) {
            return true
        } else {
            return false
        }
    },
},

We utilize this function whenever our app mounts, which is added later in our script as follows:

mounted(){
    this.authenticated = this.checkCookie
}

The above check happens whenever the app mount, such as during a hard reload. Hard reload will clear most of our app data but does not clear cookies, hence we can check for authentication if our cookie is still present.

Adding Our Client Data

Next, we define the variables that our client will use.  In our case: email, password, and authenticated.  We can see these variables sprinkled into our app's HTML forms that we wrote earlier.

data() {
    return {
        email: "" as string,
        password: "" as string,
        authenticated: false as boolean,
    }
},

Handling User Actions

Finally, we add the javascript functions on the client for handling user signups, logins, and logouts.  You can also find these functions defined on our HTML form buttons that we wrote earlier.  These functions post the necessary user data to our server routes.

methods: {
    onSignup() {
        try {
        axios
        .post("/api/signup", { 
            email: this.email,
            password: this.password,
        })
        .then((response) => {
            this.authenticated = true
        }, (error) => {
            throw error || new Error(`Request failed`);
        })
        } catch(error:any) {
        }
    },
    onLogin() {
        try {
        axios
        .post("/api/login", { 
            email: this.email,
            password: this.password,
        })
        .then((response) => {
            this.authenticated = true
        }, (error) => {
            throw error || new Error(`Request failed`);
        })
        } catch(error:any) {
            // Consider implementing your own error handling logic here
            alert(error.message);
        }
    },
    onLogout() {
        try {
            axios
            .post("/api/logout")
            .then((response) => {
                this.authenticated = false
            }, (error) => {
                throw error || new Error(`Request failed`);
            })
        } catch(error:any) {
            // Consider implementing your own error handling logic here
            console.error(error);
            alert(error.message);
        }
    },
},

With that, your authentication app is ready to go!

Let's restart our client and server scripts that we ran earlier (press ctrl c to stop any existing scripts).  

From the client directory, run:

npm run dev

From the server directory, run:

node server.js

And, we should then see our app in action:

A short explanation for how to properly logout using PassportJs, Express-Session for single page web application.  This short tutorial will share how to fully logout server side and clear the client side cookie as well.

The short answer:

/*** LOGOUT A USER ***/
app.post('/api/logout', (req, res, next) => {
	res.clearCookie('connect.sid');  // clear the session cookie
	req.logout(function(err) {  // logout of passport
		req.session.destroy(function (err) { // destroy the session
			res.send(); // send to the client
		});
	});
});

A thorough explanation:

While the documentation for PassportJs and Express Session are relatively clear for login in a user, I could not find great documentation for how these all worked together to logout a user.  Hence, I'm not sure if the above is the official and proper way to logout, and only arrived at this by much trial and error.  My goal was to clear the session on both the server and client.  So, I'll walk you through a short summary of my tests and findings! 🤓

Logging out with the PassportJs logout function

app.post('/logout', function(req, res, next){
  req.logout(function(err) {
    if (err) { return next(err); }
    res.redirect('/');
  });
});

PassportJs provides the example above, but this won't work for my single page web app, as I want to avoid using res.redirect('/'). So below is my first re-write:

/*** LOGOUT A USER ***/
app.post('/api/logout', (req, res, next) => {
	req.logout(function(err) {
		console.log(err)
	});
});

Using req.logout will logout the user and clear the cookie on our database, but it does not clear that pesky cookie on the client.  You can find this cookie by opening google developer console in your browser and clicking the applications tab.

Adding ExpressJs Clear Cookie and sending

Next, I am adding res.clearCookie() provided by ExpressJs.  I am also creating an empty send response to update our client (see code comments below):

/*** LOGOUT A USER ***/
app.post('/api/logout', (req, res, next) => {
	res.clearCookie('connect.sid');  // clear the cookie
	req.logout(function(err) {
		console.log(err)
		res.send(); // send to the client
	});
});

Interestingly, this also clears the cookie on the database, but just keeps updating our client side cookie to something new?

Finally, let's Destroy the Session in Express-Session

Express-session has a function to destroy our session.  Let's then destroy our session prior to sending to the client, as shown in the commented code below.

/*** LOGOUT A USER ***/
app.post('/api/logout', (req, res, next) => {
	res.clearCookie('connect.sid'); 
	req.logout(function(err) {
		console.log(err)
		req.session.destroy(function (err) { // destroys the session
			res.send();
		});
	});
});

After firing up our server again, we see that the above code clears the session in our database.  It also clears our cookie client side (Hooray!).

A starter example tutorial for connecting ExpressJs to a Mongoose database hosted on MongoDB.

Prerequisites

Here's what you will need in order to get started:

• Setup a MongoDB account to host your database.
• We will continue on the simple starter Vue3/ExpressJS app from our prior post.

Getting Started

First, let's clone our prior Vue3/ExpressJS app and rename it.  Run the following:

git clone git@github.com:Initial-Apps/vue3-express.git vue3-express-mongo

Now, let's move into our app and install our modules on our server:

cd vue3-express-mongo/server
npm install

Next, let's start the server to make sure all is working.  Run the following:

node server.js

Setting up MongoDB

Login to your MongoDB account: https://cloud.mongodb.com/

Select New Project and name your project. You can add members if you like. Then click Create Project.

Next, continue to Build a Database.

Select whatever plan you like and click create.

Next, create a username and password for your database, and be sure to save this info.

Then, select connect from My Local Environment (see below):

Finally, select Finish and Close. Hooray, we've setup our database! 🤓

Connecting ExpressJs to our MongoDB

Now let's work on our server to connect ExpressJs to MongoDB. To do this, we'll work on our server middleware file server/server.js. Let's open this file and get to work.  

I'm adding the following code to server.js just after defining our imported modules. I've added code comments as well.

require('dotenv').config(); // needed to read our environment variables
const mongoose = require('mongoose');  // We need the mongoose module
const connectString = process.env.MONGODB;  // This holds our username and password, stored as a environment variable
mongoose.connect(connectString, { useNewUrlParser: true }).then(
  () => { 
    console.log ('Succeeded connected to database');
   },
  err => { 
    console.log ('ERROR connecting to database: ' + err);
   }
);

Here's what the above code does:

• Adds the dotenv module so that we can store our MongoDB username and password as an environment variable.  This is preferred over placing this sensitive information directly in your code.
• Adds the mongoose module for connecting to our MongoDB database
• The connectString variable will hold our login credentials for MongoDB.  We'll set this up next.
• Finally, we add the connect script to connect to our DB.

Next, we have to setup our login and password for MongoDB as an environment variable.  You do not want to ever share this file because it has sensitive login information.  That said, I've created a example_env.txt file in our github repo to provide template.  

We make sure our environment credentials are hidden by opening your .gitignore file, adding the following to the end of the file and save:

# env files
.env

Next, we'll get our connect string from MongoDB. You can find your connect string format on your MongoDB dashboard.  Click connect and then connect by Drivers.

We are going to add our key using mongoose so we only need to pay attention to the Driver and the Connection String.

Select Node for the Driver like so:

Then copy and paste your Connection String:

Now create a file named .env and add your connect URL. The contents of the file should look something like this (replacing <username> and <password> with the MongoDB username and password we created in the last section). Save the file once this is added.

MONGODB=mongodb+srv://<username>:<password>@cluster0.ltkorue.mongodb.net/?retryWrites=true&w=majority

Then we install the modules we need for the connection.  From the terminal window that we used to run our node server (the one that we ran node server.js).  First stop the server (hit ctrl+c).  Now install the modules:

npm install mongoose dotenv

Now we can restart our server by running:

node server.js

If all runs properly, you should see the following on your console:

Congrats as you are now connected to your database!

What's Next

Next, we need to start using your new database for various data!  Want to see how we do that?  Stay tuned or subscribe as we continue this app.

AI is hot these days, and OpenAI has an excellent and powerful API for all to use! They have a nice tutorial for getting started, with a source repo built in ReactJs. I wanted to do this with Vue3 and share with the world. So without further ado, here's how to setup a starter app with OpenAI using Vue3 and Expressjs.

You can find more about OpenAI's quickstart guide example here.  This example app takes in an animal and spits out 3 suggestions for a pet name.  The quickstart app is built on ReactJs and Nextjs. This guide will rewrite the quickstart guide using Vue3 and ExpressJs.  Why, because I really like Vue3! 🤓

Prerequisite: Setting up an app with Vue3 and ExpressJs

This tutorial picks up from where our last tutorial left off.  If you want to setup your app from scratch, please see the below link:

Setting up Vue3, Vite, and Express

A simple example setup of Vue3 using Vite, with ExpressJS and NodeJS on the backend.

Initial AppsAndrew Akagawa

Otherwise, you can skip ahead by cloning the repo from the link below:

git clone https://github.com/Initial-Apps/vue3-express.git

Setting up the client side

Let's first start with some housekeeping. We'll give our app a new directory name and then move into our new repo:

mv vue3-express openai-quickstart-vue3
cd openai-quickstart-vue3

Now let's start the client side.  Move into your new apps client folder, install our modules, and run the dev script:

cd client
npm install
npm run dev

Hooray, we should now have a Vue starter app running! Navigate to http://localhost:5173/ to see it.

Setting up our OpenAI credentials

Now lets start to work on on server.  Open a new terminal, move in the server folder, and install our npm modules.

cd server
npm install

Next, let's make sure our environment credentials are hidden.  In the server directory, open your .gitignore file, add the following to the end of the file and save:

# env files
.env

This will keep your API credentials hidden to your git repo.

Next, create a new file and name it .env.  Copy and paste the following into your .env file.  Add your OpenAPI key.  

# Do not share your OpenAI API key with anyone! It should remain a secret.
OPENAI_API_KEY=

Setting up ExpressJs

Now, let's setup our server script.  Open the server.js file and rewrite as follows:

const express = require('express')
const app = express()
const port = 3000
const bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

require('dotenv').config(); // needed to read our environment variables

// the next 3 const integrate the openai API
const {Configuration, OpenAIApi} =  require("openai");
const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

// this post function is a taken from openai quickstart example, but modified to work with expressjs
app.post('/api/generator', async (req, res) => {
  if (!configuration.apiKey) {
      res.status(500).json({
          error: {
              message: "OpenAI API key not configured, please follow instructions in README.md",
          }
      });
      return;
  }

  const animal = req.body.animal || '';
  if (animal.trim().length === 0) {
      res.status(400).json({
          error: {
              message: "Please enter a valid animal",
          }
      });
      return;
  }

  try {
      const completion = await openai.createCompletion({
          model: "text-davinci-003",
          prompt: generatePrompt(animal),
          temperature: 0.6,
      });
      res.status(200).json({ result: completion.data.choices[0].text });
  } catch(error) {
      // Consider adjusting the error handling logic for your use case
      if (error.response) {
          console.error(error.response.status, error.response.data);
          res.status(error.response.status).json(error.response.data);
      } else {
          console.error(`Error with OpenAI API request: ${error.message}`);
          res.status(500).json({
              error: {
              message: 'An error occurred during your request.',
              }
          });
      }
  }
  function generatePrompt(animal) {
  const capitalizedAnimal =
      animal[0].toUpperCase() + animal.slice(1).toLowerCase();
      return `Suggest three names for an animal that is a superhero.

      Animal: Cat
      Names: Captain Sharpclaw, Agent Fluffball, The Incredible Feline
      Animal: Dog
      Names: Ruff the Protector, Wonder Canine, Sir Barks-a-Lot
      Animal: ${capitalizedAnimal}
      Names:`;
  }    
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

This updated code adds the openai generator route to our server script. The generator route is basically a rewrite of the the quickstart example provided by OpenAI, so that it works with ExpressJs. The server script makes all the API calls to OpenAI, so feel free to come back to this later and play around with it for fun!

We also must install the OpenAI API, and dotenv to read the access keys in our .env folder.  We do this by running the following install scripts:

npm install openai
npm install dotenv --save

Now we can run our server with the foll0wing command from the server directory to start our sever:

node server.js

Finally, let's rewrite the VueJs frontend

First, let's rewrite our App.vue file.  You can find this in the client\src\ directory. Basically, we are rewriting the OpenAI quickstart example from React to Vue as follows:

<template>
  <div>
    <Head>
      <title>OpenAI Quickstart</title>
      <link rel="icon" href="/dog.png" />
    </Head>

    <main class="main">
      <h3>Name my pet</h3>
      <form @submit.prevent="onSubmit">
        <input
          type="text"
          name="animal"
          placeholder="Enter an animal"
          v-model="animalInput"
        />
        <input type="submit" value="Generate names" />
      </form>
      <div class="result">{{result}}</div>
    </main>
  </div>
</template>

<script lang="ts">
	import { defineComponent, onMounted, ref } from 'vue'
  import axios from 'axios'

	export default defineComponent({
		data() {
			return {
				animalInput: "" as string,
        result: "" as string,
			}
		},
		methods: {
			onSubmit() {
        try {
          axios
          .post("/api/generator", { animal: this.animalInput })
          .then((response) => {
            this.result = response.data.result;
          }, (error) => {
            throw error || new Error(`Request failed`);
          })
        } catch(error:any) {
          // Consider implementing your own error handling logic here
          console.error(error);
          alert(error.message);
        }
      }
		}
	});
</script>

<style>
  @font-face {
    font-family: "ColfaxAI";
    src: url(https://cdn.openai.com/API/fonts/ColfaxAIRegular.woff2)
        format("woff2"),
      url(https://cdn.openai.com/API/fonts/ColfaxAIRegular.woff) format("woff");
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: "ColfaxAI";
    src: url(https://cdn.openai.com/API/fonts/ColfaxAIBold.woff2) format("woff2"),
      url(https://cdn.openai.com/API/fonts/ColfaxAIBold.woff) format("woff");
    font-weight: bold;
    font-style: normal;
  }
  .main,
  .main input {
    font-size: 16px;
    line-height: 24px;
    color: #353740;
    font-family: "ColfaxAI", Helvetica, sans-serif;
  }
  .main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 60px;
  }
  .main .icon {
    width: 34px;
  }
  .main h3 {
    font-size: 32px;
    line-height: 40px;
    font-weight: bold;
    color: #202123;
    margin: 16px 0 40px;
  }
  .main form {
    display: flex;
    flex-direction: column;
    width: 320px;
  }
  .main input[type="text"] {
    padding: 12px 16px;
    border: 1px solid #10a37f;
    border-radius: 4px;
    margin-bottom: 24px;
    outline-color: #10a37f;
  }
  .main ::placeholder {
    color: #8e8ea0;
    opacity: 1;
  }
  .main input[type="submit"] {
    padding: 12px 0;
    color: #fff;
    background-color: #10a37f;
    border: none;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
  }
  .main .result {
    font-weight: bold;
    margin-top: 40px;
  }
</style>

Congrats for setting up your Vue3 app with OpenAI!

You should now have a working app that harnesses the power of AI and ChatGPT (or text-davinci).  Refresh your http://localhost:5173/ to see it.  When you enter an animal in the text box, the AI API will give you suggestions for 3 names for this animal.  Now that you have the initial setup, feel free play around with all the possibilities that this AI technology brings!

A quick guide to getting started with Vue3, Vite, and ExpressJS & NodeJS for our backend.  Let's jump right in!

First, Let's Setup Vue3

First let's make a directory to house our app and open that directory.

mkdir vue3-express
cd vue3-express

Next, make sure you're up to date with node, npm, etc. and run the following.

npm init vue@latest

This will walk through the official Vue3 install script.  It will ask you to name your app. I named mine client.

For the rest of the questions, if you don't know the answer I recommend you answer no. When done with these questions, you will have a starter Vue3 app!

Finish the install by changing into the directory and installing the npm packages (use the following code):

  cd client
  npm install
  npm run dev

Hooray, we should now have a Vue starter app running! Navigate to http://localhost:5173/ to see it. Mine looks like this:

Setting up ExpressJs

Now we install ExpressJs.  First, we should start a new terminal in our parent directory named vue3-express.  Then create a new directory for our server, which I will name this directory server.  We then move into our server directory and initialize it in npm.

mkdir server
cd server
npm init

Next, we  install our needed modules: ExpressJs for our API posts, and Body-Parser to get the posted data.  We install these by running the following.

npm install express
npm install body-parser

Next, we setup our server script.  Create a new file titled server.js (or whatever you want to name your server file) and add the following:

const express = require('express')
const app = express()
const port = 3000
const bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));


app.post('/api', (req, res) => {
  console.log(req.body)
  res.status(200).json({ result: req.body.text });
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

The above is a very simple node server using express as a middleware to capture post data from our client.

Start the server by running:

node server.js

Finally, Let's Configure Vite and Create a Vue3 Test Form

Open a new terminal window and move back into our client directory and install Axios for post requests. Run the following:

cd client
npm install axios

First, let's configure Vite to proxy our server so the client and server ports can talk to each other.  Open vite.config.ts and add the the proxy info such that the entire file will now look like this:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
		proxy: {
			'/api': {
				target: 'http://localhost:3000',
				changeOrigin: true,
				secure: false,
				ws: true,
			},
		},
	} 
})

Next, lets completely rewrite our App.vue file (inside the src directory) so that it is a test form, to try out our post:

<template>
  <div>
    <main class="main">
      <form @submit.prevent="onSubmit">
        <input
          type="text"
          placeholder="Enter Anything"
          v-model="testInput"
        />
        <input type="submit" value="Test Server" />
      </form>
      <div class="result">{{result}}</div>
    </main>
  </div>
</template>

<script lang="ts">
	import { defineComponent, onMounted, ref } from 'vue'
  import axios from 'axios'

	export default defineComponent({
		data() {
			return {
				testInput: "" as string,
        result: "" as string,
			}
		},
		methods: {
			onSubmit() {
        try {
          axios
          .post("/api", { text: this.testInput })
          .then((response) => {
            this.result = response.data.result;
          }, (error) => {
            throw error || new Error(`Request failed`);
          })
        } catch(error:any) {
          // Consider implementing your own error handling logic here
          console.error(error);
          alert(error.message);
        }
      }
		}
	});
</script>

<style>
  @font-face {
    font-family: "ColfaxAI";
    src: url(https://cdn.openai.com/API/fonts/ColfaxAIRegular.woff2)
        format("woff2"),
      url(https://cdn.openai.com/API/fonts/ColfaxAIRegular.woff) format("woff");
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: "ColfaxAI";
    src: url(https://cdn.openai.com/API/fonts/ColfaxAIBold.woff2) format("woff2"),
      url(https://cdn.openai.com/API/fonts/ColfaxAIBold.woff) format("woff");
    font-weight: bold;
    font-style: normal;
  }
  .main,
  .main input {
    font-size: 16px;
    line-height: 24px;
    color: #353740;
    font-family: "ColfaxAI", Helvetica, sans-serif;
  }
  .main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 60px;
  }
  .main .icon {
    width: 34px;
  }
  .main h3 {
    font-size: 32px;
    line-height: 40px;
    font-weight: bold;
    color: #202123;
    margin: 16px 0 40px;
  }
  .main form {
    display: flex;
    flex-direction: column;
    width: 320px;
  }
  .main input[type="text"] {
    padding: 12px 16px;
    border: 1px solid #10a37f;
    border-radius: 4px;
    margin-bottom: 24px;
    outline-color: #10a37f;
  }
  .main ::placeholder {
    color: #8e8ea0;
    opacity: 1;
  }
  .main input[type="submit"] {
    padding: 12px 0;
    color: #fff;
    background-color: #10a37f;
    border: none;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
  }
  .main .result {
    font-weight: bold;
    margin-top: 40px;
  }
</style>

Now, you should be able to see the new form at http://localhost:5173/.  When you enter information and submit the form, you should see this info log on the server and then see it sent back to the client.

Congrats, you've setup a new node app using Vue3, Vite, and ExpressJS!  Thanks for reading and hope this helps.

An example for how to create custom theme color pallets in Bootstrap 5 using Sass. This post focuses on Bootstrap's color mapping functionality.

I was super happy to learn Bootstrap 5 is jQuery-less. Don't get me wrong, jQuery deserves it's place in legendary JS history, but doesn't play well with a lot of the latest frameworks today.

That said, it took me awhile to figure out how the Sass color mapping worked, so I shall share my experimentation in this post, using a new Vue app as an example!

Github repo here.

The Setup

First off, I'm creating a new Vue 3 app with Vite to compile our Sass. Feel free to skip this section if you're not interested in setting things up and just want to see the Sass customization.

Make sure you're up to date with node, npm, etc. and run the following.

npm init vue@latest

If you run into any issues, you can find the official instructions for starting a Vue 3 app provided here.

The installer asks a series of questions, that you can answer mostly no too as we're just using this as an easy setup to compile the sass.

Name the project whatever you like (mine is bootstrap-5-sass-example). Next, move into it when created and install.

cd bootstrap-5-sass-example
npm install
npm run dev

Hooray, we should now have a Vue starter app running! Navigate to http://localhost:3000/ to see it. Mine looks like this:

Now let's install bootstrap! Exit the running terminal ctrl+c and let's keep going:

npm install --save bootstrap
npm install --save @popperjs/core

Next, let's setup our Vite to compile Sass!

We start by making a scss file in our source directory. I'm making the following new file & path: src>assets>sass>main.scss, and leaving the main.scss file blank for now.

Vue is currently using Vite to compile everything, so we can reference the path to our sass file in the Vite config file (vite.config.ts) by adding the following in the export default defineConfig block:

  css: {
    preprocessorOptions: {
      sass: {
        additionalData: `
          @import "@/assets/sass/main.scss";
        `
      }
    }
  }

Also, per the Vite docs, we need to install the Sass pre-processor by running the following (more info provided here):

npm add -D sass

Now we're almost Bootstrap ready!  

Let's test this out by adding some nice buttons. I'm going to grab some code from the Bootstrap website. We can add it into the main App.vue file in the source code (src>App.vue). I'm basically going to re-write the html template block inside this file with the following Bootstrap'd out code:

<template>
  <div class="container mt-5">
    <h1>Bootstrap Buttons!</h1>
    <div class="row">
      <div class="col">
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-secondary">Secondary</button>
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" class="btn btn-danger">Danger</button>
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" class="btn btn-info">Info</button>
      </div>
    </div>
  </div>
</template>

We also need to import our sass file. Again, in the App.vue file we replace the style block to import our sass:

<style lang="scss">
  @import "@/assets/sass/main.scss";
</style>

Creating the custom Sass file

Note, this is where things first got confusing for me. Bootstrap gives you either an option to load all of bootstrap (with no access to customization functions), or load parts of bootstrap (see here). For the life of me, I could not get Option B (including only parts of Bootstrap) to work. Since, I wanted all of bootstrap, as well as access to functions I decided to do both! e.g. I wanted to have my cake and eat it too! 🎂

So here's my main.scss file (hacked together with both options):

// Custom.scss

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here


// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";

// 4. Include any default map overrides here


// 5. Import all the rest of Bootstrap 
@import "../node_modules/bootstrap/scss/bootstrap";


// Then add additional custom code here

Now lets run run the developer script in the terminal, to see things up and running:

npm run dev

It should look like this (with all the nice bootstrap colors)!

Now lets customize the Sass!

Bootstrap gives us some nice functions to do this. It's important to note where things are placed in the sass file for it to work properly, so pay attention to the comments in the main.cscc file.  

I'm going to head over to coolors to make a random new theme color palette. Here it is!

Now let's re-write bootstrap's usual color variables (primary, secondary, etc) in the main.scss file, just under the 2. comment:

// 2. Include any default variable overrides here
$primary: #D4CBE5;
$secondary:#CFC7D2;
$success: #BEA8AA;
$warning: #9E9885;
$danger: #7C7F65;

Notice these re-writes are added before loading Bootstrap's variables in the 3. comments. That's because Boostrap uses the !default tag on all of it's variables. That meas the theme will take Bootstrap's defined value by default, if no other value has been assigned prior.

And our buttons now look like this:

Adding our own classes

Awesome! What if we want our own custom names for colors (e.g. btn-lavender), and with all the nice functionality, like changing shades when hovering over a button? Bootstrap has a mapping function for that! So, using coolors again, here's a new palette:

Per the bootstrap docs, we can load the Bootstrap variables first then call the map-merge function to add our own new custom classes to our pallet!

First we define the custom colors after the 4. comment (under the variables and mixins):

// 4. Include any default map overrides here
// Create your own map
$custom-colors: (
  "dark-lava": #4B4237,
  "goldenrod": #D5A021,
  "alabaster": #EDE7D9,
  "spanish-gray": #A49694,
  "dim-gray": #736B60,
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

Notice the map-merge function at the end.  That's what creates our new color classes.

Now let's test them in our html (App.vue) file by adding the following:

<h1>Custom Buttons!</h1>
<div class="row">
  <div class="col">
    <button type="button" class="btn btn-dark-lava">Dark Lava</button>
    <button type="button" class="btn btn-goldenrod">Goldenrod</button>
    <button type="button" class="btn btn-alabaster">Alabaster</button>
    <button type="button" class="btn btn-spanish-gray">Spanish Gray</button>
    <button type="button" class="btn btn-dim-gray">Dim Gray</button>
  </div>
</div>

And now we check out the site:

We now have a set of fully functional customized theme classes!

Accessing all of Bootstrap's colors

If you noticed, bootstrap has a ton of extra color classes!  However, they are not added by default so we can also activate them in our color mapping function.

In this example, I'll add the following: purple-100, blue-200, pink, and teal-800.

We add a bit more html code to our App.vue file:

<h1>Additional Bootstrap Colors</h1>
<div class="row">
  <div class="col">
    <button type="button" class="btn btn-purple-100">Purple-100</button>
    <button type="button" class="btn btn-blue-200">Blue-200</button>
    <button type="button" class="btn btn-pink">Pink</button>
    <button type="button" class="btn btn-teal-800">Teal-800</button>
  </div>
 </div>  

Also, we append to our main.scss file in the $custom-colors:

// 4. Include any default map overrides here
// Create your own map
$custom-colors: (
  "dark-lava": #4B4237,
  "goldenrod": #D5A021,
  "alabaster": #EDE7D9,
  "spanish-gray": #A49694,
  "dim-gray": #736B60,
  "purple-100": $purple-100,
  "blue-200": $blue-200,
  "pink": $pink,
  "teal-800": $teal-800,
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

Notice, since we use this function after loading the bootstrap variables, we can just add the extra color variables to our custom colors.

And the final site looks like this:

Final thoughts

Hope this helps you get started setting up Sass on Bootstrap 5!

Get the source code here: https://github.com/initialapps/bootstrap-5-sass-example

Locked out of your Digital Ocean server?  Here's how to get back in.  This short article is for anyone that has lost access to the SSH key used to setup their Digital Ocean droplet.

This article will not help you, if you do not know the username and password used to setup your server.  In that case, you will have to instead reset your root password per the Digital Ocean docs.

Finally, we assume that you have some basic knowledge of Ubuntu, SSH keys, command line editors (if not, just google it).

Basic overview of the following steps:

• Access the Digital Ocean online terminal
• Update the SSH config file to allow username and password login
• Setup new SSH key
• Revert your SSH config file

Step 1: Access the Digital Ocean online terminal

Log into your Digital Ocean account, select your droplet, and click Access > Launch Console.

This will get you into your droplet through the online terminal.  

If you're brave enough, you can try to update your ssh key directly through this terminal, but the interface is a bit clunky and crashed on me. Hence, I recommend the next steps.

Step 2:  Allow username and password

Next, we'll update the droplet's config file to allow SSH by username and password. Note, the below will be a less secure setup, but we'll change it back afterward.

Using your favorite editor (nano below), open the file:

sudo nano /etc/ssh/sshd_config

We'll update this file to turn off PAM (Pluggable Authentication Modules).  Find this line and update to no:

UsePAM no

We'll also update this to allow password authentication:

PasswordAuthentication yes

Save and exit the file, and reload SSH on your droplet:

sudo systemctl restart ssh

Step 3: Setup your new SSH key

If you don't have one already on your local machine, set this up:

ssh-keygen -t rsa

Copy your key to the server, using your username and droplet IP address in place of the demo below:

ssh-copy-id username@droplet_IP

You should now be able to complete the above, and access your droplet with your original username and password.  Note, if you do not know your username and password, you will have to instead reset your root password per the Digital Ocean docs.

Step 4: Revert your SSH config file

Now that you are setup with SSH keys, you can reset your config file back to its original settings.  You can either use the Digital Ocean terminal, or SSH into your droplet ssh username@droplet_IP.

Using your favorite editor (nano below), open the file:

sudo nano /etc/ssh/sshd_config

Revert this file to turn PAM on:

UsePAM yes

Revert password authentication to off:

PasswordAuthentication no

Save and exit the file, and reload SSH on your droplet:

sudo systemctl restart ssh

Your droplet should now be good to go!

We're excited to be sharing our first OC Civic Coder's project to help easily visualize where Corona Virus is spreading in Orange County using data provided by the OC Health Care Agency.  This open source app uses visualization charts, and bubble maps to show where Covid-19 is in Orange County, and how it is spreading over time.  

The goal of this app is to provide tracking data to the general public that's easy to understand, in efforts to help slow the spread and see if our preventative measures are working.  This app is hosted on the OC Civic Coders site (check it out)!

How Corona Virus has spread in Orange County over time by city

Case counts have been gradually on the rise from mid March through April, however hospitalizations and ICU counts have been relatively flat.  The dropdown menu provides individual case counts by city, thus allowing locals to track and encourage preventative measures close to home.  The app additionally breaks down Covid-19 case ratios by gender and age.

A bubble map for where Covid-19 is occurring in Orange County

This bubble map displays visual representations for the amount of Corina Virus cases by city in Orange County.  The dropdown menu additionally lets you visualize by case counts per population, which in turn displays some interesting results as opposed to visualizing by counts alone.  The sidebar to the right sorts case counts from largest to smallest and points out the location when hovered over.

In addition, the app shows how the spread initially began, trending data by travel related, vs locally spread.  Data related to travel is no longer being tracked as most cases now are locally spread within the community.

Built open source by local civic coders

The Orange County Covid-19 tracker is an open source project made by local residents.  It's an interesting example of coding for causes together to help the local community.  The code uses Cheerio, Axios, and Node to get the data from the city website.  It then uses Chartjs and Mapbox and D3js to visualize the data.  You can view, download, and contribute to this code on GitHub.

Welcome to the very first meetup for OC Civic Coders! Grab your laptops and come out to build something great. Feel free to work individually or team up. Connect with others to learn and share knowledge.

Agenda:
1. New project ideas.
2. Share your experience levels and what you'd like to gain from the group.
3. For those working on a project, share your progress.
4. For those completing a project, share what you've created!
5. Open networking and collaboration time.

Tips for getting started:
- Work on something you're passionate about.
- Work on something practical. For beginners start of with a small project, and simple framework. For others, work on something with a reasonable enough scope to complete it. Look for existing data resources before starting a bunch of code work.
- Be prepared to learn. Whether you're just starting out, or using this as an opportunity to learn a new framework, anything can be achieved with google, patience, and coffee.

RSVP Here: https://www.meetup.com/OC-Civic-Coders/events/267756002/

Starting 2020 of right with another civic hacking project.  This time, we've thrown together an app that visualizes traffic collisions in Los Angeles.  Each week there are about a thousand traffic collisions in LA.  This data visualization tool can hopefully help for deeper insights, which can lead to new solutions.  Big thanks to lacity.org for providing the data!

View the demo website here

https://developer.initialapps.com/la-collisions/

View the code on GitHub

https://github.com/initialapps/la-collisions

Project Goals

The goals for this project are simple:

• Exercise some JS data processing techniques
• Provide something civically engaging
• Create something open source, and see where others take it

Feel free to pull the project from GitHub!

Contributing To This Project

Civic hacking is an awesome way to learn coding, while providing value to your local community.  This pretty close to a full vanilla javascript project, so contributing is easy.  

Built With

• Mapbox - For the maps
• Bootstrap - Front end framework
• jQuery - Who doesn't use jquery?
• chartjs - Nice charts
• flatpickr - Great date range picker

Getting Started

The app is a simple, single page built with Mapbox. Simply grab a Mapbox API key and clone this repo to use.

Connecting With Contributors

Please comment below to connect with others.  Share what you'd like to see from this project, or share your creations.  Let us know what to do next!

Happy Coding!

IMC Intertech is pushing the limits of micro precision parts, with parts less than .012 cu inches, and tolerancing on the level of microns.  

We're thrilled to be working with IMC Intertech on the launch of their new website.  When it comes to micro precision and extremely small parts, IMC Intertech provides unparalleled capabilities, offering incredibly small micro-parts, micro-tubes, micro-needles, and micro-sub-assemblies.  

IMC Intertech's Unique Capabilities

IMC Intertech provides solutions for a very niche specialty of extremely small part fabrication.  Our goal was to help showcase that through use of both wide background images and focused part imagery to gain perspective on just how incredible their capabilities are.

IMC's capabilities opens new possibilities for designers and innovators, ranging from medical devices, electronics, and many others.

Site Features

IMC Intertech is built on WordPress.  The site seamlessly integrates with procurement software - KaizenDesk, to streamline your supply chain paperwork, while growing your leads.

• Search engine optimized
• Blog ready
• Mobile optimized
• Fast load times
• Integration with KaizenDesk Online Quoting and Invoicing Platform

Looking to create a new site, or upgrade your current site? Please, don't hesitate to reach out to us!

Mapbox GL JS is a powerful mapping API, that can create really nice data visualizations and styling.  Their maps look really clean and do a nice job at communicating engaging information interactively.  

That said, getting started with Mapbox, and it's data driven styling may not be completely straightforward, and required me to do a little testing to get started.  For this post, I'll be sharing notes on how this great tool works, using the example Mapbox has provided.

Style circles with a data-driven property

Mapbox provides a nice example for how data driven styling works, which maps out ethnicity data in San Francisco.  Check out the code by clicking here, or also pasted below:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Style circles with a data-driven property</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = '<your access token here>';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v10',
    zoom: 12,
    center: [-122.447303, 37.753574]
});

map.on('load', function () {

    /* Sample feature from the `examples.8fgz4egr` tileset:
       {
           "type": "Feature",
           "properties": {
               "ethnicity": "White"
           },
           "geometry": {
               "type": "Point",
               "coordinates": [ -122.447303, 37.753574 ]
           }
       }
     */
    map.addLayer({
        'id': 'population',
        'type': 'circle',
        'source': {
            type: 'vector',
            url: 'mapbox://examples.8fgz4egr'
        },
        'source-layer': 'sf2010',
        'paint': {
            // make circles larger as the user zooms from z12 to z22
            'circle-radius': {
                'base': 1.75,
                'stops': [[12, 2], [22, 180]]
            },
            // color circles by ethnicity, using a match expression
            // https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-match
            'circle-color': [
                'match',
                ['get', 'ethnicity'],
                'White', '#fbb03b',
                'Black', '#223b53',
                'Hispanic', '#e55e5e',
                'Asian', '#3bb2d0',
                /* other */ '#ccc'
            ]
        }
    });
});
</script>

</body>
</html>

If you haven't already received an access token from Mapbox, you can signup for one here.

Mapbox examples are easy to get started, as you can get up and running simply by copying their code into a text file and saving with an html extension (e.g. mapbox-demo.html).  You will just need to add your access token, by finding this line in the code, and adding it:

mapboxgl.accessToken = '<your access token here>';

How the Styling Works

Circle Radius

Stops

By default, this allows you to set radius based on zoom level.  The format is: [[zoom, size], [zoom, size]].  

To demonstrate this, let's change our stops to be from zoom level 12 to 14, so we can see a more dramatic shift:

'circle-radius': {
	'base': 1.75,
	'stops': [[12, 2], [14, 180]]
}

Now, if you zoom in just a little, here's the result:

Base

The base is the rate at which the transition takes between stops.  It defaults to 1, which is a linear rate.  You can go above or below that for an exponential rate in either direction.

To demonstrate this, lets initiate our map to load at a zoom level exactly in between our stops, at 13:

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v10',
    zoom: 13,
    center: [-122.447303, 37.753574]
});

From here, we can try base levels of both 1 and 100, and compare how they look on loading:

Pretty dramatic difference!  Setting the base to 1 gives us a linear relationship, so the dot size is half way between the set points on your stops.  Moving the base to 100 gives us a more exponential curve, hence the dots are still small when loaded at midpoint, but will sharply increase as you near the stop setting.

Circle Color

The circle color property is more straight forward and should just match the color to a given string property in the geojson object.

The format is: ['match',['get', object key], object value, color,...]

The given json object has the following values for ethnicity: White, Black, Hispanic, Asian.  Let's try changing the color for 'White' to be white:

'circle-color': [
    'match',
    ['get', 'ethnicity'],
    'White', '#ffffff', //hex color for white
    'Black', '#223b53',
    'Hispanic', '#e55e5e',
    'Asian', '#3bb2d0',
    /* other */ '#ccc'
]

Now take a look at our map.  It's a little more difficult to see, but the yellow dots have now changed to white.

Final Thoughts

The above post just scratches the surface of what Mapbox can do with data driven styling.  You can additionally set sizes based on json properties, add map markers and more.  Hope this helps you gain a footing with this API.  If you find this info helpful and would like more content about Mapbox or data visualizations, please feel free to comment below.

If you've made the switch from SQL to NoSQL, you've probably started to dabble into Mongoose population as a means to make up for the lack of table joins.  This, unfortunately, is one area where NoSQL databases fall short of their SQL counterpart.  Mongoose population can be tricky to setup.  This article take a deeper dive into Mongoose populate, to help avoid some pitfalls that you may encounter setting this up.

What Mongoose Populate Does

Mongoose stores data sets in JavaScript objects, hence you may have a JS object for Users.  A user in turn, may have friends, which are an array of other Users.  They will also likely have arrays of other objects, such as Posts, Comments, and even Comments of Comments.

In SQL you could simply perform table joins.  For NoSQL databases like Mongo, your best option is to create separate JS object schemas for each, and reference the connection by object ID.  For example, the User object will contain arrays for other Users, Posts, Comments, etc.  Each array would only contain the object IDs of the objects they are pointing to (i.e. User IDs, Post IDs, Comment IDs, etc).  When querying data, you can then call the populate function to load the data of the associated object for the arrays that you select.

Yes, this has drawbacks.  For example, if you delete an object such as a User, you will also need to find everywhere that references that user, and delete the user ID from there as well (such as a user's friends).  Not doing so can cause issues when trying to populate the ID's that no longer exist.  Even with these drawbacks, you'll find that working with the populate function is still probably your best option, over other JavaScript hacks.

Populating Across Multiple Levels

Mongoose provides great documentation for how to get started with populating arrays.  Below is a simple example they have provided for populating across multiple levels.  In this case we have Users, with an array of friends that are other Users.  We would like to populate the object to show the user's friends, and friends of friends.

First, we need the User schema:

const mongoose = require('mongoose');
const Schema = mongoose.Schema;
const ObjectId = mongoose.Schema.Types.ObjectId;


const userSchema = new Schema({
      name: String,
      friends: [{ type: ObjectId, ref: 'User' }]
});


const User = mongoose.model('User', userSchema);

Notice, we are only tracking an array of Object IDs for the user's friends.  Those Object IDs are just other User IDs.

Next, we'll query by user name, and populate friends, and friends of friends:

User.findOne({
    name: 'Val'
}).
populate({
    path: 'friends',
    // Get friends of friends - populate the 'friends' array for every friend
    populate: { path: 'friends' }
}).
exec(function (err, user) {
    if (err) return handleError(err);
    console.log('Here is the populated user: ', user);
});

The return value should convert all of the Object IDs in the friends array, to the actual data in the associated User schema.  In the above example, we've done this for 2 levels, so it will also populate data for friends of friends.

Populating With Multiple Schemas Across Multiple Levels

In many applications, you'll want to do a lot more populating.  Here's how to do that. Let's add posts and post comments to our object.

First off, let's define our Schemas. These will need to be readily available:

const mongoose = require('mongoose');
const Schema = mongoose.Schema;
const ObjectId = mongoose.Schema.Types.ObjectId;


const userSchema = new Schema({
    name: String,
    friends: [{ type: ObjectId, ref: 'User' }],
    posts: [{ type: ObjectId, ref: 'Post' }]
});
const postSchema = new Schema({
    name: String,
    content: String,
    comments: [{ type: ObjectId, ref: 'Comment' }]
});
const commentSchema = new Schema({
    name: String,
    content: String
});


const User = mongoose.model('User', userSchema);
const Post = mongoose.model('Post', postSchema);
const Comment = mongoose.model('Comment', commentSchema);

Next, we query and populate the document.  Let's say we're no longer interested in friends of friends, but we want to populate friends, posts, and post comments.  Here's how we populate these:

User.findOne({
    name: 'Val'
}).
populate({
    path: 'friends',
    model: 'User'
}).
populate({
    path: 'posts',
    model: 'Post',
    populate: {
        path: 'comments',
        model: 'Comment'
    }
}).
exec(function (err, user) {
    if (err) return handleError(err);
    console.log('Here is the populated user: ', user);
});

Notice, how we now have defined the model in each object.  Mongoose will often need this with multiple schemas.  

To populate multiple paths, we simply repeat the populate function.  To dig deeper, we just populate a level deeper within the object.  

Final note, if you get stuck, be sure to log out your errors on execution.  Mongoose provides good error handling for those who listen!

If you've followed us up until now, you've probably found nano a bit frustrating to work with.  That's where Visual Studios Code comes in to make your life a bit easier.  

VS Code is a powerful coding text editor that helps you write software, work the command line, and more.  This post will give a very brief intro to some of the features in VS Code.

Prerequisites

• We'll be using command line tools - See Part 1 for an intro!
• We'll demo this using the simple website we created in Part 2.
• You'll want some basic knowledge of html, css, and javascript.  Try freeCodeCamp or Udemy to learn more.

Installing VS Code

Head over to the Visual Studio Code website and follow the installation instructions for your system.

Setting Up A Workspace

VS code is super powerful, but here are the basic essentials that every developer uses. We'll demo this on the webpage that we made in Part 2 of this series.

Start by opening VSCode clicking Add workspace folder...

Find the webpage directory that you made from Part 2. Highlight it and click the Add button.

You can now see your files in the left sidebar.

You can save this workspace from the file dropdown in the top left corner.  Click Save workspace as... and create a file name.  Then click the Save button.

Editing A File

This is pretty self explanatory, but you can edit any file by clicking on it from the left sidebar.

To save your edits, hit ⌘ (or ctrl) + s or from the file dropdown menu in the top left, click save.

Using The Command Line

VS Code has a built in command line!  You can access it by clicking ⌘ (or ctrl) + ` or from the view dropdown menu at the top of the screen, click Terminal.

Now when ready to commit your changes to git and push to GitHub, simply enter into the terminal:

git add --all
git commit -m "my vscode updates"
git push origin master

Final Thoughts

Visual Studios Code is a super powerful web development tool.  In this article, we've only scratched the surface for all that it can do, but have laid the foundation for tutorials to come.  

One other final thought - don't discount the power of nano as a powerful minimalist text editor.  There will be times during development when you will need a command line text editor, for troubleshooting or other reasons.  I worked with only nano for 3 years, and became faster using nano than other editors! ?

If you've selected nano as your default terminal editor, it will pop up from time to time.  So be familiar with how to use it, and when lost just google how to use it.

This article is part of an ongoing series.  Subscribe below if this content helps you!

A super simple and minimal Ghost starter theme using Bootstrap.

Ghost is world's most popular modern open source publishing platform.  This starter theme is developed in efforts to help organizations create customized blogs using Ghost and Bootstrap.

Get this theme from GitHub

This theme uses:

• Twitter Bootstrap - The most popular HTML, CSS, and JS library in the world.
• Font Awesome - The web's most popular icon set and toolkit.
• Animate.css - A great toolkit for CSS animations.
• Wow.js — The js counterpart to animate.css that reveals animations when scrolling

Using this theme:

This theme is intended as a starter kit to develop a customized site.  It is recommended to start by using  Ghost Local to develop the theme's front end as you like.  Head over to the  Ghost Local site for installation instructions.

Installing the theme for development

From the directory that you've installed ghost local, move into the themes folder:

cd conent/themes

Clone the repo:

git clone git@github.com:initialapps/ghost-bootstrap.git

Go back to the directory that you've installed ghost local, and restart ghost local:

cd - // if needed, or navigat to the main ghost directory however you please
ghost restart

Finally, navigate to the ghost local link provided in the terminal. When logged into ghost, click Settings > Design. Scroll to the bottom and activate the ghost-bootstrap theme.

Setting up your routes

This theme supports a home page, and separate blog page. In order to do this in ghost, you must upload a custom routes.yml file. You can download your current file, when logged into ghost local, by clicking Settings > Design in the left sidebar and scrolling to Routes at the bottom.

You should edit this file to look like this:

routes:
  /:
    controller: channel
    template: home

collections:
  /blog/:
    permalink: /{slug}/
    template: index

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

Once complete, upload back to your ghost local blog by clicking the upload button just above where you downloaded.

Developing

• You can add to the theme css by editing the css theme file at assets>css>screen.css
• You can add to the theme js by editing the js theme file at assets>js>main.js
• For further theme development visit the ghost theme building documentation (click here).

Deployment

Vendor css and js files are built using gulp and output as assets/css/build.css and assets/js/build.js. Feel free to add your custom scripts to the gulpfile (gulpfile.js) and use gulp.

The easiest way to deploy the theme is to just download the zip file from Settings > Design area when running ghost locally. Then uploading the theme to your live site. Be sure to add your routes.yml file as well.

See a demo of this theme