Render Deployment (free tier) of MERN App
Tags: deployment, react, render, mern
Published: 2022-09-08 22:40:49

# A guide to deploying your full stack MERN app to Render

Prereqs:
- [Github Account](https://github.com/)
- [Render Account](https://render.com/)
- A fully functional MERN APP and it's repo on Github [Here](https://github.com/GregPetropoulos/Contact-Bank)
- [MongoDB](https://www.mongodb.com/mern-stack) Account

### [TLDR](#render)
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](https://contact-bank-a72l.onrender.com/)
(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
```javascript
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

![Workflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1cy9tp2e55ogkmwormsv.png)


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

## 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](https://github.com/GregPetropoulos/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](https://github.com/GregPetropoulos/Contact-Bank)
2. Add your MongoDB connection string from MongoDB as an environment variable (do not hardcode this, it should be in your .env file) ex:```javascript
MY_MONGO_URI='mongodb+srv:...mongodb.net/contact-bank?retryWrites=true&w=majority'
```
3. Seed the MongoDB
   - Run this command in your CLI 
     ```javascript
       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 
    ```javascript
    //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
```javascript
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
![Create a web service](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zcqn92yfvo3ztts9j43m.png)
 - Settings

I have concurrency running with this script `npm run dev`
![Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gn7v28w6au2of8wa1npz.png)
 - Environment

Environment variable for the MongoDB connection string
![Environment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1uxexqsht2a3vvcnjqjf.png)
 - Logs
![Logs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5zbohqunpohykiquy3so.png)


## - Static site
 - Create A Static Site 
 ![Start a static site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uglztct4reibfmunltgt.png)

 - 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
 ![Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0idudh4znrz90oidc7i9.png)

 - Environment
 ![Environment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/peltp1kaitaotm5rms3k.png)

 - 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/`
![Redirects/Rewrites](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d7q2ncdzl85j89fev8bo.png)

 - Logs
![Logs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c866iwtupsslzcm7rs5s.png)

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


![Live site is deployed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gkx4m6zsjcxqyl8q5mvz.png)
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 :link: 
[Conact-Bank Repo](https://github.com/GregPetropoulos/Contact-Bank)
[Github Account](https://github.com/)
[Render Account](https://render.com/)
[MERN MongoDB](https://www.mongodb.com/mern-stack) 
[MongoDB](https://www.mongodb.com/ja-jp/cloud/atlas/register?utm_content=rlsapostreg&utm_source=google&utm_campaign=gs_americas_uscan_search_brand_dsa_atlas_desktop_rlsa_postreg&utm_term=&utm_medium=cpc_paid_search&utm_ad=&utm_ad_campaign_id=14383025495&adgroup=129270225274&gclid=Cj0KCQjwpeaYBhDXARIsAEzItbHEJO__VjWzde3F2BbidKiLL9oRNCIyvcrylF9sW5QJHgtWRLUeMEgaAtVAEALw_wcB)
[tree.nathanfriend.io](https://tree.nathanfriend.io/)


:heart::heart::heart:

## Social 
[Twitter](https://twitter.com/GregoriosPetro1)
[Linkedin](https://www.linkedin.com/in/greg-petropoulos/)
[Portfolio](https://gregpetropoulos.dev/)
[Github](https://github.com/GregPetropoulos)

:metal:
Happy Coding