Hello world, I’m Kalana Gayanga Rathnayake. In this blog, I will explain about MERN and how to create a basic backend server of a web application using it. I hope to write a series of blogs about this subject.
What is the MERN Stack?
Basically MERN stands for four main open-source technologies. We can make dynamic web sites and web applications using these components which are providing end-to-end framework. Let me explain about these components one by one.
MongoDB — MongoDB is an open source, cross-platform and NoSQL database program. Basically it is a document oriented database.
For more details : MongoDB — Wikipedia
Express(.js) — Express.js is a web framework for Node.js. Its role is to act as the web framework running in the Node.js server. It has the ability to manage HTTP requests and responses.
Why MERN stack?
MERN stack is highly discussing technology stack in the prevailing tech society. It is a full-stack and it provides portability, customized Powerful technologies, enables faster development and there is a strong community.
How MERN Stack Works?
In any website or web application, there are two main parts, which are the back-end and the front-end. You can imagine those two blocks by using the below diagram.
In backend, Express.js is an application framework that works for Node.js while Express.js is running as an internet facing web server. Express.js is very powerful and it can manage HTTP request as an GET and POST requests.
What are these node modules?
Lets make a backend server using node.js.
First of all, you have to make sure that you install node.js into your computer. You can check it by using this command in your command prompt.
Next let’s create the initial react project. To do that you have to open the terminal in Visual Studio Code. Then type the command as follow image.
npx create-react-app yourProjectName
And then it will create the default react project template with all the dependencies installed. Then you will see the directory as follow image.
After that you have to make a folder named “backend” inside the project file directory. Then you have to create package.json files inside the backend folder by using the command ‘ npm init -yes’.
After that you have to install few dependencies.
If we talk about these packages accept express and mongoose so let me explain about that. ‘cors’ that stands for ‘Cross-Origin Resource Sharing’ and it provides an express middleware that can enable cors with different options, so by this package we can easily access some data from a outside of our server.
Then we have to install one package as globally. you can see how to install it in below image.
So this package makes our development easier. It is a tool that helps to make node.js base applications by automatically restarting your node application when it detect any changed files in the directory.
Now we can create the server files inside the backend folder, to do that create a file named as “server.js” and type these codes as follows.
then make an another file named “.env”. In this you have to enter the MongoDB environment variables. to get that you have to go to mongoDB. Atlas and get the connection string of the database cluster that you created.
Then press “CONNECT” and press “Connect your Application” section. Then you will see the connection string that can copy from the page.
Then past it into the “.env” file as following image and make sure you added the database password inside the connection string.
Now all done, you created the server now. You can run the server typing “node server” in the terminal and you will see this message.
So this is how we make the backend server. In my future blogs I will show you how to implement, create, read, update and delete operations(CRUD operations) using node.js and MongoDB