Introduction

The MERN stack consists of MongoDB, Express, React / Redux, and Node.js. The MERN stack is one of the most popular JavaScript stacks for building modern single-page web applications.

In this tutorial, you will build a todo application that uses a RESTful API, which you will also build later in this tutorial.

Prerequisites

To follow along with this tutorial, you will need to install node and npm on your computer. If you do not have node installed, follow the instructions on the nodejs website. You will also need a code editor that you are familiar with, preferably one that has support for JavaScript code highlighting.

Application Code Setup

Let’s start with the setup. Open your terminal and create a new file directory in any convienient location on your local machine. You can name it anything but in this example it is called Todo.

mkdir Todo

Now enter into that file directory

cd Todo

The next step is to initialize the project with a package.json file. This file will contain some information about our app and the dependencies that it needs to run. You can use npm init and follow the instructions when prompted, or you can use npm init -yto use the default values.

Node Server Setup

To run our javascript code on the backend we need to spin up a server that will compile our code. The server can be created in two ways: first is to use the built in http module in node; second is to make use of the expressjs framework.

This tutorial will use expressjs. It is a nodejs HTTP framework that handles a lot of things out of the box and requires very little code to create fully functional RESTful APIs. To use express, install it using npm:

npm install express

Now create a file index.js and type the code below into it and save:

const express = require('express');
require('dotenv').config();

const app = express();

const port = process.env.PORT || 5000;

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.use((req, res, next) => {
  res.send('Welcome to Express');
});

app.listen(port, () => {
  console.log(`Server running on port ${port}`)
});

This snipped from the code above helps handle CORS related issues that you might face when trying to access the api from different domains during development and testing:

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

It’s time to start our server to see if it works. Open your terminal in the same directory as your index.js file and type:

node index.js

If every thing goes well, you should see Server running on port 5000 in your terminal.

Routes

There are three things that the app needs to do: create a task; view all tasks; and delete a completed task. For each task, we need to create routes that will define various endpoints that the todo app will depend on. So let’s create a folder routes and create a file api.js with the following code in it.

mkdir routes

Edit api.js and paste the following code in it:

const express = require ('express');
const router = express.Router();

router.get('/todos', (req, res, next) => {

});

router.post('/todos', (req, res, next) => {

});

router.delete('/todos/:id', (req, res, next) => {

})

module.exports = router;

#mongodb #react #redux #express #node