Painless MERN Stack Project Setup!

A beginner guide on how to create your own MERN stack (MongoDB, Express, React+Redux, Node.js) project structure in less time and painless

Creating the structure of a full stack software project, could be painful if you do this for the first time, specially when you come across hundreds of tools, technologies and auxiliary packages. Thinking of a way of combining these tools to create a Jack of all trades, not only makes developers confused, but also results in frustration when you have to choose between technologies that most of them are trended these days.

Who's this for?

Of course for whom they are starting to learn how to create a project in MERN stack (MongoDB, Express, React, Redux, Node.js). However, if you are such type of developers who have problems in configuring Webpack in development/production environment, it might also help you out. Even if you have some experience of working with JavaScript or creating projects in new JS frameworks/libraries, you will have better understanding of the process.
But if you are creating your own full-stack project for the first time and getting annoyed of thinking about "how to do that?" is going to stop you right before you start, it will perfectly turn you back!

Prerequisites

There are some prerequisites you need to prepare before starting the process. As it's going to be a full-stack project, we are going to manage both back-end and front-end stuff as well as data persistence. 
The whole process was done by me and it is accessible from this GitHub repository. You can check it out to see what would this project look like after it finished. You might also use it as a boilerplate for your projects. If so, please go to the project's GitHub page and follow the instructions.
To make this happen, please go through the following steps:
Install Node.js if you didn't before:
Of course, to use node package manager (npm) you'll need this, but as we are going to cover back-end development, we need to have Node.js to perform JavaScript server-side. You can find how to find and install a compatible version of your OS
Install and configure MongoDB:
MongoDB is a NoSQL document database. We need to install and configure it before we start creating our project structure. You can find useful information on how to download, install and configure MongoDB from here
Install your favorite Code Editor:
If you are not a fan of a particular code editor, use my favorite one. I use Visual Studio Code as it's open-source and has a huge community of contributors. It can easily be changed in a way that makes it behave like an IDE by using a combination of free extensions.

Let's begin

It's time to say magic words. We will not do it by ourself, we are going to ask npm to do it for us. Just please make sure that you've created a separate folder for this project:

1- Create a Folder
Open a command line environment, it could be Windows' Command Prompt or Terminal on MacOS. VSCode has an integrated terminal inside and can be activated by pressing the CTRL+ ` keys.
Navigate to a location where you want to create your project. Enter this command and press enter:
mkdir mern-stack-project

It will create a new folder with the given name. Then navigate into newly created folder:

cd mern-stack-project

2- Initialize Package
As you know, we are creating our project as a new Node.js module, so we need to have a package.json file. At its simplest, it can be described as a manifest for our project, holding important information about what is our project's name, who is creating this, what's it about, or some more information about what are the packages our project going to be built with.
To initialize the project:
npm init -y

3- Install Dependencies
Ask npm to install dependencies we need for the production build of our project. Do this by executing following command:
npm i -S express mongoose body-parser concurrently chalk winston
By executing above command, following packages will be installed as a local dependency on your project:

- express
It is a framework for Node.js platform, written in JavaScript and normally is used to create back-end for web applications or APIs.

- mongoose
It is a ODM (Object Data Modeling) library for MongoDB and Node.js and helps us to simplify working with MongoDB
body-parser
is a body parsing middleware for express.js and parses incoming request bodies. The parsed body will be accessible via req.body in your handlers.

- concurrently
As we are creating a full-stack project, we will have both server and client parts as separate projects. concurrently helps us running both projects separately

- winston
Keeping logs of all important activities in a client/server application, is one of the most important things we should think about at the beginning. Communication between server and client(s) while the project is getting larger along the time - incoming requests from clients, and the way server responses to those requests - is not easy to track. Winston logger is a helpful tool to organize logs on server side

- chalk
When our project gets large in scale, then we need to manage and show a large amount of logs to the user. chalk is a library for keeping your logs beautiful and organized, by colorizing and categorizing them when printing into console.

4- Install Dev Dependencies
We need also some other dependencies which all of them are going to be used in development time. It means that we don't want these modules to be included in our final build. So we will install them as devDependency and all the rest will be managed by Node.js
npm i -D webpack webpack-dev-middleware webpack-hot-middleware nodemon @babel/core @babel/cli @babel/node @babel/register @babel/preset-env @babel/preset-react

So let's review what will be installed by calling above command:

- webpack
Webpack is a popular module bundler for web development. Its main purpose is bundling JavaScript files but it is also possible to bundle other file types and resources by using webpack plugins and modules. 
webpack-dev-middleware & webpack-hot-middleware
These two express.js middlewares are going to help us connecting our React.js client to the server in development area. They help webpack to manage building resources and then rebuilding after any changes made to client-side resources in smart way. So users don't need to refresh their browser to see the changes, all the rebuilding process during development stage will be done in less time and in best way
- @babel/core & other related tools
We are going to use ES6 and newer version of JavaScript to code our project. We need to move on the edge of technology. Babel is a tool which makes new JavaScript codes readable to all major browsers.

The article is being edited with a part about "client-side" configuration. So keep in touch to learn how would be setup for client part of a full-stack JavaScript project.