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

Learn how to deploy a full stack MERN (MongoDB, Express, React, Node.js) application in this comprehensive tutorial. Follow step-by-step instructions to set up and deploy both the frontend React app and the backend Node.js REST API to Render.com. Discover essential techniques such as disabling React and Redux devtools, updating API configurations, creating Git repositories, and handling CORS options. Explore the process of deploying to Render.com, including important steps for page reloads and refreshes. Review user stories, check mobile responsiveness, and consider additional features and potential scope creep. Gain valuable insights into full stack deployment practices and enhance your web development skills.

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.