Деплой 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

  • @anatoliyname4192
    @anatoliyname41923 жыл бұрын

    Всем привет! Дэннис, спасибо тебе за твой труд! Ребят, может кому пригодится. Делал деплой пиццы на хероку по видео, долго не получалось запустить приложение. Поставил heroku CLI, посмотрел логи: понял что не находит модуль json-server. Переставил его из devDependecies в обычные dependencies, запушил - после этого заработало!

  • @ArchakovBlog

    @ArchakovBlog

    3 жыл бұрын

    Закреплю на всякие. И тебе спасибо)

  • @advhunter2

    @advhunter2

    3 жыл бұрын

    Я сразу в обычные dependencies ставил и всё равно не работает на heroku(((

  • @advhunter2

    @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

    @advhunter2

    3 жыл бұрын

    решил проблему удалением Procfile и npm пакетом concurrently

  • @alex-kobrin

    @alex-kobrin

    3 жыл бұрын

    Спасибо была та же проблема,

  • @alessandraberetta9380
    @alessandraberetta93803 жыл бұрын

    Огромное тебе спасибо Дэнис, за то что услышал наши пожелания, и за твои старания. Очень Нужный и качественный контент!!

  • @NadezhdaCheplagina
    @NadezhdaCheplagina3 жыл бұрын

    Огромнейшее Вам спасибо!!!доступно, подробно, а главное то, что искала весь день!

  • @user-zc6vc6ss2u
    @user-zc6vc6ss2u3 жыл бұрын

    Спасибо очень хороший видос. И отдельный респект за timeLines или как их там, в общем что видео поделил на части. Выручил капец!!! Успехов тебе!

  • @user-vw8xb7xf4v
    @user-vw8xb7xf4v5 ай бұрын

    Ты просто лучший! Дай бог тебе сил сделать ещё что-то такое же крутое как твой канал с уроками!

  • @user-rr1ju1ck2u
    @user-rr1ju1ck2u2 жыл бұрын

    Круто! Спасибо! Деплой React-приложения на Vercel, Netlify, Heroku, GitHub Pages, Surge deploy react

  • @dokinaKA
    @dokinaKA2 жыл бұрын

    Спасибо тебе огромное, за детальное объяснение деплоя! И за все твои труды!!! Пицца залилась как надо!

  • @krukru4500
    @krukru45003 жыл бұрын

    Cпасибо огромное!3 дня искал как залить react на гит)все время какую то ошибку выдавало)делал и по инструкции с гитхаба, ошибка та же, а по твоему сделал и все получилось, лайк и подписка авансом!)

  • @shandulskiy
    @shandulskiy Жыл бұрын

    Дэн, спасибо! Долго искал в гугле информацию по этим сервисам - ничего не нашел, а у тебя всё сразу в одном видео! Круто!

  • @ArchakovBlog

    @ArchakovBlog

    Жыл бұрын

    💪🏻

  • @user-fs1ux7dy6r
    @user-fs1ux7dy6r3 жыл бұрын

    Отличное видео. Спасибо. Ребята, давайте поддержим автора лайками по максимуму, топовый же контент.

  • @srt2046
    @srt20463 жыл бұрын

    Дэнни, это шикарно. Но! Сделай пожалуйста короткую версию реакт пиццы. Без распыления на классовые компоненты и прочие отступления. Сразу разбивка вёрстки, редакс, хуки и потом уже деплой. Хронометраж не большее 2 часов на всё. Это видео залетит подписчикам! Такое видео поможет развитию канала. Гарантирую, что просмотров будет больше всего.

  • @ArchakovBlog

    @ArchakovBlog

    3 жыл бұрын

    Да, хорошая идея. Возможно, что-то похожее будет не как трансляция, а готовое видео

  • @vladatoday4957
    @vladatoday49572 жыл бұрын

    Спасибо за видео, добрый человек)! Делала на гитхаб деплой и все получилось с первого раза))

  • @alexmarch
    @alexmarch Жыл бұрын

    классный гайд спасибо. Как раз хотел залить на нетлифай и гиталаб пейджес - и все в одном видео плюс по таймкодам, очень удобно! спасибо!

  • @Bygagai
    @Bygagai3 жыл бұрын

    Отличный урок! Спасибо!)

  • @DAROM-TK
    @DAROM-TK2 жыл бұрын

    Огромное спасибо! Наконец то 133 попытки получилось задеполить на heroku!

  • @Makvkn
    @Makvkn2 жыл бұрын

    Ты не представляешь, как помог мне. Огромное спасибо.

  • @m1akarov442
    @m1akarov4422 жыл бұрын

    Крутое видео. У вас отличные знания. Спасибо за помощь !

  • @vadicus6534
    @vadicus65342 жыл бұрын

    Отличное видео, спасибо!) доступно и подробно.

  • @user-cd1sr5sx2r
    @user-cd1sr5sx2r3 жыл бұрын

    Очень полезный ресурс! Спасибо за видео!

  • @alexKaprushaDev
    @alexKaprushaDev3 жыл бұрын

    Спасибо, ты лучший)

  • @user-wq9gc4rj3w
    @user-wq9gc4rj3w Жыл бұрын

    Мужик, ты первый у кого получилось. Все делают плюс минус то же самое, но ничего не работает. А у тебя работает. Думаю дело в том что ты внятно проговариваешь каждый шаг и из-за того что я понимаю что делаю получается лучше.

  • @user-cd1sr5sx2r
    @user-cd1sr5sx2r3 жыл бұрын

    Спасибо за видео! На GitHub отлично все работает!

  • @Megalodon510
    @Megalodon5103 жыл бұрын

    Очень полезное видео! Большое спасибо)

  • @roninjkee
    @roninjkee3 жыл бұрын

    Лучший! Как я раньше тебя не смотрел)

  • @user-bl4te2kg8v
    @user-bl4te2kg8v Жыл бұрын

    Спасибо за ПРЕКРАСНЫЙ контент!!!

  • @vivikor4389
    @vivikor43892 жыл бұрын

    Спасибо большое! У тебя отличный контент!

  • @nurmatabdullah320
    @nurmatabdullah3202 жыл бұрын

    Спасибо Огромное!!!! Этот видео мне реально было полезным:)

  • @unhappyPlayer
    @unhappyPlayer2 жыл бұрын

    Спасибо, очень сильно помог и сэкономил уйму часов (дней)

  • @aleksandrholoven2412
    @aleksandrholoven24123 жыл бұрын

    Супер! Спасибо! Расскажи про свои расширения в хроме

  • @kolyabokov88
    @kolyabokov883 жыл бұрын

    Воо , ништяк! Лайк до просмотра!)

  • @dvil6029
    @dvil60292 жыл бұрын

    Респект тебе человек. Доступно и понятно.

  • @Vse-po-Faktu
    @Vse-po-Faktu3 ай бұрын

    Супер просто и понятно 🤝

  • @tehnoblog6430
    @tehnoblog6430 Жыл бұрын

    Спасибо, очень помог, все прекрасно задеплоилось)

  • @userScKonov
    @userScKonov3 жыл бұрын

    Спасибо за подробный контент

  • @yanarusakova1632
    @yanarusakova1632 Жыл бұрын

    Жаль что лайк можно поставить только один раз...для таких топовых видео хочется опцию лайки Х 100 спасибо за труд!!!

  • @dmytronesterenko1424
    @dmytronesterenko1424 Жыл бұрын

    Уважение, спасибо огромное за видео, ОЧЕНЬ помог

  • @user-xb7wq5kp5l
    @user-xb7wq5kp5l3 жыл бұрын

    жирнейший плюс. очень круто собрать такое в одном месте

  • @violentiner
    @violentiner3 жыл бұрын

    Спасибо, крайне полезно.

  • @Valeron12345
    @Valeron123453 ай бұрын

    Гениально конечно, спасибо

  • @alexanderismailov6033
    @alexanderismailov60333 жыл бұрын

    Полезное видео, спасибо!

  • @user-fj1ct1fo6b
    @user-fj1ct1fo6b4 ай бұрын

    это единственное видео, которое мне помогло, спасибо огромное!

  • @MrAnyTwo
    @MrAnyTwo2 жыл бұрын

    Спасибо за информацию!

  • @user-vv6jx8qg4v
    @user-vv6jx8qg4v3 жыл бұрын

    МОЛОДЕЦ ТАК КЛАССНО И ПРОСТО ВСЕ РАССКАЗАЛ !!!

  • @grangeld
    @grangeld3 жыл бұрын

    Спасибо за таймкоды

  • @DzhavidR
    @DzhavidR3 жыл бұрын

    Расскажи пожалуйста про алгоритмы. про сложность алгоритмов. просто ты очень хорошо объясняешь

  • @tackesi
    @tackesi3 жыл бұрын

    Я тут не то что бы случайно, я не помню почему я подписался. Я так-то к react отношения пока не имею, хотя в планах есть, я пишу для своей работы скрипт. Автоматизирую, проверки всякие. Тут для себя открыл, что реакт на ноде, сначала собирает в некоторый билд. ДЛя меня это было просто магией ( я так-то щупал реакт, но не серьёзно) Спасибо. Доступно, правда мне кажется порой с простотой перегнуто. Но интересно! Будет время, проведу инспекцию того, что есть на канале для себя интересного

  • @munutd9857
    @munutd98572 жыл бұрын

    Спасибо, выручил)

  • @serjdenisov2114
    @serjdenisov21143 жыл бұрын

    Круто, спасибо!

  • @user-nt6xu4rr5r
    @user-nt6xu4rr5r Жыл бұрын

    Огромное спасибо!!!👍

  • @osmanalbanski2523
    @osmanalbanski25238 ай бұрын

    Спасибо, единственное видео среди русско и англоязычного контента в котором я разобрался как создать сайт

  • @artem__k
    @artem__k7 ай бұрын

    Спасибос за инфу!

  • @elford9337
    @elford93372 жыл бұрын

    Лучший и почему я тебя раньше не нашёл

  • @kvadratikk3861
    @kvadratikk38612 жыл бұрын

    спасибо, очень помогло :)

  • @user-sj4oy1el5y
    @user-sj4oy1el5y3 жыл бұрын

    Спасибо Дэн!

  • @SKAZKAPAGE
    @SKAZKAPAGE Жыл бұрын

    Отец, всегда выручаешь

  • @yourbadapple
    @yourbadapple3 жыл бұрын

    СПАСИБО ОГРОМНОЕ!

  • @finger_colors
    @finger_colors8 ай бұрын

    От души!

  • @medovyichai
    @medovyichai Жыл бұрын

    ЧУВАК, ТЫ ЛУЧШИЙ

  • @demid088web
    @demid088web Жыл бұрын

    Спасибо за видео! Короче проще всего использовать Heroku, т. к. он универсальный!

  • @demid088web

    @demid088web

    Жыл бұрын

    Дааа.... Хероку забанился для России!

  • @burenkov
    @burenkov2 жыл бұрын

    Спасибо! мегаполезно!

  • @denlay8587
    @denlay8587 Жыл бұрын

    Благодарю!

  • @Kirill_Ateev
    @Kirill_Ateev3 жыл бұрын

    Спасибо!!! Скажите, что за расширение вы используете с автоматическим переводом выделенного?

  • @SSCAO
    @SSCAO3 жыл бұрын

    спасибо, помог👍

  • @mykhailostepanishchev6472
    @mykhailostepanishchev64723 жыл бұрын

    Топ контент

  • @user-kb7bp4wc8p
    @user-kb7bp4wc8p2 жыл бұрын

    Cпасибо! Ты топ!

  • @Sashaa
    @Sashaa Жыл бұрын

    спасибо бро😀

  • @user-yv4tn5ll9z
    @user-yv4tn5ll9z2 жыл бұрын

    Спасибо )

  • @user-xq3xm3lz3k
    @user-xq3xm3lz3k3 жыл бұрын

    Не ТУПО А ИСТИННО 100000 ЛАЙКОВ.

  • @DatoDavituliani
    @DatoDavituliani2 жыл бұрын

    Спасибо!!

  • @user-qh4zv9qc9h
    @user-qh4zv9qc9h2 жыл бұрын

    Делал для GitHub- с первого раза не получилось. Решил gh-pages закинуть в devDep -опять нет, потом по ошибками в консоли понял, что адрес оставил тот же, что и на репозиторий- невнимательность!!! нужно тот, которую предоставляет гитхаб для веба. Спасибо за контент!!!

  • @vladimirmuratov2220
    @vladimirmuratov22203 жыл бұрын

    Спасибо. Очень доступно объяснили 😊

  • @alexmarch

    @alexmarch

    Жыл бұрын

    да согласен

  • @Sergey30838
    @Sergey308382 жыл бұрын

    Спасибо большое)много раз помогал мне)Есть вопрос , как залить на хероку если у меня 2 json,(приложение с 2 языками)в 1 jsone русский во 2 инглиш)

  • @nickdunne1235
    @nickdunne1235 Жыл бұрын

    Спасибо.

  • @Zxc-on6jx
    @Zxc-on6jx2 жыл бұрын

    Спасибо

  • @morf1729
    @morf17293 жыл бұрын

    👍🏻

  • @bogdankalenichenko58
    @bogdankalenichenko583 жыл бұрын

    За видос спасибо, но если у меня файлы для бекенда лежат в отдельной папке? условно говорят у меня есть папка server(в которой лежит server.js) и client(по части фронта), то мне нужно указывать web: ./server/server.js ? Сделал так - ошибку выдает на хероку. Юзаю mongodb. Подскажи пожалуйста если знаешь

  • @BearVodkaAndValenki
    @BearVodkaAndValenki2 жыл бұрын

    11:43 Кантюн лоол)

  • @erlanchynybaev1097
    @erlanchynybaev10972 жыл бұрын

    спасибо

  • @AE-bx7nm
    @AE-bx7nm3 жыл бұрын

    Привет, Дэнис, у меня возникла проблема, делал все по твоему видео, а конкретнее с 32 минуты, когда деплоил проект на Heroku, я прошел твой курс по реакт пицце, но у себя сделал гамбургеры), проблема в том что мой загруженный проект отображает бургеры только когда я локально включаю сервер, если отключить редактор когда, снова нету отображения бургеров, подскажи, в чем может быть проблема?

  • @yngmayer_official
    @yngmayer_official3 жыл бұрын

    А куда видос про собес делся новый? Там где чистили gameboy?

  • @user-rp8oy2kf5d
    @user-rp8oy2kf5d2 жыл бұрын

    Прэт и тебе))

  • @user-nn6mb9tv1b
    @user-nn6mb9tv1b3 жыл бұрын

    чел все круто -- а можно еще видосик если не реакт приложение а одностраничник со скриптами или сайт на пхп с мускулом

  • @kirilllebedev4146
    @kirilllebedev41462 жыл бұрын

    это ёбаный ТОП!

  • @user-cw6hs7xf9t
    @user-cw6hs7xf9t3 жыл бұрын

    как раз закончил смотреть курс react pizza, надеюсь после этого ролика смогу залить этот проект.

  • @oleksandrlysiuk3971

    @oleksandrlysiuk3971

    3 жыл бұрын

    Сможешь, удачи)

  • @ArchakovBlog

    @ArchakovBlog

    3 жыл бұрын

    если не сможешь, то пиши тут. может я плохо объяснил и попробую текстом дополнить

  • @oleksandrlysiuk3971

    @oleksandrlysiuk3971

    3 жыл бұрын

    Archakov Blog сними про useMemo пожалуйста, было бы отлично от тебя ещё услышать об этом хуке)

  • @ArchakovBlog

    @ArchakovBlog

    3 жыл бұрын

    замётано)

  • @reznikkvova

    @reznikkvova

    3 жыл бұрын

    @@ArchakovBlog Привет! Не могу залить ReactPizza на GitHub. Предполагаю, что это из-за json-servera, пробовал добавить его в зависимости, не помогло. Не знаю что делать. Спасай!

  • @Rohan-Sensei
    @Rohan-Sensei9 ай бұрын

    По поводу git Pages, а что если у меня есть бекенд на локальном диске написанный на python? Как мне его задеплоить вместе с фронтендом?

  • @fazliddinnasrullayev6099
    @fazliddinnasrullayev6099 Жыл бұрын

    thank you

  • @evgeniykolmak5459
    @evgeniykolmak5459 Жыл бұрын

    При деплое на гитхаб, ветка называет «gh-pages” можно ли ее как то изменить? Или это обязательно?

  • @SpauN-
    @SpauN- Жыл бұрын

    А почему когда на github page заливаешь через npm run build всегда на гитхабе название коммита Updates ? Как самому писать название коммитов при такой загрузке?

  • @astkh4381
    @astkh4381 Жыл бұрын

    Привет мог бы ты снять видео как деполитизации приложение например node js + psql на vps?

  • @sergeyseredkin0702
    @sergeyseredkin07022 жыл бұрын

    Собираюсь залить разработанное погодное приложение работающие с историческими данными c openweathermap примерно 8700000 строк на postgresql в связки с node express как это залить на heroku ?В начале базу свою установить?

  • @user-tt4us7zg2y
    @user-tt4us7zg2y3 жыл бұрын

    Может кто подскажет, как правильно залить реакт приложение, которое я создал на купленный хостинг. Будет ли оно работать как spa или каждая страница будет перезагружаться? И можно ли вообще залить именно на хостинг, а не на выделенный сервер. Мне нужен свой домен, а не домен с хероку

  • @black_light
    @black_light Жыл бұрын

    У меня качели с роутингом) Не хочет отображаться главная страница при загрузке на gh-pages. После клика по навигации - всё работает. Может кто-то сталкивался - подскажите.

  • @_justadam_
    @_justadam_ Жыл бұрын

    А если залить на vercel реакт, он будет получать запрос с бэка на другом хостинге? Просто насколько я знаю gitpages не работает с запросами на node js

  • @xikikamori2327
    @xikikamori2327 Жыл бұрын

    я смог захостить его там но у меня не работает маршрутизация на сайте точнее работает только нужно перезагружать сайт почему так происходит и как исправить использовал vercel

  • @peschernuy
    @peschernuy2 жыл бұрын

    Подскажите почему после деплоя проекта на гитхаб пиццы не подгружаются, в проекте мы использовали npm i json-server и 3001 порт для фйек сервера, как сделать так чтоб после деплоя на гитхаб пиццы отображались и там. Может как то перенаправить их обратно на файдл db.json внутри проекта?

  • @user-kz3xe7ps9j

    @user-kz3xe7ps9j

    2 жыл бұрын

    получилось у тебя?

  • @shyngyskhanbokikhan6782
    @shyngyskhanbokikhan67822 жыл бұрын

    как появился файл scripts в react-pizza ?

  • @tollesch_tieries
    @tollesch_tieries Жыл бұрын

    Всем привет! Хочу создать веб приложение с базой данных. Я могу разместить сам сайт бесплатно на, например, Нетлифайе, и отдельно базу данных на каком-нибудь бесплатном хостинге? Это будет работать вместе? Заранее спасибо!

  • @nayorobi9960
    @nayorobi9960 Жыл бұрын

    Здравствуйте, извините, а как задеплоить многостраничный реакт проект?

  • @serhiiboiko3289
    @serhiiboiko3289 Жыл бұрын

    Привет, Heroku уже платный, подскажите каким бесплатным сервисом его можно заменить,чтоб залить backend часть проекта?

  • @andrTaylor
    @andrTaylor3 жыл бұрын

    Еле-еле залил на хостинг... Крч у кого траблы с деплоем пиццы чекайте следующее: 1) Если юзали yarn, то удалите package-json-lock так как он конфликтует с yarn.lock. 2) Обратите внимание на ключ homepage в packege-json. Я поставил так: "homepage": "." если его нет, то ок. 3) Удалите node_modules и выполните yarn команду(на всякий случай) После этого я всё-залил пиццу)

  • @user-mw1do5ly4s

    @user-mw1do5ly4s

    3 жыл бұрын

    Спасибо, помогло.

  • @andrTaylor

    @andrTaylor

    3 жыл бұрын

    @@user-mw1do5ly4s рад, что был полезен)

Келесі