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

Publicado el: 09 septiembre 2022
en el canal de: Dave Gray

137,331

2.3k

Web Dev Roadmap for Beginners (Free!): https://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 ➜   / davegray

⭐ Become a full-stack web dev with Zero To Mastery Courses:
Advanced React & Redux: https://bit.ly/AdvReactDev
The Complete Node.js Developer: https://bit.ly/CompleteNodeJS
Jr to Senior Web Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr

🚩 Subscribe ➜ https://bit.ly/3nGHmNn

📬 Course Updates ➜ https://courses.davegray.codes/

❓ Questions - Please post them to my Discord ➜   / discord

☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray

👇 Follow Me On Social Media:
Github: https://github.com/gitdagray
Twitter:   / yesdavidgray
LinkedIn:   / davidagray

🔗 All Resources for this MERN Stack Project: https://github.com/gitdagray/mern_sta...

🔗 Playlist for this MERN Stack Project Series: https://bit.ly/3Sn4EaI

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

(00:00) Intro
(00:08) Welcome
(00:19) Starter Code - Frontend
(00:42) Disable React Devtools
(02:09) Disable Redux Devtools
(02:28) Update baseUrl in apiSlice
(03:04) Create git repository & push to Github
(04:39) Deploy React app to Render.com
(07:59) Starter Code - Backend
(08:10) Update allowedOrigins
(09:08) corsOptions decision to make
(09:46) Confirm .env is listed in .gitignore
(10:09) Create repository & push backend to Github
(11:35) Deploy the backend to Render.com
(15:08) Check out the live application
(16:26) User Stories Review
(17:30) Check mobile view
(18:39) Extra clean-up
(19:06) Additional features & scope creep

Corrections:
(7:20) 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:    • Node.js Full Course for Beginners | C...
🔗 React JS for Beginners full course:    • React JS Full Course for Beginners | ...
🔗 Redux Toolkit for Beginners full course:    • React Redux Full Course for Beginners...
🔗 React Login Playlist:    • React Login, Registration, and Authen...

📚 Tutorial References:
🔗 disable-react-devtools: https://www.npmjs.com/package/@fviler...
🔗 Full-Stack Host Render.com: https://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

En esta página del sitio puede ver el video en línea Deploy a Full Stack App - React, Node.js, Express, Mongo | MERN Tutorial de Duración hora minuto segunda en buena calidad , que subió el usuario Dave Gray 09 septiembre 2022, comparta el enlace con amigos y conocidos, en youtube este video ya ha sido visto 137,331 veces y le gustó 2.3 mil a los espectadores. Disfruta viendo!

1,090