Mern Stack Tutorial – Setup

The MERN stack is by far one of the most commonly used tech stack in web application development. It is absolutely my favorite tech stack because of how easy it is to understand. This MERN stack tutorial series is geared towards beginners so we will walk through each technology one-by-one and by the end we will have built a full stack application together! Let’s start by breaking down what all of those technologies are.

MERN Stack Components

MERN stands for :

• MongoDB is a scalable nosql database
• Express is a web application framework used for writing APIs
• React is a popular frontend library
• NodeJS is a cross-platform runtime environment for JavaScript

If you don’t know what any of that means don’t worry I will do my best to explain everything clearly and answer any questions. Now I’m not going to go on some long rant about what everything is before we start writing code because that would take forever. And it’d be boring. I personally take an iterative approach to software as I think it’s the easiest way to learn. So now I’m forcing that upon you 😈 . Let’s start by setting up our project for the rest of the MERN stack tutorial series and learn by example.

IDE

Before we can start writing code we need software to write code in. Or you could be a crazy person and write everything in notepad. I think if you asked 100 web developers who use the MERN stack what IDE they use 95 would say VScode. Then the 95 developers would beat up the other 5 because they’re wrong. I’ve been using many different IDE’s for nearly a decade and when it comes to modern web development nothing comes close to VScode. Feel free to explore other options like sublime text or brackets but just know everyone will talk about you when you leave the room. You’ll be “that guy”. If you do decide to use code just head to their download page and install for your OS.

After you have downloaded and installed to your PC, open your IDE and continue on to the next section.

MERN Stack Project Structure

In this series we are going to be using the MVC pattern to structure our project. If you don’t feel like reading the linked blog post it’s basically a simple way to organize our project for scalability. We also want to separate our frontend from our backend and make it easy to upload our project to github. When you open vscode for the first time and start a new project, create a folder named root. Inside of this folder make one folder named backend. It looks like this:

instead of creating the frontend folder manually, I just typically use create-react-app to create the folder. This makes it easier to stay organized especially when we start installing libraries. Don’t worry if that’s confusing just follow along. You will also need to have node js installed on your computer to proceed. Simply head to the download page and follow your typical OS install flow. After the install, with VScode open in the menu click terminal -> new terminal. This will open vscodes integrated terminal at the bottom of the window if you didn’t have one already. If you are not in your root directory cd into it and run the following command.

npx create-react-app frontend

This will add a folder named frontend into your root directory and automatically set up a react application for you! It will take a little bit though, so let’s move on to setting up the backend for now.

MERN Stack Express Setup

In your backend directory make a file named “index.js” and a file named “.env”. After that create the following directories.

• Controllers
• Database
• Middleware
• Models
• Routes

Back in your terminal cd back into your backend folder and run the following command:

npm init -y

This will initialize the NodeJS runtime and allow us to use npm to install libraries. If you look in your backend directory you will see a package.json file now exists. Your backend should look like this:

Notice you are missing the node_modules and images folders. Don’t try and create these manually. We create one of those directories automatically by installing npm packages. Let’s do that now. In your terminal still in your backend directory, write this command.

npm i express cors mongoose dotenv nodemon

This will install most of the necessary libraries we need to start developing our backend. Again, this will take a while so let’s go back and finish up our frontend.

Finishing Frontend

While our backend is finishing up installing, go back to your frontend folder and create the following folders inside of your src folder:

• Components
• Pages
• Sass (or css if you don’t want to use sass (but do use sass because it’s better))

Then inside of your terminal cd back to the frontend directory and install these packages:

npm i axios react-router-dom react-icons sass

After doing all of this your frontend directory should look like this:

And with that done we have finished setting up our project and installing the basic technology we are going to use into our tech stack. In the next section of the MERN stack tutorial series we are going to set up a simple express server and talk a little bit about what that is. If you have made it this far give yourself a pat on the back and get ready to move on to the next lesson (as long as you aren’t using sublime text)!