Day 97 Lets Build A MEAN Stack App Part 1

Today is the final lesson in the Node.js course. I will be applying everything I have learned from the course to build an app.

A common app to understand many of the moving parts of a coding language is to build a to do list. The requirements for this is app is a user can add, edit, and delete ‘todos’. Each todo can be marked as complete. Each todo can have one optional file attachment. One person cannot access the todos of another.

Initial Set Up

First thing I did was create an empty folder in the command terminal with NPM init. Then I labeled the folder as node-todo. Next I know I’ll need express so download this real quick with npm install express —save. Another staple is EJS for templating, so I also install that with npm install ejs —save. Along with ejs I installed body parser to submit JSON data. That is also installed with npm install body-parser —save in the command line terminal. Lastly I installed Mongoose with npm install mongoose —save to interact with the MongoDB database. That is enough to get us started with the API creation.

After typing in the commands in the command terminal our folder isn’t empty anymore. We’ll now have package.json, next I created an app.js file. In this app.js we require express, start it, and set up the port.

I also know I’ll be making code for the browser my front end. So, I set up the public assets folder, that’ll be just delivered straight to the browser.

I will also need to implement a view engine. I still will need a little bit of templating with the server side. Which we’ll just listen to that port.

This will set up our app to wait and listen but it’s not actually doing anything yet.

Setting Up Mongoose

First thing in setting up Mongo I went to the mLab website. Just created a new database named node to do. It’ll be completely empty and we’ll need to set up our schema. That’ll be set up with Mongoose. From there, we’ll just grab the url to add into a our app.

Next we have to make sure that we can connect and configure the connection. We’d like to make the connection easy to change from development configuration and production configuration, so that we can plant different databases. For this I make a config folder and inside I’ll make a config.json file.

An aside is that I’m storing the username and password to my database in plain text in a file. Now in real environments you’d want to encrypt this and then decrypt it in code. Even though Facebook stored passwords in plain text.

Next we’ll make an index.js file and get that config JSON, and again, remembering I’m requiring the dot slash means it’s local. Config is the folder that I’m in, but in this case, I’m inside config, so dot, slash config is actually going to go get the config.json file. An aside is that I don’t have to put a JavaScript or JSON.

What I’m going to do is export and object. Modules.exports will be what require returns. Then I’m returning an object, and the object will have a method on it. I’ll get getDBConnectionString, and it’ll just be a method of function. And it will return, well if you remember what that URL looked like. I now have configValues.usernames and I needed a colon and configValues.password and then there was this rest of the URL, and that’s it.

So at this point we have an object which when you require config from outside the config folder. We’ll get this object with this method on it, that returns the connection string to the database, well use that to connect to Mongo. The username and password is already configured.

We are using what we’ve learned about module.exports. Now I’ve set myself up to connect to the database via the string. Next we have to define what my data looks like. So I’ll make another folder called models. Inside this models folder I’ll create a file called todoModel.js. This will actually require Mongoose, as well, but because we’re going to set up our schema. We did this earlier.

At this point I created new schemas.

var Schema = moongoose.Schema;

var todoSchema = new Schema({


Next we need to figure out whose todo it is. So I’ll attach a username to it. This is an individual todo. The to-do itself, the string that we type, like, remember the milk or something like that, is done. This will be true when it’s checked off. Then, I can create a new model using that schema. This is what I’m going to export.

So now I have a reusable model. I can create to-dos. Also I’ll be able to delete them and update them and find them using the to-dos object being exported because mongoose.model will give it to me.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Up ↑

%d bloggers like this: