DEV Community

Cover image for Deployment of MERN full-stack app with
George K.
George K.

Posted on • Updated on

Deployment of MERN full-stack app with

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

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

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

Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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's dashboard click "New +" button and select "Web Service". dashboard

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

to start our server.

deployment of MERN app on

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

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

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

Hope this helps!

Top comments (0)