Develop application with MERN Stack

Hi everyone,

In this article, I will start to develop shopping list application with using MERN stack. I have used the technologies which is in MERN stack, indivudally before. But I have never developed application with using all.

In this project, we will develop backend and database side. Then, we will continue with frontend side using React.js and Redux. Also, we will add authantication process in our project. I think, this article series will comprise of 4 or 5 parts. I will try to write about MERN stack step by step when I have time. In this part, We will start to develop backend and database side of our application.

What is the MERN stack? MERN stack is consist of 4 technologies which are (M)ongoDB, (E)xpress.js, (R)eact.js,(N)ode.js. I assume you know this techonologies. At least, you could hear these from somewhere. We will develop backend with Node.js and Express.js, and we will use MongoDB for database stuff. Let’s start to develop.

First of all, we need a editor to write code. I prefer to VS Code. It is very light and very popular. If you don’t have editor, you can download here. Also, we need node.js, it is here . We are creating directory to work and open to VS Code. We write npm init in the terminal view. Then package.json will created . You can see on below.

You should be careful to define entry point field. Because we are developing fullstack application and we will add frontend side in this directory. We try to avoid error situation.

We will add some dependencies for our application.

npm i express body-parser mongoose concurrently

express for manage our backend and routing process, body-parser : Parsing incoming request bodies in a middleware before your handlers, mongoose : organising our database process to get data or pass data, concurrently : running npm scripts for client and server at the same time

Again, we will add “nodemon” dependency for automatically update for your changes. We don’t need to stop and start server again each change. After run below command we change our script configure in our package.json

npm i -D nodemon

Now, We will need to keep some secret or private key in the future. Therefore, we are adding one more package in our application.

npm i config

After we added this package, We have to create config directory in project’s root and we will create default.json in this directory. In additional, we will add this code in default.json.

As far as here, we tried to set some configuration stuff up . Now, we need MongoDB connection. You can install MongoDB in your computer and set it’s up configuration but this process can be annoying. That’s why, I prefer to use MongoAtlas. It is free. You can register on here and you create cluster. Also you can allow some ip address to access your database. I am allowing full permisson now. You can see below image for this. In the future, we can change that. After create your cluster. You should add your database endpoint as above for “mongoURI” key

We are ready to create server.js and our api route now. We are creating server.js file in project’s root and writing below code.

If you tried to run the application you can get some error. Because we haven’t create our route file yet. Let’s create route file. We will create “routes” directory in root then create “api” directory inside “routes” and finally, we will create “items.js” inside api directory. We will fill in the “items.js” as below.

We are running this commandnpm run start to start our project. We are opening Postman application and going to http://localhost:5000/api/items Now, we can see response.

As far as here, we added some dependencies which we will need these in the future. Also we registered MongoCloud and created cluster and developed items.js route. Next article, we will develop item and user routes. In additional, we will connect between mongoDB and server side.

Ok guys, see you in the next article. If you’ll have a question you can ask me without hesitation.