Setting up a basic server — MERN Stack Part 1

In this series, we will be going step by step into how to create a full stack MERN project. This project is going to be fairly basic, but will give you an idea as to how to go about each step of the process. The MERN stack is a popular tech stack used to create full stack applications using JavaScript-based frameworks/libraries/runtimes and the MongoDB database. In this first post, we will be going through how to setup a basic server.

Photo by Caspar Camille Rubin on Unsplash

This series assumes some basic knowledge of node package manager (npm) and that you have Node downloaded on your local machine, if you do not have it downloaded, click here and return to this post when you are done .

Let’s start by creating a new project folder, navigating into that folder and initializing a package.json file by using the follow npm command:

npm init

You will then be prompted to answer several questions about your package including the package name, the version, a description, an entry point (main server file), test command (we will add these later so leave blank), git repository (again you can add this later), keywords, author, license (typically ISC or MIT).

Typically you would want to call your main JavaScript entry point file index.js, server.js or app.js to follow convention.

This will then create a package.json file for you which holds your basic app info, dependencies (which we will look at shortly) and scripts for running your server (again we will look at this soon).

For now, let’s install some dependencies. With npm, we can install specific dependencies for development and others for production. Let’s start by installing our non-dev dependencies with the following command:

npm install express bcryptjs config jsonwebtoken express-validator mongoose

For now, you do not need to know what each of these dependencies is going to be used for (we will cover each one as it is used), but you will now see a node_modules folder in your application which holds all the dependencies and their dependencies and so on. It’s a lot and does not need to be pushed to github as other users will be able to create it simple from having access to your package.json file and running npm install. If you would like to take a sneak peek at what these dependencies and the millions of others out there can do, check out the incredible npm site here.

Now let’s install our dev packages with the following:

npm i -D nodemon concurrently

Note that you can shorten the install keyword to i. The -D let’s our package.json file know these are for development use only. In this case we only have two dev dependencies, you may have more, but typically you will probably use more for non-dev purposes. Nodemon is one of the best npm packages out there and allows us to run a server which updates when we change it so we do not have to keep restarting the server every time we make a change. Our second dev dependency, concurrently, allows us to run our frontend and backend at the same time, which is going to be extremely handy once we get around to creating our React frontend.

Now you should see a package.json for your backend which has a lot of dependency info including the name and version of each package, it will also be broken down into dev vs production dependencies.

It’s now time to fill out the scripts section of our package.json file which will allow us to run the server more easily from the command line:

"scripts": {
"start": "node server.js",
"server": "nodemon server.js"
},

Typically in node, we run a file by typing node and then the name of the file, same with nodemon. So by creating these scripts, we will be able to run our server by using npm run start or npm run server.

At this point, we need to go ahead and create a server.js file, this will be our main entry point file for the backend.

All we are going to do for now is bring in express by using the require syntax (note, node, unlike React, does not allow ES6 import syntax so we have to use require). From express, we are going to define an app and use the listen feature to listen for our server on a port which we can specify. We can also add a callback function which in this case we will use to log out to the console that our server is in fact running. Note that I have also set the const PORT to be either 5000 or process.env.PORT which will help us much later on when it comes to deploying. For now though, your server will run on 5000 or whichever port you specify:

const express = require('express');
const app = express();
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server started on port ${PORT}`));

At this point, you should think about setting up a Github repository and linking your project up to it so that you can keep track of your progress. Before you do that though, be sure to setup a .gitignore file and add node_modules to it so that they do not get pushed.

Always make sure to make regular commits!

Now from your command line you can run the following:

npm run server

This is the script we have that runs nodemon. Our server is now running and you will see the console.log however we don’t have any endpoints to hit. That will be the focus of our next post!