How to deploy a MERN application on render.com

Author: Sejfudin Duranović, Paragon Alumni

The main concern of every developer is to write simple, reusable, and easy to maintain code. Next, we must always keep in mind that our application must match a user’s requirements. These principles are in our focus during development.

During the development process the application is available just for the development team. But what is next after our application is coded and tested. The application should live somewhere and be public, only then it has a real purpose.

To achieve this, we should deploy our application. Generally, this process should be done by DevOps, but it is good to know how to do it yourself.

First, we should find a service, platform or provider which will provide some place for our application. There are many providers such as Azure, AWS, Google Cloud, and many others, but most of them are not free. So, we should take into consideration our budget when we make a decision which service we will use.

Luckily for us, there are free providers too. My intention, in this blog, is to choose a free provider and show a deployment process for any MERN application.

So, let’s start. A very popular cloud provider that allows us to deploy our application is www.render.com.

Creating an account

First, you should create an account. Don’t worry it is completely free of charge. I suppose that all of you who are reading this blog can create an account, so I will not go into depth on how to create it. Just create your account, verify your email address and you are ready to go.

Now, you should have access to the dashboard.

Since we are going to deploy a MERN application, which means we have frontend and backend as well. In many cases, our frontend and backend are separate projects, and they are placed in different repositories. Let’s deploy frontend first.

NOTE: When running the frontend and backend locally, they are both hosted on the same computer at the address ‘localhost’, but using different ports. However, when deploying to production, the backend should be hosted on a public domain. To configure the frontend to communicate with the production backend, you need to update the backend URL in your frontend code. Simply replace the ‘localhost’ part with the domain name of your production backend.

Now everything is ready for deployment.

Deploy the frontend

Frontend is a classic static site, so you should deploy it in that way. Click on the ‘New Static Site’ button under ’Static Sites’ section.

Now it is time to link the frontend repository. The easiest way to do that is to paste the link to the repository and click on the ‘Continue’ button. This will work only for public repositories. If the repository that should be deployed is private, Render must be installed. In that case, you must connect your GitHub/GitLab account. It can be done by clicking on the ‘Connect account’ button.

To follow the principle of least privilege, you will choose ‘Only select repositories’ and select a repository from the list.

Now that your GitHub/GitLab is connected, you have access to the repository you selected in the previous step. Simply connect to it.

There are few input fields which should be filled. First is the Name field. This field should be unique, and that will be the name of our static site. This field represents the public domain of frontend. Also, the right branch should be chosen. Best practices are to select the master/main branch and keep them clean and updated with tested code. In the ‘Build Command’ field you should put your command for build. Here it can be used npm and yarn as well. This command can be checked out in the package.json file in your project.

NOTE: Be careful when defining the build command if the frontend and backend are in the same repository. Make sure that the path is correct.

Deployment process can be monitored in the console. Once it is done, you can access the deployed application.

But that was just the frontend, now the backend should be deployed too.

NOTE: While the frontend sends requests to the backend, it’s necessary to define the CORS origin. The public domain of the frontend should be added as a valid CORS origin to ensure that requests are properly authorized.

Deploy the backend

Backend can’t be deployed as a static site, so you should deploy it as a ‘Web Service’. Click on the ‘New’ button and select Web service.

After that, the right repository should be connected.

Set all input fields. Be sure that the Build and Start commands are correct.

NOTE: There are many instance types at the bottom of the page. This platform offers free instance types. Be sure that Free instance type is selected.

If the frontend and/or backend contains sensitive data that is defined in the .env file, it is important to ensure that these data are also properly defined in the production environment. This can be accomplished by specifying the data as key-value pairs in the ‘Environment’ section. This can be done for both, frontend, and backend. Use of Environment variables is strongly recommended.

After every commit, the frontend or backend can be deployed again. Simple click on ‘Manual Deploy’ button and select Deploy last commit, and changes will be deployed.