Как соеденить frontend и backend в рамках одного проекта ? React.js / Express.js. Fullstack

Поділитися
Вставка
  • Опубліковано 19 січ 2025

КОМЕНТАРІ • 98

  • @maybe9375
    @maybe9375 2 роки тому +20

    Однозначный лайк. Сколько не читал, не мог сообразить как идет связка. Теперь наконец-то все стало на свои места. Подписка однозначно, больше таких простых примеров, и общее представление о web будет более понятным!

  • @yatut4467
    @yatut4467 3 роки тому +36

    Спасибо, пример, конечно, синтетический, но показывает, что все проще, чем казалось) Пожалуй, подпишусь:)

    • @lets_try_js
      @lets_try_js  3 роки тому +6

      ну тут и была задача показать как в принципе это работает )
      если нужно более глубоко то есть ролик по MERN
      там полноценное Fullstack приложение
      скоро выйдет обновленная и расширенная версия по MERN

  • @АндрейСтепанов-л3о
    @АндрейСтепанов-л3о 2 роки тому +14

    Так просто и доходчиво объясняешь)) Большое человеческое спасибо:)) (однозначно = лукас + подписка)

  • @tgcsat8878
    @tgcsat8878 Рік тому +1

    Перечитал кучу нагугленных статей, а здесь в 1 видео всё что нужно по данному вопросу! Спасибо!

  • @juniorit7940
    @juniorit7940 2 роки тому +3

    '-', это просто гениальное видео... Я смог за 9мин узнать как объединить back и front!!!

  • @radist126
    @radist126 2 роки тому +3

    Афигенный ролик. Я как раз прошел уроки Реакт, стейты, Экспресс и искал, как это собрать в кучу все.

    • @lets_try_js
      @lets_try_js  2 роки тому +1

      тогда на канале есть видео про фуллстек приложение на этом стеке

  • @aleksandrstoliarov7572
    @aleksandrstoliarov7572 3 роки тому +2

    Огромное спасибо , я столько перерыл информации , но нигде не находил ответа на вопрос , о том как соединять front и back

  • @Cat-zh6xx
    @Cat-zh6xx Рік тому

    Из-за обилия инфы уже запутался, а данный видос расставил все на свои места, спасибо :) Пошел тыкать бэк

  • @script2049
    @script2049 3 роки тому +6

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

  • @nursultanbolotuulu1932
    @nursultanbolotuulu1932 2 роки тому +1

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

  • @ВладимирАбрамкин-в3с

    Большое спасибо. Очень пригодилось данное видео. Кратко и просто, но весьма полезно.

  • @tigranoqroyan-qo4wg
    @tigranoqroyan-qo4wg 8 місяців тому

    Просто огромный респект тебе 🔥 . Целый день искал способ, наконец то нашёл.

  • @abobaaboba3888
    @abobaaboba3888 2 роки тому

    Спасибо! то что я искал, без воды и лишнего кода)

  • @ЕвгенийУрусов-ш2й
    @ЕвгенийУрусов-ш2й 2 роки тому

    Спасибо большое за видео, как раз начинаю первый раз дружить frontend и backend, теперь знаю куда капать

  • @Rvovl
    @Rvovl Рік тому +1

    Спасибо, что ты существуешь

  • @Virisound
    @Virisound Рік тому

    Искренне спасибо, тебе Человек). Благодаря этому видео я, словно, взлетел. Так как плаваю на дне теории уже года 2, но сегодня я решил задать запрос про стыковку ф и б и ... Наконец мои муки были не напрасны... Я вижу свет в контакте туннеля, ура! Спасибо за то, что ёмко всё все объяснил и так понятно. Сабскрайбд и лайк.

  • @matvew-2025
    @matvew-2025 12 днів тому

    здравствуйте очень круто!
    Теперь все понятно стало
    Подпишусь/>

  • @РадмилаХолназарова

    Огромное человеческое спасибо!!Реально помог!

    • @lets_try_js
      @lets_try_js  3 роки тому +1

      Если это видео тебе помогло, то посмотри мое видео по MERN стеку, там это все примеряется на практике ))

    • @РадмилаХолназарова
      @РадмилаХолназарова 3 роки тому +2

      @@lets_try_js как называется видео

    • @lets_try_js
      @lets_try_js  3 роки тому +1

      @@РадмилаХолназарова
      MERN быстрый курс для новичков. MongoDB/Express/React/Node. Fullstack приложение.

  • @Andrew-xc9fh
    @Andrew-xc9fh 3 роки тому +2

    Простой и очень полезный видос, спасибо

  • @saschashow8908
    @saschashow8908 11 місяців тому

    Классно 👍🏻 Просто и понятно

  • @kebab_stroy
    @kebab_stroy 11 місяців тому +2

    Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
    - options.allowedHosts[0] should be a non-empty string. Почему это выдает?

  • @timredrick310
    @timredrick310 3 роки тому +2

    спасибо огромное! Просто и доступно

  • @teosurch
    @teosurch 3 роки тому +2

    Спасибо за видео!

  • @slava_tfdf
    @slava_tfdf Рік тому

    Спасибо за весьма наглядный пример 👍

  • @evgeny9945
    @evgeny9945 2 роки тому +1

    Спасибо тебе огромное! Подписка

  • @vi6Dim
    @vi6Dim 8 місяців тому

    спасибо за труд. Сделай плиз видео где будет:
    1. база данных (mongo)
    2. Сервер на Node
    3. и фронт на React
    и небольшое приложение по добавление поста, удалению и изменению.
    было бы очень круто, и полезно такое посмотреть. а то приходиться собирать знания по частям. Там Mongo, там Node ...

  • @bulgarsky
    @bulgarsky 4 місяці тому

    c VITE сборкой не прокатывает такое, не дает обоим работать на одном порту ( бэк перестает работать), даже если прописать прокси в vite.config.js. При сборке create-react-app (webpack) работает

  • @snake5614
    @snake5614 Рік тому

    Спасибо большое! Однако подписка и лайк)!

  • @ДимашИсабек
    @ДимашИсабек Місяць тому

    Как я понял в бэк мы пишем данные в формате json а в фронте мы используем fetch а потом переводим в json формат потом используем да?

  • @Frontend-Developer-UA
    @Frontend-Developer-UA 3 роки тому +1

    Очень круто

  • @temadev1750
    @temadev1750 2 роки тому

    Спасибо брат )

  • @andreywinchester8995
    @andreywinchester8995 2 роки тому

    спасибо братик)

  • @ДжейЛоло
    @ДжейЛоло Рік тому

    Очень-очень хороший урок. Спасибо.
    А есть ли у вас урок про то, как залить на хостинг и фронтенд, и бэкенд?

    • @lets_try_js
      @lets_try_js  Рік тому

      да, где-то был на канале)

  • @zelear_music
    @zelear_music 2 роки тому +1

    Когда я пишу proxy, то я получаю ошибку invalid host header, как это решить?

  • @mariasukhanova96
    @mariasukhanova96 Рік тому

    Спасибо!

  • @Virisound
    @Virisound Рік тому

    Фуллстек mern буду делать по твоему ролику, тоже заинтересовал.

    • @lets_try_js
      @lets_try_js  Рік тому +1

      там их два. рекомендую крайний)

    • @Virisound
      @Virisound Рік тому

      @@lets_try_js спасибо за совет. )

  • @CringeGenerator228
    @CringeGenerator228 2 роки тому

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

  • @egorkolev
    @egorkolev Рік тому

    спасибо, у меня проблемка, фронтенд на react, nodemailer на node.js тоже 2 хоста - 3000 и 3001 и все работает на локал, но как мне задеплоить проек бекенд и фронтенд на web server ? там он не слушает порт 3001! спасибо за видео и если сможешь ответить

    • @lets_try_js
      @lets_try_js  Рік тому

      зависит от сервера, везде по разному

    • @egorkolev
      @egorkolev Рік тому +1

      Сразу все стало на свои места, спасибо 😅

  • @NikK0lay
    @NikK0lay Рік тому

    Когда прошёл курсы, нифига не понимаешь в программировании но строишь из себя it блоХера

  • @SNSDfOu
    @SNSDfOu Рік тому +1

    спасибо, а с java бекэндом как связать ?

    • @lets_try_js
      @lets_try_js  Рік тому

      никогда не работал с java
      только javascript и немного python

    • @SNSDfOu
      @SNSDfOu Рік тому

      @@lets_try_js жалько, а то мне дали задачку

  • @nikitaermolenko7813
    @nikitaermolenko7813 2 роки тому

    Есть стандартизированный способ который используют все для react + PHP?:)

    • @lets_try_js
      @lets_try_js  2 роки тому

      Никогда не работал с пхп, так что хз

  • @Влэйпи
    @Влэйпи 3 роки тому +1

    спасибо

    • @lets_try_js
      @lets_try_js  3 роки тому

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

    • @angrysmilex
      @angrysmilex 3 роки тому

      @@lets_try_js Спасибо за видео. А можно ли такое приложение деплоить на GitHub? Вместо путей локалхоста нужно пути с github pages прописывать?

    • @lets_try_js
      @lets_try_js  3 роки тому

      @@angrysmilex у меня на канале есть видео, о том как задеплоить такое приложение. посмотрите

  • @LetroScript
    @LetroScript Рік тому

    А что я если хочу, чтобы был мой фронтед на ts + react, а бэкенд только на js?

    • @lets_try_js
      @lets_try_js  Рік тому

      Смысл будет тот же, только это не имеет смысла, это как выстрел себе в ногу, когда есть тот же express или куда мощный nest

    • @LetroScript
      @LetroScript Рік тому

      @@lets_try_js а нужно ли скачивать typescript в бэкенд?

  • @МихаилПоликарпов-ф4м

    попытался сделать тоже самое через связку webpack, react,express. бэк у меня на порте 3001, react на порте 3000. запросил json-формат - вывел ошибку "Uncaught (in promise) SyntaxError: Unexpected token '

    • @lets_try_js
      @lets_try_js  Рік тому

      Прокси сервер прописали для фронта?

    • @МихаилПоликарпов-ф4м
      @МихаилПоликарпов-ф4м Рік тому

      @@lets_try_js прописал в девсере вебпака следующее:
      devServer:{
      port:3000,
      compress:true,
      proxy: { "/api/**": { target: 'localhost:3001', secure: false } }
      как раз последнего ключа не хватало. спасибо за наводку

  • @zogamerom218
    @zogamerom218 2 роки тому

    а с react native express работает?

  • @Mister-Petrovich
    @Mister-Petrovich 2 роки тому

    В какой программе это все делается?

    • @lets_try_js
      @lets_try_js  2 роки тому +1

      по разному)
      конкретно тут я использую VS Code

  • @dmitruz1900
    @dmitruz1900 2 роки тому

    как наоборот отправить даные на бекенд?

  • @eduardchagirov828
    @eduardchagirov828 3 роки тому

    Так в продакшн сборке работать не будет же

    • @vorova
      @vorova 3 роки тому

      В продакшене не работает.. знаешь как сделать чтобы работало?

    • @lets_try_js
      @lets_try_js  3 роки тому

      есть на канале ролик про деплой приложения на Netlify и Heroky

  • @ПавелИльин-я6е
    @ПавелИльин-я6е 2 роки тому +1

    777 лайков)

  • @I_ne_rei
    @I_ne_rei 2 роки тому

    Помогите fetch всеравно делает запрос на localhost:3000

    • @lets_try_js
      @lets_try_js  2 роки тому

      Прокси сервер настроили ?

    • @I_ne_rei
      @I_ne_rei 2 роки тому

      @@lets_try_js да , я смог исправить ошибку переходом на axion

  • @AndrewLapteff
    @AndrewLapteff Рік тому

    афигеть

  • @НикитаХрущев-х7я
    @НикитаХрущев-х7я 2 роки тому

    Ну хоть кто-то обьяснил. Хоть я и далек от js, но и то понял

  • @soup7586
    @soup7586 2 роки тому

    После того как указал ключ proxy и значение в package.json в папке frontend, когда пытаюсь запустить выводит ошибку "Invalid options object. Dev Server has been initialized using an options object that does not match the API schema."

    • @pashastrayt8928
      @pashastrayt8928 2 роки тому

      Тоже мучился с этой проблемой. Нужно по адресу create-react-app/packages/react-scripts/config/webpackDevServer.config.js / в файле allowedHosts установить значение 'all'

  • @marlonbrando458
    @marlonbrando458 3 роки тому

    Крч надо прокси написать, спасибо

  • @UchimVmeste.
    @UchimVmeste. 2 місяці тому

    Это не работает в 2024 году

  • @ЕвгенийЛ-м1р
    @ЕвгенийЛ-м1р 5 днів тому

    просто код читает, как книгу.

  • @mike-aaa
    @mike-aaa Рік тому

    9 минут про строчку с прокси??

  • @olegonkos
    @olegonkos 11 місяців тому

    ни хера не понял, но интересно. Я тут JS изучаю, а посмотрев это видео ни хрена не понял.

    • @delovoy_mikhail
      @delovoy_mikhail 11 місяців тому

      Напиши сначала калькулятор. И ваще, в it, если прям ничего не понятно, то ты пытаешься прыгнуть выше головы и без каких-либо базовых знаний сразу начать разбираться во всём. Нужно маленькими шагами и не перепрыгивать с темы на тему со скоростью света.

  • @ilyakorepanov5983
    @ilyakorepanov5983 2 роки тому +3

    спасибо за видос, всё работает, НО
    почему в заголовках запроса /api отображается - "localhost:3000/api", когда сервер на 3001 порте? (304 запрос)

    • @I_ne_rei
      @I_ne_rei 2 роки тому

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

    • @ilyakorepanov5983
      @ilyakorepanov5983 2 роки тому

      @@I_ne_rei друг, давно очень было
      Не помню как решил, игрался с конфигами

  • @mirwill6940
    @mirwill6940 6 місяців тому

    я один одаренный облочным преставдлением ? -что не фига не ясно как первый раз отдается целое приложение? - если одним фалом то как понимать фронтенд ...нифига не ясно

  • @user-pi1mn3wb6r
    @user-pi1mn3wb6r Рік тому +1

    Огромное спасибо, очень полезное видео!!

  • @rex_lapin
    @rex_lapin Рік тому

    От души братан спасибо большое !

  • @ОлегПетров-п4у
    @ОлегПетров-п4у 2 роки тому

    Спасибо за видео!

  • @lilrhymes1353
    @lilrhymes1353 Рік тому

    Спасибо🙏

  • @Vlad-sw4zd
    @Vlad-sw4zd 2 роки тому

    Спасибо