A guide to deploying your full stack MERN app to Render

Prereqs:

• Github Account
• Render Account
• A fully functional MERN APP and it's repo on Github Here
• MongoDB Account

TLDR

Sign in to Render and create web service for your back end (Node, Express, MongoDB) and a static site for you front end (React).

Deployed App - Contact Bank
(warning Deployed link will take 30 seconds to spin up)

There are several ways to architect a full stack app for deployment on Render.
This tutorial is based of a MERN app with following file structure

Contact-Bank (root)/
├── client/
│   ├── src
│   ├── public
│   ├── node_modules
│   ├── .env
│   ├── .gitignore
│   ├── package-lock.json
│   └── package.json
├── config
├── models
├── node_modules
├── routes
├── seed
├── .env
├── .gitignore
├── package-lock.json
├── package.json
└── server.js

Workflow

(If you don't have an fully functional production ready MERN app, follow these steps below, otherwise go here)

The MERN Application

• main branch for Render deployment
• dev branch for Vercel deployment *optional (front end testing only)

We are focusing on the main branch. I created a MERN App called Contact Bank that is a basic CRUD app with contact information. I seeded 1000 contacts in the MongoDB.

• If you need to test your state prior to seeding the database I have included a data folder on front end with contacts.json

I am using the ContextAPI for the state management, if you want to use hooks and prop drill that won't effect the deployment permitting all things are equal.
Steps:

1. Clone the repo git clone repo

2. Add your MongoDB connection string from MongoDB as an environment variable (do not hardcode this, it should be in your .env file) ex:
   

   MY_MONGO_URI='mongodb+srv:...mongodb.net/contact-bank?retryWrites=true&w=majority'
   

3. Seed the MongoDB

   • Run this command in your CLI

      node seed/seeds.js
   

   from the same level as the server or the .env variables === undefined

4. In the root directory package.json scripts needed are
   

   //package.json
   
     "scripts": {
         "start": "node server.js",
         "server": "nodemon server.js",
         "client": "npm start --prefix client",
         "clientinstall": "npm install --prefix client",
         "dev": "concurrently \"npm run server\" \"npm run 
          client\"",
         "render-postbuild": "NPM_CONFIG_PRODUCTION=false 
         npm install --prefix client && npm run build -- 
         prefix client"
       },
   

5. In the root directory CLI npm run dev and everything should run and changes in the UI should be reflected in the database.

6. Serve static assets in production, inside the server.js
   
   

if (process.env.NODE_ENV === 'production') {
    //*Set static folder up in production
    app.use(express.static('client/build'));

    app.get('*', (req,res) => res.sendFile(path.resolve(__dirname, 'client', 'build','index.html')));
  }

This step must be completed to move on to deployment.

Render

(If you have a fully functional production ready MERN App start here)

- Web Service

• Create a Web Service
• Settings

I have concurrency running with this script npm run dev

• Environment

Environment variable for the MongoDB connection string

• Logs

- Static site

• Create A Static Site
  

• Settings
  I am telling Render to use this script to create a build folder from the root npm run render-postbuild and the path to the build folder is ./client/build since all of the npm commands are called in the root folder
  

• Environment
  

• Redirects/Rewrites
  My route https://contact-bank.onrender.com/api/* must be the top rule since my routes in the server.js are created with /api/
  

• Logs
  

Finally

Then after about 30 minutes the static site link https://contact-bank-a72l.onrender.com/ will be live

Yahooooo

I created this tutorial in light of the Heroku announcement so developers working with the MERN stack had some pathway to deploy their projects moving forward

Thanks for reading and Happy coding

Links 🔗

Conact-Bank Repo
Github Account
Render Account
MERN MongoDB
MongoDB
tree.nathanfriend.io

❤️❤️❤️

Social

Twitter
Linkedin
Portfolio
Github

🤘
Happy Coding