Deploy a Full Stack App - React, Node.js, Express, Mongo - MERN Tutorial

This tutorial demonstrates deploying a completed MERN application by preparing its React frontend and Node.js REST API, pushing both repositories to GitHub, configuring production settings, and hosting them on Render. It also covers CORS, environment-variable protection, routing for page refreshes, and mobile verification.

Syllabus

Intro
Welcome
Starter Code - Frontend
Disable React Devtools
Disable Redux Devtools
Update baseUrl in apiSlice
Create git repository & push to Github
Deploy React app to Render.com
Starter Code - Backend
Update allowedOrigins
corsOptions decision to make
Confirm .env is listed in .gitignore
Create repository & push backend to Github
Deploy the backend to Render.com
Check out the live application
User Stories Review
Check mobile view
Extra clean-up
Additional features & scope creep
Missing step for page reloads & refreshes to work: Go to Redirects/Rewrites and add a rule with Source set to /* and Destination set to /index.html and Action set to Rewrite. Save the rule.