MERN Full-Stack Tutorial 2020 — Part 4 (deploy)

• Part 1: Backend (Server-side)
• Part 2: Frontend (Client-side)
• Part 3: Connecting both piece together
• Part 4: Deployment

Source Code — https://github.com/JinKim7/mern-weather-app

“Production” Ready

There’s only a few places that we need to update within the app to make it more “production ready”, in other words, just make it work once deployed.

root/package.json

• Added "heroku-postbuild" script to your package.json so Heroku can run that script when deploying…

server/server.js

• Use the path npm package to find the directory route to the build folder for our client-side app.
• Added a conditional to check if the application is in a production environment. And if it is in production, then our server will read the static frontend files from ../client/build folder (the npm run build made the ../client/build folder).

Checkpoint #11— https://github.com/JinKim7/mern-weather-app/tree/11.heroku
File Changes — https://github.com/JinKim7/mern-weather-app/pull/12/files

Heroku Setup

• Go to heroku.com and make a free account.
• You’ll be then redirected to the apps dashboard (screenshot below)which will list out all your projects

Heroku’s apps dashboard

• Here, you can Create new app by clicking the New button at the top-right corner
• Give your app a unique name compared to all your apps and other apps that’s already existing within heroku’s servers…I named my example heroku project mernweatherapp
• After clicking Create — you’ll be redirected to the Deploy tab page of your new application (screenshot below)

Deploy Settings Page for your new application

• Select Github as your Deployment method (for this example at least)
• Log into your github account and select the repo you’re using for your mern weather app
• You will then be given an option to Enable Automatic Deploys — if you want to enable it, choose the branch you want to auto deploy once there’s an update to that branch, and that’s that.
• To manually deploy, similarly to auto-deploys, choose the branch to deploy — in my example, I’m going to deploy the branch 10.heroku
• Do not click Deploy Branch yet within Manual Deploy because we will need to setup our environment variables (weather api key and mongo user/pass) for our application to use.
• Direct yourself to the Settings tab (like in the screenshot below)

Settings page for our MERN weather application

• Find the Config Vars row and click on the button that’ll say Reveal Config Vars — it’ll then give you rows for you to put in key/value pairs for your env vars.
• Similarly to how your .env file is structure, input the keys (left-side of the equals sign in .env ) on the left-hand column input fields and values (right-side of the equals sign in .env )on the right-hand column input fields.
• Once you’ve added the config/env vars, go back to the Deploy tab and do a manual deployment…then wait until your build is done — you will get a View button to see your newly deployed app.

Completed Deployment

• Click on View and you’ll be redirected to your application page at [application name][dot]herokuapp[dot]com
• You app should now look and behave similar to this app here — https://mernweatherapp.herokuapp.com/

Additional Resources

Here are links to further your knowledge on all the tech we used today.

• Custom Heroku Build Process (heroku-postbuild)
• React — npm run build
• Heroku
• More Info — Heroku/Github Integration

Future Tutorials

• Integrate Webpack
• Refactor using Typescript