Skip to content
Hallway
0:00 / 0:00

#mern#mongodb#express

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

Dave Gray

447K subscribers • 4 videos on Hallway

YouTube
  • Recommended by 2 people: 2 in engineering communities.
  • Presented by Dave Gray
  • Linked in the descriptiongitdagray/mern_stack_course
  • May be out of date. The tools, versions or practices it shows have likely moved on.

Beginner. No background in the topic needed.

162K views4 years ago2 recommendations

Web developmentCloud and DevOpsReactNode.js, Deno and BunFull-stack frameworks

Dave Gray teaches how to deploy a full-stack MERN application by hosting the React frontend and Node.js backend on Render.

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap Learn how to deploy a full stack app in this MERN Stack Project tutorial. The MERN Stack is made up of Mongo (M), Express (E), React (R), and Node.js (N). In this tutorial, we deploy the frontend React app and the backend Node.js REST API to Render.com 💖 Support me on Patreon ➜ patreon.com/davegray ⭐ Become a full-stack web dev with Zero To Mastery Courses: - Advanced React & Redux: bit.ly/AdvReactDev - The Complete Node.js Developer: bit.ly/CompleteNodeJS - Jr to Senior Web Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr 🚩 Subscribe ➜ bit.ly/3nGHmNn 📬 Course Updates ➜ courses.davegray.codes/ ❓ Questions - Please post them to my Discord ➜ discord.gg/neKghyefqh ☕ Buy Me A Coffee ➜ buymeacoffee.com/davegray 👇 Follow Me On Social Media: Github: github.com/gitdagray Twitter: twitter.com/yesdavidgray LinkedIn: linkedin.com/in/davidagray/ 🔗 All Resources for this MERN Stack Project: github.com/gitdagray/mern_stack_course 🔗 Playlist for this MERN Stack Project Series: bit.ly/3Sn4EaI Deploy a Full Stack App - React, Node.js, Express, Mongo | MERN Tutorial () 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 Corrections: () 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. 📚 Suggested Pre-requisites for this MERN course: 🔗 Node.js for Beginners full course: youtu.be/f2EqECiTBL8 🔗 React JS for Beginners full course: youtu.be/RVFAyFWO4go 🔗 Redux Toolkit for Beginners full course: youtu.be/NqzdVN2tyvQ 🔗 React Login Playlist: youtube.com/playlist?list=PL0Zuz27SZ-6PRCpm9clX0WiBEMB70FWwd 📚 Tutorial References: 🔗 disable-react-devtools: npmjs.com/package/@fvilers/disable-react-devtools 🔗 Full-Stack Host Render.com: render.com/ Was this tutorial on How to deploy a full stack app for our MERN Stack Project helpful? If so, please share. Let me know your thoughts in the comments. #deploy #full #stack

Why it's here

2 people recommend this

What people say. Recommended as a step-by-step guide for successfully deploying both frontend and backend components of a MERN app to Render.

Moments people linked to

u/Proof_Injury_8963in r/node • Recommends

On “Website to deploy mern App”

as i know for now that u need to deploy client and server separately, i think this video will hep u link to this video
3View on Reddit

u/L_E_Uin r/node • Recommends

On “How do I properly deploy my node express task manager app to render.com or another site with all endpoints working? Because for some reason, automatically redirecting to the /login endpoint doesn't work”

i hope this YouTube video helps. it's deployment for render and all you have to do to make it successful. link to this video
2View on Reddit