Kunal Ukey

Posted on Mar 19, 2023

How to Setup and Deploy a MERN stack project for FREE 🌐🚀

#react #node #beginners #tutorial

Introduction:

If you're a developer who's just starting out with the MERN stack, you may be wondering how to deploy your project for the world to see. Luckily, there are free options out there, and in this article, we'll walk you through the process of setting up and deploying a MERN stack project using Render.com

Now, let's get started with setting up our MERN stack project!

Root Folder

The first step is to create a root folder for the project, you can name the folder anything you want, I will name the root folder mern-deploy.

Setting-up Backend

Open any code editor inside the root folder (I am using VS Code), and then create a folder named backend. After this, Open the terminal by pressing CTRL + ` If you are on windows. I don't know about MacOS 😅.
Run this command:



cd backend

Now you will be inside the backend folder.
Run this command to install all the required dependencies.



npm install express mongoose dotenv cors

Create a file named .env to store all your secret keys.
Our .env file should look something like this:



MONGODB_URI=YOUR_MONGODB_URI
PORT=4000

Now, create a file named app.js, and write some code inside it.

app.js



const express = require("express");
const mongoose = require("mongoose");
const app = express();
const cors = require("cors");
require("dotenv").config();

// middleware
const corsOptions = {
    origin: "http://localhost:3000" // frontend URI (ReactJS)
}
app.use(express.json());
app.use(cors(corsOptions));

// connect MongoDB
mongoose.connect(process.env.MONGODB_URI).then(() => {
    const PORT = process.env.PORT || 8000
    app.listen(PORT, () => {
        console.log(`App is Listening on PORT ${PORT}`);
    })
}).catch(err => {
    console.log(err);
});

// route
app.get("/", (req, res) => {
    res.status(201).json({message: "Connected to Backend!"});
});

Note that you'll need a MongoDB database URI. If you don't already have a MongoDB database, you can create one for free on MongoDB. Once you've created a project and a database, you can generate a database URI and add that URI inside the .env file.

After following these steps, you should have a basic backend server set up with a single home route. In the next step, we'll set up the frontend of our MERN stack project.

Setting-up Frontend

Now, open the terminal and run this command to go back to the root folder.



cd ..

Inside the root folder, run this command to initialze ReactJS boilerplate.



npx create-react-app client

Once this is done, delete all the unnecessary boilerplate files, and inside the App.js file make a fetch request to the backend to show the message.

App.js



import { useEffect, useState } from "react";

function App() {
  const [message, setMessage] = useState("");

  // Fetching message from backend on mount
  useEffect(() => {
    fetch("http://localhost:4000")
      .then((res) => res.json())
      .then((data) => setMessage(data.message));
  }, []);

  return (
    <div className="App">
      <h1>{message}</h1>
    </div>
  );
}

export default App;

Deleting .git folder inside client

Delete the .git folder inside the client folder to prevent any conflicts during the deployment process. I would recommend you to delete it manually using the file manager. Also delete the .gitignore file.

Setting-up Root folder for Deployment

Now we have everything set for backend and frontend, let's create package.json file for the root folder by running this following command:



npm init -y

It will generate a package.json file with default fields.

package.json



{
  "name": "mern-deploy",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Now we need to have .gitignore file, so that when we push our code to github all the mentioned files & folders inside will be ignored. So, create a .gitignore file and add all these.

.gitignore



# dependencies
node_modules
.pnp
.pnp.js

# testing
coverage

# production
build

# misc
.env
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

Now, we need to add some scripts to our package.json file to help us start our project and build it for deployment. Add the following scripts to your root folder's package.json file:



{
  "name": "mern-deploy",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "install-server": "cd backend && npm install",
    "start-server": "cd backend && node app.js",
    "install-client": "cd client && npm install",
    "build-client": "cd client && npm run build",
    "start-client": "cd client && npm run start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

These scripts allow us to install our server and client dependencies, start our server and client separately, and build our client for deployment.

Creating GitHub Repository

After adding the necessary scripts to your package.json file, the next important step is to host your code on a version control platform like GitHub.
So, create a new repository on github.com and then follow this steps on your terminal:

Add all the files to the staging area using the command git add .
Commit the changes using the command git commit -m "initial commit"
Add your GitHub repository as a remote using the command git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPOSITORY_NAME.git. Make sure to replace "YOUR_USERNAME" and "YOUR_REPOSITORY_NAME" with your actual GitHub username and repository name.
Rename master branch to main branch using git branch -M main
Push your code to the repository using the command git push -u origin main.

Deploy to Render.com

Now that your project is hosted on GitHub, you can deploy it to Render.com. Here's how to do it:

Create an account on Render.com if you haven't already.
Link your GitHub account to give access to your repository.
Click on "New" and select "Web Service" from the option.

Select your repository, and in the next screen, fill the fields as shown below:

Name: YOUR_DESIRED_NAME
Runtime: Node
Build Command: npm run install-server
Start Command: npm run start-server

Open Advanced option, and add environment variables.

Click on "Create Web Service" to deploy your backend.

Add Backend URL to Frontend

Once the backend is successfully deployed, copy its URL and add it to the client/App.js file.

App.js



import { useEffect, useState } from "react";

function App() {
  const [message, setMessage] = useState("");

  useEffect(() => {
    fetch("https://YOUR_BACKEND_URL.com")
      .then((res) => res.json())
      .then((data) => setMessage(data.message));
  },[]);

  return (
  <div className="App">
    <h1>{message}</h1>
  </div>
  );
}

export default App;

Again, stage and commit the changes to GitHub.

Deploy Frontend

Now the backend is ready, its time to deploy our frontend to render.com
Here's how to do it:

Click on "New" and select "Static Site" from the option.
Select your repository, and in the next screen, fill the fields as shown below:

Name: YOUR_DESIRED_NAME
Runtime: Node
Build Command: npm run install-client && npm run build-client
Publish directory: ./client/build

Click "Create Static Site" to deploy your frontend.

Add Frontend URL to Backend

Once the frontend is successfully deployed, copy its URL and add it to the backend/app.js file.

app.js



const express = require("express");
const mongoose = require("mongoose");
const app = express();
const cors = require("cors");
require("dotenv").config();

// middleware
const corsOptions = {
    origin: "YOUR_FRONTEND_URL", // frontend URI (ReactJS)
}
app.use(express.json());
app.use(cors(corsOptions));

// connect MongoDB
mongoose.connect(process.env.MONGODB_URI).then(() => {
    const PORT = process.env.PORT || 8000
    app.listen(PORT, () => {
        console.log(`App is Listening on PORT ${PORT}`);
    })
}).catch(err => {
    console.log(err);
});

// route
app.get("/", (req, res) => {
    res.status(201).json({message: "Connected to Backend!"});
});

Again, stage and commit the changes to GitHub.

And that's it! Your MERN stack project should now be up and running on Render.com

Thanks for Reading! ❤

Top comments (20)

vasip2f • May 4 '23

after deployemnt i try to post the data frontend to backend it's perfectly send the data...but after page refresh it's show page not found...

Kunal Ukey • May 7 '23 • Edited

@vasip2f Can you provide more details?

Precup Eduard • May 23 '23

Hi @vasip2f . That may be caused because the page name is looking for after refresh.
Let's say you have a get request for data in a page yoursite/api/get. After refresh it may looking only for /api/get, so it means you will have to set a redirect in your express server.

Ravi Dubey • Apr 10

how to do that? is it like this -

Ravi Dubey • Apr 10

Ankush Banerjee • Apr 2 '23

Thanks bruh!! , works like a charm :)

Tanya Kemkar • Dec 15 '23

best article!!

Mudassir Khan • Jul 21 '23

Got this error , when deployed the server side code
{"error":"Endpoint not found"}
Here's the link : notable-app-new.onrender.com/
Here's the code: github.com/whosmudassir/mern-app-t...

Jonathanmedhed • Nov 5 '23

I get this error on deployment of the backend:

cd backend && node app.js

Nov 5 02:18:35 PM

Nov 5 02:18:37 PM /opt/render/project/src/backend/node_modules/bson/lib/bson.cjs:479
Nov 5 02:18:37 PM inspect ??= defaultInspect;
Nov 5 02:18:37 PM ^^^
Nov 5 02:18:37 PM

Nov 5 02:18:37 PM SyntaxError: Unexpected token '??='
Nov 5 02:18:37 PM at wrapSafe (internal/modules/cjs/loader.js:984:16)

Daniel King • Jun 30 '23

Hi! I recently finished my first MERN project using the create-react-app method above, which has now been depreciated. How would you suggest starting a new MERN project without create-react-app? The current documentation suggests using Next.js, but I'd like to avoid learning another framework until I am comfortable with using the MERN stack. Thanks in advance!

Ravi Dubey • Apr 10 • Edited

Your blog is good, but this basic Setup is almost covered by everyone who shares, please go beyond this basic initital MERN stack deployment, its a request. If you really want to post somehting great then post a blog for having some endpoints, having authentication and authorization, middlewares included, because api endpoints does not work properly or completley for most of the people learning and trying, beyond the initial routes '/' or base url! Please post on this having configurations and setup needed for correctly accessing all endpoints on deployed url. Please do post a blog for this. AND as CRA is deprecated so please post it using Vite React JavaScript if possible.