Deployment of MERN full-stack app with Render.com
Tags: rendercom, heroku, mern, deployment
Published: 2022-11-25 14:23:39

---
title: Deployment of MERN full-stack app with Render.com 
published: true
description: Deploying full-stack MERN app on render.com
tags: rendercom, heroku, mern, deployment
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ax649qafech3mspi44x.png
# Use a ratio of 100:42 for best results.
---

With recent deprecation of Heroku's free plan we've been looking for other free alternatives and found out Render.com. 

Let's see how we can deploy a full-stack MERN app with Render.com.

For this post we will assume that the structure of our app is as following: 

	root
            server
            	index.js
            	package.json
            client
            	package.json
            package.json

`package.json` files in `server` and `client` folder manage packages for the server and client respectively. In the root folder we need another `package.json` file to manage the deployment, similar to how we handled it with Heroku 🪦:

```
{
    "name": "nameofyourapp",
    "version": "1.0.0",
    "description": "some description",
    "main": "./server/index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "start": "cd ./server && node index.js"
    },
    "engines": {
      "node": "16.x"
    },
    "keywords": [],
    "author": "",
    "license": "ISC"
  }
```

We are assuming that your express server is serving client's production build from the `client/build` folder. 

`"main"` key will have the path to your server's entry point file:

`"main": "./server/index.js",`

And `start` script will execute command to go into the `server` folder (from the root), install the packages and start the main server's file:

`"start": "cd ./server && node index.js"`

From Render.com's dashboard click "New +" button and select "Web Service".

![render.com dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khy81llhbz01pbcid4dj.png)

Connect to the GitHub repository you want to use by linking to your GitHub account and searching for the repo's name. 

Once connected provide a name for this project, region for the server to be in, choose which branch you want to use and specify the root folder which should be our `./server` if server is going to serve the `build` of your client. 

The build command could look this:

	npm i && cd ../client && npm i && npm run build

meaning that from the root folder (`/server`) in our case we will install all the packages for the server, then go to the `client` folder, install packages and create a production build.

For the start command it can be 

	node index.js

to start our server.

![deployment of MERN app on render.com](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mq9asmk7yoo49rs1yekh.png)

Choose free plan and create the project with a button in the bottom of the page. 

Wait for the Render to generate the project, download your files and set the environment.

![deployment of MERN app on render.com](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5s546wxeoquwuc82bkjc.png)

Once done in the top of the page you will see a URL for the deployed app. Click it to check if everything was successful. 

![deployment of MERN app on render.com](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k95fd6im9hjdtkync4ro.png)

If something happened during the build process you will see it in the log, fix the error, push the code to GitHub and Render.com will pick it up automatically and repeat the reply attempt. 

Hope this helps!