Деплой React-приложения на Vercel, Netlify, Heroku, GitHub Pages, Surge
HTML-код
- Опубликовано: 3 июл 2024
- 📢 О чём я буду рассказывать?
В этом уроке я рассказываю о том, как залить React-приложение на бесплатный хостинг: Vercel, Netlify, Heroku, GitHub Pages, Surge.
🕒 Таймкоды:
00:00 - Начало
00:40 - Скачиваем Git
02:23 - Клонируем репозиторий react-todo (ссылка ниже)
04:43 - Пробуем запустить React-приложение на нашем ПК
09:40 - Заливаем проект на свой GitHub
Заливаем приложение на:
11:00 - Vercel
15:36 - Netlify
19:29 - Surge
24:50 - GitHub Pages
32:31 - Heroku
44:34 - Подводим итог по каждому сервису
Репозиторий todo-react: github.com/Archakov06/todo-re...
Репозиторий react-pizza: github.com/Archakov06/react-p...
📢 Платный курс по ReactJS с наставником: mentor.archakov.im/landing.html
❤️ Поддержка:
- Patreon: / archakovblog
- Донаты: www.donationalerts.com/r/arch...
🔗 Следите за обновлениями и информацией в:
- Telegram-канале: t.me/archakov_im
- VK: archakov_im
- Личном блоге: archakov.im
- GitHub: github.com/Archakov06
- Моё резюме: career.habr.com/archakovim
Всем привет! Дэннис, спасибо тебе за твой труд!
Ребят, может кому пригодится.
Делал деплой пиццы на хероку по видео, долго не получалось запустить приложение.
Поставил heroku CLI, посмотрел логи: понял что не находит модуль json-server.
Переставил его из devDependecies в обычные dependencies, запушил - после этого заработало!
Закреплю на всякие. И тебе спасибо)
Я сразу в обычные dependencies ставил и всё равно не работает на heroku(((
Такие логи: heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=react-pizza-2020.herokuapp.com request_id=97bb29dd-74bf-46cb-a106-32283cedf595 fwd="92.38.76.19" dyno= connect= service= status=503 bytes= protocol=https
решил проблему удалением Procfile и npm пакетом concurrently
Спасибо была та же проблема,
Огромнейшее Вам спасибо!!!доступно, подробно, а главное то, что искала весь день!
Огромное тебе спасибо Дэнис, за то что услышал наши пожелания, и за твои старания. Очень Нужный и качественный контент!!
Круто! Спасибо!
Деплой React-приложения на Vercel, Netlify, Heroku, GitHub Pages, Surge
deploy react
Спасибо очень хороший видос. И отдельный респект за timeLines или как их там, в общем что видео поделил на части. Выручил капец!!! Успехов тебе!
Спасибо тебе огромное, за детальное объяснение деплоя! И за все твои труды!!! Пицца залилась как надо!
Отличный урок! Спасибо!)
Ты просто лучший!
Дай бог тебе сил сделать ещё что-то такое же крутое как твой канал с уроками!
Ты не представляешь, как помог мне. Огромное спасибо.
классный гайд спасибо. Как раз хотел залить на нетлифай и гиталаб пейджес - и все в одном видео плюс по таймкодам, очень удобно! спасибо!
Крутое видео. У вас отличные знания. Спасибо за помощь !
Отличное видео, спасибо!) доступно и подробно.
Спасибо, ты лучший)
Очень полезный ресурс! Спасибо за видео!
Отличное видео. Спасибо. Ребята, давайте поддержим автора лайками по максимуму, топовый же контент.
Спасибо за видео, добрый человек)! Делала на гитхаб деплой и все получилось с первого раза))
Спасибо за ПРЕКРАСНЫЙ контент!!!
Спасибо за видео! На GitHub отлично все работает!
Очень полезное видео! Большое спасибо)
Респект тебе человек. Доступно и понятно.
Спасибо большое! У тебя отличный контент!
Супер просто и понятно 🤝
Лучший! Как я раньше тебя не смотрел)
Cпасибо огромное!3 дня искал как залить react на гит)все время какую то ошибку выдавало)делал и по инструкции с гитхаба, ошибка та же, а по твоему сделал и все получилось, лайк и подписка авансом!)
Дэн, спасибо! Долго искал в гугле информацию по этим сервисам - ничего не нашел, а у тебя всё сразу в одном видео! Круто!
💪🏻
Спасибо за подробный контент
Спасибо Огромное!!!! Этот видео мне реально было полезным:)
Спасибо, очень сильно помог и сэкономил уйму часов (дней)
Воо , ништяк! Лайк до просмотра!)
Гениально конечно, спасибо
Спасибо, крайне полезно.
Спасибо, очень помог, все прекрасно задеплоилось)
Уважение, спасибо огромное за видео, ОЧЕНЬ помог
Спасибо за таймкоды
Огромное спасибо! Наконец то 133 попытки получилось задеполить на heroku!
Спасибо за информацию!
МОЛОДЕЦ ТАК КЛАССНО И ПРОСТО ВСЕ РАССКАЗАЛ !!!
Полезное видео, спасибо!
это единственное видео, которое мне помогло, спасибо огромное!
Спасибо, выручил)
Огромное спасибо!!!👍
Спасибос за инфу!
Мужик, ты первый у кого получилось. Все делают плюс минус то же самое, но ничего не работает. А у тебя работает. Думаю дело в том что ты внятно проговариваешь каждый шаг и из-за того что я понимаю что делаю получается лучше.
Круто, спасибо!
спасибо, очень помогло :)
СПАСИБО ОГРОМНОЕ!
жирнейший плюс. очень круто собрать такое в одном месте
Спасибо Дэн!
Супер! Спасибо!
Расскажи про свои расширения в хроме
От души!
Спасибо! мегаполезно!
Дэнни, это шикарно. Но! Сделай пожалуйста короткую версию реакт пиццы. Без распыления на классовые компоненты и прочие отступления. Сразу разбивка вёрстки, редакс, хуки и потом уже деплой. Хронометраж не большее 2 часов на всё.
Это видео залетит подписчикам! Такое видео поможет развитию канала. Гарантирую, что просмотров будет больше всего.
Да, хорошая идея. Возможно, что-то похожее будет не как трансляция, а готовое видео
ЧУВАК, ТЫ ЛУЧШИЙ
Отец, всегда выручаешь
Жаль что лайк можно поставить только один раз...для таких топовых видео хочется опцию лайки Х 100
спасибо за труд!!!
Благодарю!
Лучший и почему я тебя раньше не нашёл
спасибо, помог👍
Спасибо, единственное видео среди русско и англоязычного контента в котором я разобрался как создать сайт
спасибо бро😀
Cпасибо! Ты топ!
Спасибо )
Спасибо. Очень доступно объяснили 😊
да согласен
Спасибо!!
Я тут не то что бы случайно, я не помню почему я подписался. Я так-то к react отношения пока не имею, хотя в планах есть, я пишу для своей работы скрипт. Автоматизирую, проверки всякие.
Тут для себя открыл, что реакт на ноде, сначала собирает в некоторый билд. ДЛя меня это было просто магией ( я так-то щупал реакт, но не серьёзно)
Спасибо. Доступно, правда мне кажется порой с простотой перегнуто. Но интересно!
Будет время, проведу инспекцию того, что есть на канале для себя интересного
Расскажи пожалуйста про алгоритмы. про сложность алгоритмов. просто ты очень хорошо объясняешь
Топ контент
Спасибо.
Спасибо
Спасибо за видео!
Короче проще всего использовать Heroku, т. к. он универсальный!
Дааа.... Хероку забанился для России!
Не ТУПО А ИСТИННО 100000 ЛАЙКОВ.
спасибо
👍🏻
thank you
это ёбаный ТОП!
11:43 Кантюн лоол)
Спасибо!!! Скажите, что за расширение вы используете с автоматическим переводом выделенного?
Делал для GitHub- с первого раза не получилось. Решил gh-pages закинуть в devDep -опять нет, потом по ошибками в консоли понял, что адрес оставил тот же, что и на репозиторий- невнимательность!!! нужно тот, которую предоставляет гитхаб для веба. Спасибо за контент!!!
Привет, Дэнис, у меня возникла проблема, делал все по твоему видео, а конкретнее с 32 минуты, когда деплоил проект на Heroku, я прошел твой курс по реакт пицце, но у себя сделал гамбургеры), проблема в том что мой загруженный проект отображает бургеры только когда я локально включаю сервер, если отключить редактор когда, снова нету отображения бургеров, подскажи, в чем может быть проблема?
чел все круто -- а можно еще видосик если не реакт приложение а одностраничник со скриптами или сайт на пхп с мускулом
Помог
Прэт и тебе))
По поводу git Pages, а что если у меня есть бекенд на локальном диске написанный на python? Как мне его задеплоить вместе с фронтендом?
А куда видос про собес делся новый? Там где чистили gameboy?
Спасибо большое)много раз помогал мне)Есть вопрос , как залить на хероку если у меня 2 json,(приложение с 2 языками)в 1 jsone русский во 2 инглиш)
За видос спасибо, но если у меня файлы для бекенда лежат в отдельной папке? условно говорят у меня есть папка server(в которой лежит server.js) и client(по части фронта), то мне нужно указывать web: ./server/server.js ?
Сделал так - ошибку выдает на хероку. Юзаю mongodb.
Подскажи пожалуйста если знаешь
как раз закончил смотреть курс react pizza, надеюсь после этого ролика смогу залить этот проект.
Сможешь, удачи)
если не сможешь, то пиши тут. может я плохо объяснил и попробую текстом дополнить
Archakov Blog сними про useMemo пожалуйста, было бы отлично от тебя ещё услышать об этом хуке)
замётано)
@@ArchakovBlog Привет! Не могу залить ReactPizza на GitHub. Предполагаю, что это из-за json-servera, пробовал добавить его в зависимости, не помогло. Не знаю что делать. Спасай!
При деплое на гитхаб, ветка называет «gh-pages” можно ли ее как то изменить? Или это обязательно?
ЛАЙК ПОДПИСКА НЕ ГЛЯДЯ
А почему когда на github page заливаешь через npm run build всегда на гитхабе название коммита Updates ? Как самому писать название коммитов при такой загрузке?
Привет, Heroku уже платный, подскажите каким бесплатным сервисом его можно заменить,чтоб залить backend часть проекта?
А если залить на vercel реакт, он будет получать запрос с бэка на другом хостинге? Просто насколько я знаю gitpages не работает с запросами на node js
Еле-еле залил на хостинг...
Крч у кого траблы с деплоем пиццы чекайте следующее:
1) Если юзали yarn, то удалите package-json-lock так как он конфликтует с yarn.lock.
2) Обратите внимание на ключ homepage в packege-json. Я поставил так: "homepage": "."
если его нет, то ок.
3) Удалите node_modules и выполните yarn команду(на всякий случай)
После этого я всё-залил пиццу)
Спасибо, помогло.
@@user-mw1do5ly4s рад, что был полезен)
Здравствуйте, извините, а как задеплоить многостраничный реакт проект?
Собираюсь залить разработанное погодное приложение работающие с историческими данными c openweathermap примерно 8700000 строк на postgresql в связки с node express как это залить на heroku ?В начале базу свою установить?
Подскажите, сделал деплой на Netlify. Все страницы загружаются норм. У меня есть перенаправление в React Route на свою страницу 404. А сервис выдаёт: "Page Not Found. Looks like you've followed a broken link or entered a URL that doesn't exist on this site."
Как исправить?
я смог захостить его там но у меня не работает маршрутизация на сайте точнее работает только нужно перезагружать сайт почему так происходит и как исправить использовал vercel
как появился файл scripts в react-pizza ?
Привет мог бы ты снять видео как деполитизации приложение например node js + psql на vps?
Подскажите почему после деплоя проекта на гитхаб пиццы не подгружаются, в проекте мы использовали npm i json-server и 3001 порт для фйек сервера, как сделать так чтоб после деплоя на гитхаб пиццы отображались и там. Может как то перенаправить их обратно на файдл db.json внутри проекта?
получилось у тебя?