How to Deploy Your MERN Website for Free Using Render Dashboard

Hello everyone! I have recently started building projects using various open source tools to enhance my skills as a developer and be versatile for different technologies.

Recently I came across render dashboard. Render is an all-in-one cloud platform for building and deploying apps and websites, offering free SSL, global CDN, private networks, and automatic Git-based deployments.

In this article, I will show you how to use this platform to deploy your MERN website for free without any charge.

We have to cover the following steps to do so:

• Setting Up Project Structure and Configuration

• Setting Up Static Files for Production

• Deploying to Render and Configuring Environment Variables

Prerequisites

Before getting started, your directory structure must be similar to the following:

project-root/
|
|-frontend/
|
└-backend/

project-root/: This is the main directory where the entire project resides. It contains all the core components of the project, including the frontend and backend.

• frontend/: This folder contains all the files and resources related to the client-side of the application. It typically includes the React or other frontend framework’s code, styles, assets, and any other client-side logic.

• backend/: This folder contains all the files and resources related to the server-side of the application. It includes the API logic, server configuration, database connection, authentication, and other backend-specific tasks.

Setting Up Project Structure and Configuration

Note: Our main task is to bring both the frontend and the backend code inside the same port.

As shown in the image, port 5001 is handling the server-side actions, while port 5173 is used for the client-side. Our goal is to integrate the client-side components into the server. Currently, to run the website, I need to execute npm run dev in the frontend folder and npm start in the backend folder. However, during deployment, we aim to ensure that both the client-side and server-side are seamlessly integrated and running simultaneously. That is, we want to do the following:

1. Get into your root directory. Open the terminal and hit npm init -y. This will initialize a new Node.js project by creating a default package.json file with pre-filled configurations.

2. Navigate to the backend folder and open package.json. Under the scripts section, add the following:

    "scripts": {
        "start": "node src/index.js"
      },
   

3. In the root directory, create a .gitignore file to exclude node_modules and .env for security and version control purposes

   

4. Now, in order to install the dependencies required by both the frontend and the backend, navigate inside the root package.json and add the following inside the scripts section:

    "scripts": {
        "build": "npm install --prefix frontend && npm install --prefix 
                  backend && npm run build --prefix frontend",
    }
   

   This will install the dependencies for the frontend and backend by targeting there respective package.json. Also, npm run build --prefix frontend will compile the frontend application into production-ready files which will create a dist folder.

5. Also modify the start script :

    "start": "npm run start --prefix backend"
   

   This ensures that running npm start from the root directory will start the backend server.

6. Delete the node_modules folders from both the frontend and backend directories to clean up any existing dependencies. Then, run npm run build in the terminal to reinstall dependencies and build the frontend for production.

Setting Up Static Files for Production

1. Running the build command will generate a dist folder inside the frontend directory. This folder contains the production-ready version of your frontend application

   

2. In the backend/src/index.js file, import the built-in path module by adding the following line at the top:

    const path = require('path');
   

   This module helps manage file and directory paths efficiently.

3. Create a variable named __dirname in your index.js file to define the absolute path of the current directory. Add the following line:

    const __dirname = path.resolve();
   

   This will allow you to construct file paths dynamically and work with the file system.

4. Below the app.use('/path', routes) line in your index.js file, add the following code to serve the dist folder as static assets in production:

    if (process.env.NODE_ENV === 'production') {
      app.use(express.static(path.join(__dirname, '../frontend/dist')));
   
      app.get('*', (req, res) => {
        res.sendFile(path.join(__dirname, '../frontend', 'dist', 
                    'index.html'));
      });
    }
   

   This code ensures that in a production environment, the server will serve the frontend's dist folder, allowing the app to function as a single-page application.

Deploying to Render and Configuring Environment Variables

1. Create a GitHub repository, initialize your project as a Git repository, add the remote URL, commit your code, and push it to GitHub.

2. Open the Render dashboard by navigating to Render.

3. Create a new web service on Render and select your GitHub repository for deployment.

4. Do not make any changes unless necessary. Only update the build and start commands as :

   build: npm run build,

   start: npm start

5. In the end of page, click on Add from .env, copy all your environment variables and paste here.

6. Click on Deploy Web Service.

7. If there are no issues with your code, the website should be successfully deployed within the next 2-3 minutes.

Congratulations! You've just deployed your very first MERN website for free!🎉

Here’s a link to a chat app I created recently as a sample website. Feel free to explore the code and gain hands-on experience!
Repo: Chat Wave

Happy coding, and best of luck with your future projects!