Развертывание полнофункционального приложения — React, Node.js, Express, Mongo | Учебное пособие ...

Дорожная карта веб-разработки для начинающих (бесплатно!): https://bit.ly/DaveGrayWebDevRoadmap

Узнайте, как развернуть полнофункциональное приложение, в этом руководстве по проекту MERN Stack. MERN Stack включает Mongo (M), Express (E), React (R) и Node.js (N). В этом руководстве мы развернем фронтенд-приложение React и бэкенд-приложение Node.js REST API на Render.com.

💖 Поддержите меня на Patreon ➜   / davegray  

⭐ Станьте полнофункциональным веб-разработчиком с помощью курсов Zero To Mastery:
Продвинутый React и Redux: https://bit.ly/AdvReactDev
Полный курс Node.js для разработчиков: https://bit.ly/CompleteNodeJS
План развития веб-разработчика от младшего до старшего: https://bit.ly/WebDevRoadmap-JrtoSr

🚩 Подпишитесь ➜ https://bit.ly/3nGHmNn

📬 Обновления курса ➜ https://courses.davegray.codes/

❓ Вопросы — пишите в мой Discord ➜   / discord  

☕ Купите мне кофе ➜ https://www.buymeacoffee.com/davegray

👇 Подписывайтесь на меня в социальных сетях:
Github: https://github.com/gitdagray
Twitter:   / yesdavidgray  
LinkedIn:   / davidagray  

🔗 Все ресурсы по этому проекту MERN Stack: https://github.com/gitdagray/mern_sta...

🔗 Плейлист для этой серии проектов MERN Stack: https://bit.ly/3Sn4EaI

Развёртывание полнофункционального приложения — React, Node.js, Express, Mongo | Учебное пособие MERN

(00:00) Введение
(00:08) Добро пожаловать
(00:19) Начальный код — фронтенд
(00:42) Отключение инструментов разработчика React
(02:09) Отключение инструментов разработчика Redux
(02:28) Обновление baseUrl в apiSlice
(03:04) Создание репозитория git и отправка на Github
(04:39) Развертывание приложения React на Render.com
(07:59) Начальный код — бэкенд
(08:10) Обновление allowedOrigins
(09:08) Необходимое решение corsOptions
(09:46) Подтверждение наличия .env в .gitignore
(10:09) Создание репозитория и отправка бэкенда на Github
(11:35) Развертывание бэкенда на Render.com
(15:08) Смотрите прямую трансляцию Приложение
(16:26) Обзор пользовательских историй
(17:30) Проверка мобильной версии
(18:39) Дополнительная очистка
(19:06) Дополнительные функции и расширение области действия

Исправления:

(7:20) Пропущен шаг для корректной работы перезагрузки и обновления страницы: перейдите в раздел «Перенаправления/Перезаписи» и добавьте правило с источником /*, назначением /index.html и действием «Перезапись». Сохраните правило.

📚 Рекомендуемые предварительные требования для этого курса MERN:
🔗 Полный курс «Node.js для начинающих»:    • Node.js Full Course for Beginners | Comple...  
🔗 Полный курс «React JS для начинающих»:    • React JS Full Course for Beginners | Compl...  
🔗 Полный курс «Redux Toolkit для начинающих»:    • React Redux Full Course for Beginners | Re...  
🔗 Плейлист «Вход в React»:    • React Login, Registration, and Authentication  

📚 Ссылки на обучающие материалы:
🔗 disable-react-devtools: https://www.npmjs.com/package/@fviler...
🔗 Full-Stack Host Render.com: https://render.com/

Было ли полезным это руководство по развертыванию полнофункционального стекового приложения для нашего проекта MERN Stack? Если да, поделитесь своим мнением. Поделитесь своим мнением в комментариях.

#deploy #full #stack