MERN Cli Tutorial Setup, going fullstack with React, Mongo DB, Node.js

MERN is a collection of JavaScript-based technologies for building modern web applications, MERN is the acronym of the technology stack: MongoDB, Express, React, Node.js.

In future we will be using MERN to build a full-stack web application, in this article we will see how to setup MERN cli to have fully functional development server to start building our REST APIs.

What is MERN

To build a full-stack application we will need:

  • A front-end framework: React
  • A backend: Node with Express framework
  • A database to make data persistent: MongoDB

Why MERN cli

We will be using MERN cli for a number of reason, we will speed up our stack setup with the latest versions and a bunch of useful plugin already installed like ES6 compatibility on the backend, lint, docker support, nodemon, hot reloading for React, Redux… (you can take a look at http://mern.io/)

Those tools will be pretty useful when we will start building our app, and having those feature out of the box will save us a lot of time.

Installing the MERN cli

MERN cli is so easy to get started with, first of all make sure you have npm and node installed on your machine! Now, jump into your terminal and install the global MERN cli package with:

 npm install -g mern-cli

Once finished create a new application with the “mern init” command and install the npm packages:

mern init appName
cd appName
npm install

That’s it now you have your MERN ready, we have another thing to do to make sure we don’t have errors: setting up MongoDB.

MongoDB setup

If we use “npm start” on our terminal right now, we will receive an error saying we haven’t setup MongoDB. You can install it on your machine or use a free cloud database like mLab. I prefer the second option as is very easy to use and setup, but it is your choice. MongoDB installation is not part of this article, but you can follow the official docs: https://docs.mlab.com/.

When you finished your database creation head over the “config.js” in the “server” folder and change the mongoURL like using the one provided by mLab:

const config = {
  mongoURL: process.env.MONGO_URL || 'mongodb://<your-user>:<your-password>@ds127115.mlab.com:27115/database-name',
  port: process.env.PORT || 8000,
};

export default config;

Start our Development Server

Right now we have everything set up so we just have to type in our terminal

npm start

the server will start if you have done everything correctly. You can now go to your local server in your browser, usually at http://localhost:8000 to see a boilerplate project.

Summary, what now?

Right now we have a functional Node.js, React, Express, MongoDB environment we can use. You have now infinite possibilities! You can experiment trying to make your own REST APIs using the boilerplate examples in your MERN cli project folder, or you can wait for another tutorial.

You can post any question related to this article using the contact form below or DM me on instagram: https://www.instagram.com/filippo.jsx/

Compile the “Contact me form” below this page to receive the next part in a few days!

Talk to me

Please fill in all required fields, I will get back to you ASAP. You can contact me by mail or phone too!