How to create a MERN stack app
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.
React(.js) — It also known as Ract.js and REACTJS. This is a set of JavaScript libraries. This can be used to create more interactive user interfaces.
Node(.js) — Node.js is an open source and cross-platform runtime environment where can run JavaScript as the server.
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 client, that means the front-end is managed by react.js. It is JavaScript library used in web development. But if you are not familiar with JS libraries I will refer a list of JavaScript libraries in here, they will be helpful for you. But today there are various JS versions such as Vue.js, Next.js, Node.js, Express.js, React.js and etc.
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?
node modules includes set of various functionalities as JavaScript libraries which are useful to apply in our web application.
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