MERN Todo Tutorial Part One (API)

Introduction:

I’ve been wanting to put together a MERN stack tutorial for some time now. Mainly because it helps me continue to learn and could helps those new to the stack understand how it all works. So here it goes. Hope this helps any newbies! If you get stuck and need to see the main repository here’s the link https://github.com/WebDevJunkie/todo-app

MERN is a stack of technologies to build progressive web apps using only Javascript. It stands for:

M — MongoDB — A popular no sql database

E — Express — A simple web framework for building web application in NodeJS

R — React — A front end javascript framework for progressive web apps

N — NodeJS — A javascript run time built to run javascript on the server

For part one we will start with the back end (Mongo, Express and NodeJS). This will be a JSON RESTful API for viewing, adding, updating and deleting todos in our application. For this tutorial it is expected that you have some javascript knowledge and have node and npm installed on your machine.

Tutorial:

To start off this project we are going to make a main directory where everything will lived called ‘todo-app’. In this directory created a subdirectory called ‘todo-api’. This is where all the code for our todo api will live. Inside this directory run ‘npm init -y’ which will initialize our ‘package.json’ where all of our npm package information will live. From here run ‘npm install express’ this will install the express web framework which we will be using to build our JSON API. Create a file called ‘server.js’ in our api directory and put the following code into it:

This code simply creates our express server and assigns port 5000 to listen to requests. The /test route is just a test to verify everything is running properly. If you run ‘node server.js’ within your api directory you should be able to visit localhost:5000/test and get the ‘Test Passed’ message as a response.

From here we will set up the routes. In your api directory create a ‘routes’ subdirectory to hold any routes we will be creating for our API. Within the ‘routes’ subdirectory create a ‘todo.js’ file and put the following code in the file:

As you can see a route has been created for each CRUD action. Now we will need to import these routes to our main ‘server.js’ file:

Now when you run ‘node server.js’ you should be able to visit each one of those endpoints and test to see that your routes are working.

From here we will be setting up mongo. I’ll be using https://www.mongodb.com to create my mongo database. They offer free plans and don’t require a credit card to open an account. Follow along on their site and create a free cluster. All we will need is the connection string that is created in the ‘Connect’ option on your cluster. We will use this to connect to the database.

For this we will need to install mongoose. Mongoose is an object modeling library built for NodeJS. Simply put, it makes interacting with MongoDB much easier for developers. To install this simply enter ‘npm install mongoose’.

Create a ‘db.js’ file in the root of your API directory and put the following code into it:

This is a simple function which makes a connection to our mongo database. You’ll notice I have created a ‘config.js’ file where I’ve stored my MongoDB connection string. Your connection string will have a username and password so I suggest doing something similar and not adding it to any public repository for your security.

Once this is created you can import into your main ‘server.js’ file and run it like this:

Now when you run your server you should see the message: ‘MongoDB is connected…’ to indicate that you’ve successfully connected to your database.

Next we will create our mongoose model. Create a directory called ‘models’ within your API directory. Inside your ‘models’ directory add the file ‘Todo.js’ and put the following code into it:

What this does is creates a Todo model in mongoose which will interact with MongoDB and create a Schema for adding, updating and deleting todos within our database. With this created we can now update our todo routes to view, add, update and delete todos from our API:

Inside our ‘routes/todo.js’ file update your routes to match what’s below:

Get All Todos:

Get Single Todo:

Create Todo:

Update Todo:

Delete Todo:

With our routes finished this completes our back end API. You should be able to test all of the end points created in postman and verify that you can add, view, update and delete todos. In part two we will build the front end with ReactJS.