Деплой React-приложения на Vercel, Netlify, Heroku, GitHub Pages, Surge
📢 О чём я буду рассказывать?
В этом уроке я рассказываю о том, как залить 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
Пікірлер: 225
Всем привет! Дэннис, спасибо тебе за твой труд! Ребят, может кому пригодится. Делал деплой пиццы на хероку по видео, долго не получалось запустить приложение. Поставил heroku CLI, посмотрел логи: понял что не находит модуль json-server. Переставил его из devDependecies в обычные dependencies, запушил - после этого заработало!
@ArchakovBlog
3 жыл бұрын
Закреплю на всякие. И тебе спасибо)
@advhunter2
3 жыл бұрын
Я сразу в обычные dependencies ставил и всё равно не работает на heroku(((
@advhunter2
3 жыл бұрын
Такие логи: 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
@advhunter2
3 жыл бұрын
решил проблему удалением Procfile и npm пакетом concurrently
@alex-kobrin
3 жыл бұрын
Спасибо была та же проблема,
Огромное тебе спасибо Дэнис, за то что услышал наши пожелания, и за твои старания. Очень Нужный и качественный контент!!
Огромнейшее Вам спасибо!!!доступно, подробно, а главное то, что искала весь день!
Спасибо очень хороший видос. И отдельный респект за timeLines или как их там, в общем что видео поделил на части. Выручил капец!!! Успехов тебе!
Ты просто лучший! Дай бог тебе сил сделать ещё что-то такое же крутое как твой канал с уроками!
Круто! Спасибо! Деплой React-приложения на Vercel, Netlify, Heroku, GitHub Pages, Surge deploy react
Спасибо тебе огромное, за детальное объяснение деплоя! И за все твои труды!!! Пицца залилась как надо!
Cпасибо огромное!3 дня искал как залить react на гит)все время какую то ошибку выдавало)делал и по инструкции с гитхаба, ошибка та же, а по твоему сделал и все получилось, лайк и подписка авансом!)
Дэн, спасибо! Долго искал в гугле информацию по этим сервисам - ничего не нашел, а у тебя всё сразу в одном видео! Круто!
@ArchakovBlog
Жыл бұрын
💪🏻
Отличное видео. Спасибо. Ребята, давайте поддержим автора лайками по максимуму, топовый же контент.
Дэнни, это шикарно. Но! Сделай пожалуйста короткую версию реакт пиццы. Без распыления на классовые компоненты и прочие отступления. Сразу разбивка вёрстки, редакс, хуки и потом уже деплой. Хронометраж не большее 2 часов на всё. Это видео залетит подписчикам! Такое видео поможет развитию канала. Гарантирую, что просмотров будет больше всего.
@ArchakovBlog
3 жыл бұрын
Да, хорошая идея. Возможно, что-то похожее будет не как трансляция, а готовое видео
Спасибо за видео, добрый человек)! Делала на гитхаб деплой и все получилось с первого раза))
классный гайд спасибо. Как раз хотел залить на нетлифай и гиталаб пейджес - и все в одном видео плюс по таймкодам, очень удобно! спасибо!
Отличный урок! Спасибо!)
Огромное спасибо! Наконец то 133 попытки получилось задеполить на heroku!
Ты не представляешь, как помог мне. Огромное спасибо.
Крутое видео. У вас отличные знания. Спасибо за помощь !
Отличное видео, спасибо!) доступно и подробно.
Очень полезный ресурс! Спасибо за видео!
Спасибо, ты лучший)
Мужик, ты первый у кого получилось. Все делают плюс минус то же самое, но ничего не работает. А у тебя работает. Думаю дело в том что ты внятно проговариваешь каждый шаг и из-за того что я понимаю что делаю получается лучше.
Спасибо за видео! На GitHub отлично все работает!
Очень полезное видео! Большое спасибо)
Лучший! Как я раньше тебя не смотрел)
Спасибо за ПРЕКРАСНЫЙ контент!!!
Спасибо большое! У тебя отличный контент!
Спасибо Огромное!!!! Этот видео мне реально было полезным:)
Спасибо, очень сильно помог и сэкономил уйму часов (дней)
Супер! Спасибо! Расскажи про свои расширения в хроме
Воо , ништяк! Лайк до просмотра!)
Респект тебе человек. Доступно и понятно.
Супер просто и понятно 🤝
Спасибо, очень помог, все прекрасно задеплоилось)
Спасибо за подробный контент
Жаль что лайк можно поставить только один раз...для таких топовых видео хочется опцию лайки Х 100 спасибо за труд!!!
Уважение, спасибо огромное за видео, ОЧЕНЬ помог
жирнейший плюс. очень круто собрать такое в одном месте
Спасибо, крайне полезно.
Гениально конечно, спасибо
Полезное видео, спасибо!
это единственное видео, которое мне помогло, спасибо огромное!
Спасибо за информацию!
МОЛОДЕЦ ТАК КЛАССНО И ПРОСТО ВСЕ РАССКАЗАЛ !!!
Спасибо за таймкоды
Расскажи пожалуйста про алгоритмы. про сложность алгоритмов. просто ты очень хорошо объясняешь
Я тут не то что бы случайно, я не помню почему я подписался. Я так-то к react отношения пока не имею, хотя в планах есть, я пишу для своей работы скрипт. Автоматизирую, проверки всякие. Тут для себя открыл, что реакт на ноде, сначала собирает в некоторый билд. ДЛя меня это было просто магией ( я так-то щупал реакт, но не серьёзно) Спасибо. Доступно, правда мне кажется порой с простотой перегнуто. Но интересно! Будет время, проведу инспекцию того, что есть на канале для себя интересного
Спасибо, выручил)
Круто, спасибо!
Огромное спасибо!!!👍
Спасибо, единственное видео среди русско и англоязычного контента в котором я разобрался как создать сайт
Спасибос за инфу!
Лучший и почему я тебя раньше не нашёл
спасибо, очень помогло :)
Спасибо Дэн!
Отец, всегда выручаешь
СПАСИБО ОГРОМНОЕ!
От души!
ЧУВАК, ТЫ ЛУЧШИЙ
Спасибо за видео! Короче проще всего использовать Heroku, т. к. он универсальный!
@demid088web
Жыл бұрын
Дааа.... Хероку забанился для России!
Спасибо! мегаполезно!
Благодарю!
Спасибо!!! Скажите, что за расширение вы используете с автоматическим переводом выделенного?
спасибо, помог👍
Топ контент
Cпасибо! Ты топ!
спасибо бро😀
Спасибо )
Не ТУПО А ИСТИННО 100000 ЛАЙКОВ.
Спасибо!!
Делал для GitHub- с первого раза не получилось. Решил gh-pages закинуть в devDep -опять нет, потом по ошибками в консоли понял, что адрес оставил тот же, что и на репозиторий- невнимательность!!! нужно тот, которую предоставляет гитхаб для веба. Спасибо за контент!!!
Спасибо. Очень доступно объяснили 😊
@alexmarch
Жыл бұрын
да согласен
Спасибо большое)много раз помогал мне)Есть вопрос , как залить на хероку если у меня 2 json,(приложение с 2 языками)в 1 jsone русский во 2 инглиш)
Спасибо.
Спасибо
👍🏻
За видос спасибо, но если у меня файлы для бекенда лежат в отдельной папке? условно говорят у меня есть папка server(в которой лежит server.js) и client(по части фронта), то мне нужно указывать web: ./server/server.js ? Сделал так - ошибку выдает на хероку. Юзаю mongodb. Подскажи пожалуйста если знаешь
11:43 Кантюн лоол)
спасибо
Привет, Дэнис, у меня возникла проблема, делал все по твоему видео, а конкретнее с 32 минуты, когда деплоил проект на Heroku, я прошел твой курс по реакт пицце, но у себя сделал гамбургеры), проблема в том что мой загруженный проект отображает бургеры только когда я локально включаю сервер, если отключить редактор когда, снова нету отображения бургеров, подскажи, в чем может быть проблема?
А куда видос про собес делся новый? Там где чистили gameboy?
Прэт и тебе))
чел все круто -- а можно еще видосик если не реакт приложение а одностраничник со скриптами или сайт на пхп с мускулом
это ёбаный ТОП!
как раз закончил смотреть курс react pizza, надеюсь после этого ролика смогу залить этот проект.
@oleksandrlysiuk3971
3 жыл бұрын
Сможешь, удачи)
@ArchakovBlog
3 жыл бұрын
если не сможешь, то пиши тут. может я плохо объяснил и попробую текстом дополнить
@oleksandrlysiuk3971
3 жыл бұрын
Archakov Blog сними про useMemo пожалуйста, было бы отлично от тебя ещё услышать об этом хуке)
@ArchakovBlog
3 жыл бұрын
замётано)
@reznikkvova
3 жыл бұрын
@@ArchakovBlog Привет! Не могу залить ReactPizza на GitHub. Предполагаю, что это из-за json-servera, пробовал добавить его в зависимости, не помогло. Не знаю что делать. Спасай!
По поводу git Pages, а что если у меня есть бекенд на локальном диске написанный на python? Как мне его задеплоить вместе с фронтендом?
thank you
При деплое на гитхаб, ветка называет «gh-pages” можно ли ее как то изменить? Или это обязательно?
А почему когда на github page заливаешь через npm run build всегда на гитхабе название коммита Updates ? Как самому писать название коммитов при такой загрузке?
Привет мог бы ты снять видео как деполитизации приложение например node js + psql на vps?
Собираюсь залить разработанное погодное приложение работающие с историческими данными c openweathermap примерно 8700000 строк на postgresql в связки с node express как это залить на heroku ?В начале базу свою установить?
Может кто подскажет, как правильно залить реакт приложение, которое я создал на купленный хостинг. Будет ли оно работать как spa или каждая страница будет перезагружаться? И можно ли вообще залить именно на хостинг, а не на выделенный сервер. Мне нужен свой домен, а не домен с хероку
У меня качели с роутингом) Не хочет отображаться главная страница при загрузке на gh-pages. После клика по навигации - всё работает. Может кто-то сталкивался - подскажите.
А если залить на vercel реакт, он будет получать запрос с бэка на другом хостинге? Просто насколько я знаю gitpages не работает с запросами на node js
я смог захостить его там но у меня не работает маршрутизация на сайте точнее работает только нужно перезагружать сайт почему так происходит и как исправить использовал vercel
Подскажите почему после деплоя проекта на гитхаб пиццы не подгружаются, в проекте мы использовали npm i json-server и 3001 порт для фйек сервера, как сделать так чтоб после деплоя на гитхаб пиццы отображались и там. Может как то перенаправить их обратно на файдл db.json внутри проекта?
@user-kz3xe7ps9j
2 жыл бұрын
получилось у тебя?
как появился файл scripts в react-pizza ?
Всем привет! Хочу создать веб приложение с базой данных. Я могу разместить сам сайт бесплатно на, например, Нетлифайе, и отдельно базу данных на каком-нибудь бесплатном хостинге? Это будет работать вместе? Заранее спасибо!
Здравствуйте, извините, а как задеплоить многостраничный реакт проект?
Привет, Heroku уже платный, подскажите каким бесплатным сервисом его можно заменить,чтоб залить backend часть проекта?
Еле-еле залил на хостинг... Крч у кого траблы с деплоем пиццы чекайте следующее: 1) Если юзали yarn, то удалите package-json-lock так как он конфликтует с yarn.lock. 2) Обратите внимание на ключ homepage в packege-json. Я поставил так: "homepage": "." если его нет, то ок. 3) Удалите node_modules и выполните yarn команду(на всякий случай) После этого я всё-залил пиццу)
@user-mw1do5ly4s
3 жыл бұрын
Спасибо, помогло.
@andrTaylor
3 жыл бұрын
@@user-mw1do5ly4s рад, что был полезен)