Deployment Basics in MERN

Deploying a MERN stack application involves hosting both the front end and back end on a live server, making it accessible to users over the internet. MERN stands for MongoDB, ExpressJS, ReactJS, and NodeJS, and each component needs to be properly configured for deployment. The process ensures that your application is secure, optimized, and scalable for real-world use.

In this article, we will discuss how to deploy the MERN projects.

Backend Deployment

Backend development is also known as the server-side development of web applications, which is used for handling database interactions, authentication, server logic, and API communications. It ensures the frontend (user interface) functions smoothly by managing data processing and business logic.

There are many ways and cloud platforms present where we can deploy our backend code.

• GitHub: A popular source code hosting and version control service with free public repositories.
• Heroku: A Platform-as-a-Service (PaaS) that offers a free tier for hosting backend services.
• Render:It is a cloud platform that can be used to effectively deploy backend code.
• You can also deploy backend code to cloud platforms like AWS, GCP, and OCI.

Deployment with Render

Now, we will deploy our backend code on the render. Below are the following steps, which will help you in the deployment.

• Go to the official site render.com to deploy the entire backend site.
• Sign in using any of your pre-existing accounts, Google accounts, or the GitHub account.
• You can also log into your existing account. Click on the option of New + and select the option of Web Service.

• Choose from the given options: Build & Deploy from a GitHub repository and then connect to the desired GitHub repository to make the site using the code in the folders.

• Choose from the given repositories whichever you want to deploy.

• A form will appear on the page that would ask for the required credentials of the website. Give a name for your site to be displayed in the URL or the HTTP link. Select the branch of github which holds the entire code.
• Choose the root directory, or root folder for the backend deployment, be it either backend folder, or server folder.

• Environment variables are those variables which remain hidden when uploading the contents of folder on GitHub, but are of use in the project. It's important to configure all environment variables, if any in the backend folder.

• If the environment variable is port for eg. and the value of port is 5000, then add the name of the variable and it's value.
• Otherwise add from .env file directly in the following way:

• Choose the runtime environment according to the type of package used.
• For eg. If the package installed is npm, ie., Node Package Manager, then write the build command as follows:

 npm run build

• Click on the option of Create Service: The deployment for the backend starts and as the success message is displayed, a backend link is received by render.com that enables further use of the backend links in the frontend files, or projects.

Frontend Deployment

Front-end development is the process of creating the interactive elements of a website or web application that users see and interact with. It's also known as client-side development. There are the various services available which can be used for the deployment of the frontend code.

• Netlify
• GitHub Pages
• Firebase Hosting
• Cloudflare Pages
• AWS Amplify
• Heroku

Deployment with Netlify

Now, we will deploy our Frontend code on the Netlify. Below are the following steps which will help you in the deployemnt.

• To deploy the frontend application, use Netlify or GitHub pages. Add the backend link to every request service website code, where the backend can connect to the frontend service.

• There are 3 ways to deploy the frontend application on Netlify.
• First is directly from GitHub, by choosing a repository.
• The second one is to deploy manually, using the dist folder that will be made through the build command.
• And the third one is to start by using a simple template.

• For manual deployment, we run a build command in the terminal of the frontend folder that creates a dist folder which has all the required files assembled in one single index.html.

• For deployment through an existing repository on GitHub, choose the option of deployment through GitHub and authorize Netlify through your google account. Choose the required repository and there appears a form to fill the required credentials of the website.

• Add the name of the site you want and the branch you wish to deploy.
• Similar to the deployment of the backend, add a build command, the directory you want to publish, or the root directory and environment variables, if any.
  

• Click on deploy site and then you will receive the command Site deploy in progress.
• Finally a link of netlify is achieved and this link can be used for future references. Also add a link that connects to the mongodb database to fetch the data in the frontend code.

Database Connection

A database connection is a way for software to communicate with a database server. It allows the software to send commands and receive results, usually in the form of a result set. Database connectivity is an important part of software development.

Database Connection with MongoDB

Now we will use the MongoDB for the database connection. Below are the following steps which will help you in the database connection.

• Sign In or Log into your existing account on MongoDB, which is a website for database collection.
• Go to MongoDB atlas page and create a new project using the free package.
• If you have been using MongoDB, it will show a list of your previously made projects. But you are supposed to click on the button below of new project.

• Add a name to your project and click on the button below of Create Project.

• Connect the project by creating a database deployment by again selecting the free package.

• Name your deployment, similar to the project name. Use the free cluster for basic projects, and for company basis, you can also opt for monetary options.

• Click on the button of Create Deployment below and a database will be created for the project.

• Connect to the configuration using the button of connect and save the link for future references, in order to connect to the mongodb database.
• Also, do not forget to add the current IP address, or you can also whitelist the IP addresses, meaning all the IP addresses will now be able to connect to the database.
• However, this is usually not termed as a safe option as it may allow hackers to feed on your data.

• Create a database user, and add a password. Save it for future references, and link it to your frontend code by adding this data into your environment variables file.

Securing a MERN App in Production

• Use HTTPS: Enable SSL with Let's Encrypt or Cloudflare.
• CORS Configuration: Restrict API access.
• JWT Authentication: Secure user authentication.
• Rate Limiting: Prevent API abuse using express-rate-limit.

Debugging Deployment Issues

Common Issues & Fixes