Mern App Cloud Deployment

Objectives

• Deploy server to heroku
• Deploy database to MongoDB Atlas
• Deploy react app to either Netlify or Heroku

Disclaimer

This repo is set up assuming that your apps are stuctured the same way we've done them in class.

Setting Up Your Atlas Database

Sign up for an Atlas account HERE.

Once you've created your account and signed in, set up your account:

• Give Your Organization a name.

• Create a project name.

• Select your preferred language, javascript should be your preferred.

When choosing a path, select the free tier.

Creating A Cluster

Once you've selected a tier, let's set up our cluster/database.

You can leave most of these settings as default, double check that your Cluster Tier is M0 Sandbox. Give your cluster a name, ideally this should be the name of your database.

You cluster should now be provisioning.

Creating A Database User

Click on Database Access on the left sidebar. Create a new database user.

Don't lose this password!

Database Access Control

Select the Network Access option from the left sidebar. And click on Add IP Address.

Select Allow Access From Anyhwere. Confirm your changes.

Connecting Your Database

Select the Clusters option on the left sidebar and click on CONNECT underneath your cluster name.

Select connect your application:

Copy the connection url, do not lose this!

Wiring Up Our Code

We now need to prep our code for deployment.

Let's install the dotenv package to read environment variables:

Note: This should be done along side your server code, or your base directory for your project.

npm install dotenv

touch .env

In your server.js:

• Require path from path:

  const path = require('path')

• Telling Express to serve our react app:

  NOTE: This should be added after your middleware

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

Modify your db/index.js to the following:

const mongoose = require('mongoose')
require('dotenv').config()
let dbUrl =
  process.env.NODE_ENV === 'production'
    ? process.env.MONGODB_URI
    : 'mongodb://127.0.0.1:27017/todo_tracker'
mongoose
  .connect(dbUrl, {
    useUnifiedTopology: true,
    useNewUrlParser: true,
    useFindAndModify: true
  })
  .then(() => {
    console.log('Successfully connected to MongoDB.')
  })
  .catch((e) => {
    console.error('Connection error', e.message)
  })
mongoose.set('debug', true)
const db = mongoose.connection

module.exports = db

Finally in your package.json for your server, add a new script in your scripts section:

    "build": "cd client && rm -rf build && npm install && npm run build"

Pointing The Client To Our Api

In client/src/globals, modify your BASE_URL:

export const BASE_URL =
  process.env.NODE_ENV === 'production'
    ? `${window.location.origin}`
    : 'http://localhost:3001'

Initializing A Heroku App

In your project folder type in the following command:

  heroku create

This will create a heroku app for you.

Next we'll add our mongo db connection string to heroku for our Atlas Daatabase:

heroku config:set MONGODB_URI='mongodb+srv://<username>:<database_password>@<cluster>.i57hr.mongodb.net/<database_name>?retryWrites=true&w=majority'

Replace <your password> and <dbname> with the user password for your database and database name respectively, remember these must be an exact match.

Finally we'll add, commit and push our changes to heroku:

git add .
git commit -m <some message>
git push heroku main

The git push heroku main will only push the changes to heroku. To push them to github enter the following:

git push

We can monitor what our app is doing with the following command:

heroku logs --tail

Recap

In this lesson, we successfully deployed our MERN app to heroku. The server will render the built React app and handle the clients api requests. We used mongodb atlas to host our mongo database.

Resources

• Heroku Docs
• Atlas Docs