Deployment of MERN full-stack app with Render.com

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".

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.

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.

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.

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!