Set up a simple Express server and deploy it for free on Render.com

Ever wondered the creation of Express JS server that responds “Hello world” for GET request would take less than 10 minutes including the deployment?

Yeah! you read it right. That’s possible because of the power of Javascript. Hello folks, welcome to another quick and useful write on Hosting a backend REST API server using render.com for free!

The name rightly denotes that you can create server in minutes with Express JS framework. Thanks to render.com for hassle-free deployments from Github — much quicker than the well known “Heroku”.

In 2023, since the advent of ChatGPT, the market requirement is to generate REST APIs in no time. Creation of servers is made so simple by Javascript based NodeJS servers — powered by Express framework.

Express is a Fast, unopinionated, minimalist web application framework for Node.js that provides a robust set of features for web and mobile applications. With a myriad of HTTP utility methods and middleware at your disposal, creating a robust API is quick and easy. Express provides a thin layer of fundamental web application features, without obscuring Node.js features that you know and love.

For years, Heroku has been an excellent platform to host your Full Stack applications. Familiar online learning platform “FreeCodeCamp” made heavy use of Heroku early on — as have countless open source projects. But off-late, Heroku has brought its free tier to an end. 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 hop onto the process.

Step 1: Create a simple Express JS server

Before we get onto this step, you can bat an eye on https://expressjs.com/en/starter/generator.html , the application generator tool, express-generator, to quickly create an application skeleton. However we proceed further with baby steps.

npm init

This will ask you for few configurations about your project you can fill them accordingly, also you can change it later from the package.json file.

Note: Use `npm init -y` for default initialization.

Step 2: Install necessary dependencies for our application.

npm i express

Step 3: Create and set up app.js

Create a file app.js, at the root, for this article. Import express with require keyword and create an app by calling the express() function provided by the express framework. We use CommonJS Module style instead of ES Module style. Set the port for our local application, 3000 is the default but you can choose any according to the availability of ports. Call the listen() function, It requires path and callback as an argument. It starts listening to the connection on the specified path, the default host is localhost, and our default path for the local machine is the localhost:5000, here 5000 is the port which we have set earlier. The callback function gets executed either on the successful start of the server or due to an error.

app.js

const express = require('express');
  
const app = express();
const PORT = 5000;
  
app.get('/', (req, res)=>{
    res.status(200);
    res.send("This is from root");
});
  
app.listen(PORT, (error) =>{
    if(!error)
        console.log("Server is Successfully Running,
                    and App is listening on port "+ PORT)
    else 
        console.log("Error occurred, server can't start", error);
    }
);

1. app.get() — configures routes, it requires two arguments first one is the path and, the second one is a function that will be executed when anyone requests this path with GET method. The express provides the request and response object as a parameter to all such types of functions.
2. The req is a giant object which will be received from the user and res is an object which will be sent to the user after the function finishes execution.
3. Later we are calling status() method it takes an HTTP status code as an argument and when the response is returned, the status will be sent along.
4. Finally, we are returning the response to the user. The send() method takes a string, object, array, or buffer as an argument and is used to send the data object back to the client as an HTTP response, also there are lots of types of response in express like res.json() which is used to send JSON object, res.sendFile() which is used to send a file, etc.

The folder structure now would look something like this:

Step 4: Run the application

node app.js

All set, and now we can run the Express server application by the above command. Alternatively we can use nodemon, which restarts the server automatically during the time of development without having the need of restarting the server again and again.

We can see something like the following:

Zoom Meeting SDK Auth Endpoint Node.js listening on port 4000

If you hit http://localhost:5000 from your browser, you can witness “This is from root” for the GET request.

Step 5: Deploy the app on render.com

Before we do step 5, we should push the repository to Github account.

Head to render.com and create an account.

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.

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.

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.

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.

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 files 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 deployed, you will see your deployed application as shown below.

That’s it, we’ve successfully deployed the app from render.com

Hope it helps anyone looking for step by step solution.

See you next time, till then, stay happy and healthy. Cheers!!!