Build a Node.js App and Deploy on Render For Free

Let’s build a Node.js app and deploy it on Render for free. By the end, it will be live and accessible online.

Prerequisites

Before we start, make sure you have the following ready:

• VS Code (I’ll be using this for the demo)

• Node installed

• Git installed and connected via SSH

• A Render account (sign up for free at Render)

Don’t worry if you’re new to any of these — they’re easy to set up, and I’ll link resources along the way.

Step 1: Open VS Code and Terminal

1. Open VS Code.

2. Press Ctrl + ` to open the integrated terminal.

3. Navigate to your desired drive/directory (I’ll be using the D: drive for this demo).

4. Check if Node.js is installed by running:

node -v

If Node.js is installed, you’ll see the version number. If not, download and install it from Node.js official website.

Step 2: Create a Directory for Your App

1. Create a folder for your project:

mkdir testApp

2. Navigate into the folder:

cd testApp

3. List the contents: It should be empty at this point.

ls

Step 3: Initialize the Node.js Project

1. Initialize your project with:

npm init

Or, to skip the prompts, use:

npm init -y

2. This creates a package.json file in your project folder. You can view it with:

cat package.json

Or open it in VS Code:

code package.json

Step 4: Create the Entry Point (app.js)

1. Create a file named app.js:

touch app.js

2. Check that it was created:

ls

3. Open the file in VS Code:

code app.js

4. Add a simple test line to your app:

console.log("Hello, World");

5. Save the file, then run it in the terminal: If you see Hello, World printed in the terminal, congratulations! Your basic Node.js app is working.

node app.js

Step 5: Install Express

1. let’s install Express, a minimal and popular Node.js framework for building web servers:

npm install express

You can check the official Express docs for more info.

2. After installation, you’ll notice that express appears in your package.json under dependencies.

Step 6: Create Basic Routes

1. Now, let’s set up a simple Express server with a basic route:

import express from 'express'

const app = express()

app.get('/', (req, res) => {
  res.send('Hello World')
})

app.listen(3000, () => {
    console.log(`Server is running...`);

})

2. Save the file and run your app:

node app.js

Step 6a: Fixing the “Cannot use import statement outside a module” Error

If you see an error like:

SyntaxError: Cannot use import statement outside a module

or

Don’t worry! This happens because Node.js defaults to CommonJS modules. To fix it:

1. Open package.json.

2. Add "type": "module" at the top level. For example:

{
  "name": "testApp",
  "version": "1.0.0",
  "type": "module",
  ...
}

3. Save the file and run your app again:

node app.js

You should now see:

Server is running...

Step 7: Test Your Routes in the Browser

Open your favorite browser and go to:

http://localhost:3000/

You should see:

Hello World

Now let’s make it a bit more complex and return JSON, like an API. Add another route to your app.js:

app.get('/api', (req, res) => {
    res.json({success: true, message: 'Hello, World'})
})

Go back to your browser and visit:

http://localhost:3000/api

If you see “Cannot GET /api”, don’t panic! Every time we make changes to app.js, we need to restart the server.

1. Go back to VS Code terminal.

2. Stop the running server (Ctrl + C) and restart:

node app.js

3. Refresh the browser at /api.

You should now see the JSON output:

{
  "success": true,
  "message": "Hello, World"
}

Note: If your output looks slightly different from mine, it could be due to a Chrome extension formatting the JSON.

Step 8: Use Environment Variables with dotenv

To make your app more flexible, we can use environment variables. This allows us to configure things like the port without hardcoding them in app.js.

1. Install dotenv

npm install dotenv

2. Configure dotenv in your project

At the top of app.js, add:

import 'dotenv/config'

3. Create a .env file

In your project root, create a file named .env:

touch .env
code .env

4. Add the port number:

PORT=3000

You can change the number later if needed.

5. Use the environment variable in app.js

Replace the hardcoded port with:

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Now, your app will use the port defined in .env, or default to 3000 if the variable is missing.

💡 Why this matters:

• Using environment variables makes your app easier to deploy and more secure, especially when storing secrets like API keys.

• It also allows Render (or any cloud platform) to assign its own port dynamically.

Step 9: Prepare for GitHub

Now that our app is ready, let’s upload it to GitHub so we can deploy it later.

1. Make sure Git is installed and connected via SSH (how connect git via ssh).

2. Open GitHub and create a new repository. I’ll name mine testApp, same as my project folder. Make sure it’s public.

Add .gitignore

Before pushing the code, we need a .gitignore file to exclude node_modules, and we’ll also prepare the start script for deployment later.

1. Create .gitignore:

touch .gitignore
code .gitignore

2. Inside .gitignore, add:

node_modules
.env

We don’t need to upload node_modules or .env because dependencies and environment variables can be recreated from package.json and .env locally.

Step 9a: Initialize a Local Git Repository

Before we can push our app to GitHub, we need to initialize Git locally in our project folder. In your terminal, run:

git init

This creates a local Git repository in your project directory. You can now start tracking changes and commit your files.

Step 10: Push Your App to GitHub

Now that our app is ready locally, let’s push it to GitHub so we can deploy it.

1. Add all files to the staging area:

git add .

2. Commit the changes with a message:

git commit -m "Add all files"

3. Set the main branch (if it isn’t already):

git branch -M main

4. Push the code to your GitHub repository:

git push -u origin main

Now your project is live on GitHub! You can go to your repository page and see all the files uploaded.

💡 Why this matters:

• The cloud deployment platform (Render) will pull your code directly from GitHub.

• Keeping your code in GitHub also makes it easy to track changes, collaborate, and roll back if needed.

Step 11: Deploy to Render

Now it’s time to put your app online! Make sure you have a Render account. If not, sign up here before continuing.

1. Log in to Render.

2. Connect your GitHub account if you haven’t already. This allows Render to access your repositories.

3. Go to your Workspace.

4. Click “Add New” and select “Web Service”.

5. In the Source section, you should see a list of your GitHub repositories.

6. Select your repository (in this demo, testApp).

7. Name your app (e.g., testApp).

8. Language/Environment: Select Node.

9. Branch: Choose main.

10. Region: Pick the one closest to you or your users.

11. Set Build & Start Commands

• Build Command:

npm install

• Start Command:

node app.js

12. Instance Type: Select Free (very important if you don’t want to pay).

13. 

    Set Environment Variables

• Key: PORT

• Value: 3000

This tells Render which port your app should run on.

14. Deploy the Service

15. Once deployed, you’ll get a live URL where your app is accessible to anyone on the internet.

Step 12: Test the Live App

Now that your app is deployed on Render, let’s make sure both routes are working.

1. Open your browser.

2. Visit your app’s main URL:

https://testapp-lgtj.onrender.com/

3. You should see:

Hello World

4. Next, test the API route:

https://testapp-lgtj.onrender.com/api

5. You should see JSON output:

{
  "success": true,
  "message": "Hello, World"
}

Optionally, open Postman (or any API client).

6. Send a GET request to:

https://testapp-lgtj.onrender.com/api

8. You should see the same JSON response as in the browser.

Step 13: Conclusion

1. Congratulations! 🎉 You now know how to:

   • Build a Node.js app with Express

   • Create basic routes (/ and /api)

   • Test your app locally in a browser and terminal

   • Push your code to GitHub

   • Deploy your app to Render for free

   • Test the live app in both browser and Postman

2. Your app is now live and accessible online, and you can share it with anyone using the Render URL.

3. From here, you can:

   • Add more routes and functionality to your app

   • Connect databases or third-party APIs

   • Experiment with middleware, authentication, and more

4. This workflow — local development → GitHub → cloud deployment — is a standard process used in the industry.

You’ve just completed a full end-to-end Node.js deployment tutorial. Keep building and deploying more apps to gain confidence!