Search for a command to run...
Full Stack Developer | Freelancer | JavaScript | React | Nodejs.
Loves sharing knowledge through technical articles.
Dev.to: https://dev.to/myogeshchavan97
https://linktr.ee/myogeshchavan97
Glad you found it useful Nic. Thank you 👏
Thank you Aakansha Priya.👏
Glad you found it useful Olubisi Idris Ayinde. Thanks for reading!
In this tutorial, you will build a Task Management App using Next.js 16 and Prisma 7 from scratch. By creating this app, you will learn: How to set up Prisma 7 with the new Rust-free architecture How to configure a database with Prisma's driver ada...
If you're a React/Next.js developer who diligently updated your packages last week after the critical React2Shell vulnerability (CVE-2025-55182), I have some frustrating news: you need to update again. Security researchers, while probing the patches ...
Is your React app dragging its feet, but you can’t pinpoint the cause? You might think you’re following the best practices, but some common development patterns are actually degrading your app’s performance behind the scenes. In this article, we’ll u...
How to Use Separate SSH Keys for Company and Personal GitHub Accounts Managing multiple GitHub accounts is a common challenge for developers who juggle both personal and professional projects. It becomes even more complex when you want to use differe...
Have you ever built a React app only to realize that users from different countries can't use it effectively because it only supports English? In this tutorial, you'll learn how to build truly global React application using internationalization (i18n...
On this page
For years, Heroku has been an excellent platform to host your Full Stack applications.
But that may change, as Heroku is bringing its generous free tier to an end.
You may have received email from Heroku informing you that, starting November 28, 2022, you will not be able to host any app for free on the platform, and that you will now need to purchase paid plan.
If you want to host static websites or webapps for free, you might use Netlify as I explained in this article but for backend apps, there are not many free platforms that provide the same feel and ease of deployment as Heroku.
So in this article, we'll learn how to deploy your Node.js application with Express server on Render. It's a free alternative to Heroku with a similar easy deployment process.
So let's get started.
As you might know from your experience using Heroku, every application deployed runs on a specific port which Heroku assigns randomly. You can access it using the process.env.PORT variable.
The same is true with the Render platform.
So you need to make sure that, instead of providing a hardcoded port value for starting your Express server, you use the process.env.PORT variable like this:
const express = require("express");
const app = express();
const PORT = process.env.PORT || 3030;
// your code
app.listen(PORT, () => {
console.log(`server started on port ${PORT}`);
});
Now, once you've made the port-related change, it's time to deploy your application.
I already have this GitHub repository that I will be deploying to Render. This GitHub repository code just displays the list of top repositories and the numbers of stars for each repository in JSON format.
So let's get started.
Render provides various ways to sign up as shown below:
Once signed up and logged in to your account, you will see a dashboard like this:
To deploy a Node.js application, click on the New Web Service button under the Web Services option.
You can also click on the New + button displayed in the header just before your profile picture and select Web Service option.
Once clicked, you will see the following screen:
Click on the Connect account button displayed on the right side under the GitHub menu. Once clicked, you will see the following screen:
Click on the Configure link and you can give permission to select all your GitHub repositories or only selected repositories.
I like to give access to only selected repositories which I currently need to deploy. So I selected the Only select repositories option.
Next, click on the Select repositories button displayed below the option and select the GitHub repository which you want to deploy.
Once selected, you will see the following screen displaying the selected repository.
Click on the green Install button to give access to the selected repository to the Render website.
Once clicked, you will be redirected to your dashboard where you will see your selected repository as shown below:
Now, click on the Connect button and you will see the following screen:
Here, for the Name field, enter the a short and simple name to identify your website.
Note: keep the Name value simple because it will become your application URL once the application is deployed. So if I enter github-repos as the value for the Name, my application URL will become https://github-repos.onrender.com.
So make sure to enter a short and meaningful value for Name.
Enter the details as shown below:
For Build Command enter yarn as the value which is equivalent to the yarn install command. Yarn is a package manager similar to npm but faster than npm.
And for the Start Command enter node index.js as the value, if your entry file is index.js.
After entering all the details, scroll down and you will see the Plans section where your free plan will be automatically selected. If not selected, you need to select it because we're deploying the application for free.
If you scroll down a bit more, you will see an Advanced button.
If your application is using any environment variables, you can enter them in the Advanced settings as shown below. You can also add your .env file so you don't need to enter them manually one by one.
Note that, the Auto-Deploy field has default value of Yes – so once you push your code changes to GitHub repository, they will be automatically deployed to Render.
If you don't want to auto-deploy your changes on every code change pushed to your GitHub repository, you can select the No value from the Auto-Deploy dropdown.
Now, you can click on the the Create Web Service button to start the deployment process.
Wait for a while until the deployment is going on. Sometimes, you might need to refresh the page if you keep seeing the "in progress" going on for long time.
Once the deployment is completed, you will see your application is deployed Live as shown below:
You can click on the deployed application URL which is displayed at the top as shown in the above screenshot. In my case, the application URL is https://github-repos.onrender.com/.
When you're deploying the application for the first time, you might see a Page is not working error when you try to access your deployed site.
Wait for a little while and keep refreshing the page using Ctrl + R or Cmd + R(Mac). Sometimes the Render platform takes some time to start the application as we're using a free service with limited hardware.
Once deployed, you will see your deployed application as shown below.
Tip: To see the JSON as it's formatted above, you can install the JSON Formatter Chrome Extension.
As you might know, when using Heroku with a free account, your application goes to sleep mode after every 30 minutes if there are no requests coming in for the application. This means it takes some time to load the application when the next request comes.
Similarly, in case of Render, your application will go in sleep mode after 15 minutes if there are no requests for the application.
You can find the complete GitHub source code for the deployed application in this repository.
You can see the live demo of the deployed application here.
If you want to learn Redux in detail from scratch and build 3 apps along with the complete food ordering app, check out my Mastering Redux course.
In this course, you will build 3 apps along with a food ordering app and you'll learn:
and then finally we'll build a complete food ordering app from scratch with stripe integration for accepting payments and deploy it to the production.
Want to stay up to date with regular content regarding JavaScript, React, Node.js? Follow me on LinkedIn.
