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!
Top comments (0)