Хостинг для React приложений и не только… | Fox[CODE]

Итак, вот описание того, что мы будем делать сегодня:

Когда я впервые задеплоил (загрузил) React-приложение на хостинг Firebase и попытался запустить его, я столкнулся с рядом трудностей. Поэтому решил, что было бы неплохо изложить этот опыт в исчерпывающем руководстве, которым и спешу поделиться с сообществом. Итак, давайте приступим.

Эта статья состоит из трех частей:1. Создание простейшего приложения на React 2. Заведение Firebase аккаунта 3. Подключение Firebase-консоли к созданному React-приложению

React и firebase —это всё, что вам нужно для хостинга веб-приложений

Перевод статьи Ashish Nandan Singh: React and Firebase are all you need to host your web apps

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

Поэтому перед нами встает главный вопрос — как сделать это путешествие менее болезненным или даже, не побоюсь этого слова, более плодотворным и эффективным. В идеальной вселенной мы должны выбирать хорошо зарекомендовавшие себя технологии, которые, ко всему прочему, должны еще активно поддерживаться сообществом разработчиков.

В этой статье мы рассмотрим две технологии, которые как раз успели хорошо зарекомендовать себя на рынке веб-разработки и активно поддерживаются сообществом — эти два фактора помогут нам создавать веб-приложения более эффективно.

Возвращаемся к react, как и обещали

Помните, что в самом начале в части о React, я сказал, что мы еще вернемся к нему, чтобы сделать последний шаг? Так вот, этот момент настал.

Перейдите в папку, в которой создано приложение.

Один из принципов работы React — возможность кастомизировать сборку, то есть создавать очень сокращенную версию всех использованных библиотек, что оказывается крайне полезным, если в вашем приложении их много.

Чтобы получить такую миниатюрную и сжатую версию, мы можем набрать в терминале всего одну очень полезную команду:

$ npm run build

Она создаст новую папку с именем build в каталоге приложения . Эта папка содержит несколько файлов, которые являются наиболее важными частями всего вашего приложения React.

Вы не разработчик. у вас есть готовый сайт на reactjs.

Можно предположить, что раз ReactJS связан с javascript, то для его работы нужен вебсервер nodejs. Совсем не обязательно!

Более простым вариантом будет не использовать nodejs. Лучше использовать apache или nginx.

У нас на хостинге apache и nginx используются для сайтов на PHP. Это подойдет для нашей задачи.

Создадим новый сайт в панели управления:

Теперь нужно посмотреть на папку с сайтом на вашем компьютере.

Есть ли там папка build? Обычно проект на ReactJS выглядит так:

├── build ---нам нужно содержимое этой папки
├── node_modules
├── package.json
├── package-lock.json
├── public
├── README.md
└── src

Если папки нет, попросите разработчика сгенерировать папку build и передать ее вам.

Если вы разработчик, то создайте такую папку с сайтом, выполнив команду

npm run build

Подключитесь к хостингу по SFTP.

Загрузите содержимое папки build в каталог имя_сайта/www

Вы разработчик. будете разрабатывать сайт не на своем компьютере, а на хостинге.

Рекомендуем разрабатывать сайт на своем компьютере, а на хостинг загружать только готовую версию сайта из каталога build.

Краткая история

В 2022 году был запущен стартап под названием Envolve, который позднее прославился как Firebase. Envolve был продуктом, который предоставлял API, позволявший разработчикам интегрировать функции онлайн-чата на свой веб-сайт.

Компания заметила, что разработчики использовали Envolve не только для обмена сообщениями через чат, но и для синхронизации данных пользователей приложений в режиме реального времени, таких как состояние игры, к примеру.

Это заставило основателей Envolve, Джеймса Тамплина и Эндрю Ли отделить систему чата и режим работы в реальном времени. В апреле 2022 года Firebase была создана как отдельная компания, которая предоставляла Backend-as-a-Service функциональность в реальном времени.

После того как продукт был приобретен компанией Google в 2022 году, Firebase быстро превратился в многофункционального гиганта — платформу для разработки мобильных и веб-приложений, статус которой он сохраняет и по сей день.

Всю суть Firebase моно передать в одной простой картинке:

Создание проекта

Для начала нужно иметь зарегестрированный аккаунт в google. Есть такой?

Часть 1 — создание react-приложения

Вероятно, вы знаете, что лучший способ создать базовый шаблон для приложения React — это команда create-react-app myapp. Она не только создает простейший шаблон, но также добавляет зависимости, необходимые для запуска React.

Если вы пока не осознаете истинную магию и настоящюю силу этой одной строки, попробуйте создать каталог для React с нуля. Вот тогда вы сможете прочувствовать всю боль построения приложения с нуля. Низкий поклон тем разработчиком, которые смогли нас избавить от всей этой мороки благодаря созданию одной простой команды.

Чтобы начать работу, нам нужно запустить утилиту create-react-app

$ npm install -g create-react-app

Флаг -g в приведенной выше команде устанавливает пакетный менеджер NPM на машине глобально.

Как только это будет готово, мы воспользуемся им, чтобы получить базовый шаблон для React-приложения.

$ create-react-app myapp

С помощью этой команды мы создадим папку с именем myapp. Теперь нам нужно перейти в папку и выполнить приведенную ниже команду:

$ cd myapp
$ npm start

После того как вы введете команду выше, локальный сервер разработки должен запустить и отобразить стартовый экран приложения React по адресу localhost: 3000

Надеюсь, у вас получилось это выполнить легко и быстро. Теперь у нас остался последний шаг, который нужно сделать для создания веб-приложения. Но к нему мы вернемся позже. А сейчас давайте рассмотрим Firebase. После этого мы снова поговорим о React.

Часть 2 — настройка firebase

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

Firebase — это платформа для разработки мобильных и веб-приложений. Она предоставляет разработчикам множество инструментов и услуг, которые помогают им разрабатывать высококачественные приложения, расширять базу пользователей и получать больше прибыли.

Давайте посмотрим на историю Firebase, прежде чем переходить к настройкам.

Часть 3 — firebase & react

Нажмите на функцию «Добавить Firebase» в свое веб-приложение. Вы получите диалоговое окно с фрагментом кода.

Добавьте этот фрагмент кода в самую нижнюю часть файла index.html своего проекта. Убедитесь, что эта часть кода расположена перед всеми остальными скриптами файла index.html.

Если вы внимательно посмотрите на изображение выше, то заметите ссылки в самом низу. Нажмите на первую ссылку и посмотрите «Начало работы с Firebase для веб-приложений» (Get Started with Firebase for Web Apps). Перед вами появится экран, который представлен ниже:

Нажмите «Начать» (Get started).

Перейдите в свой корневой каталог и введите в терминал команду из картинки выше. Она загрузит инструменты Firebase на ваш компьютер.

Следующий и последний шаг — инициализировать Firebase и загрузить исходный код в каталог Firebase.

Как только вы нажмете Finish и выполните все шаги, перечисленные выше и введете всех указанные там команды в терминал, на экране вашего компьютера должен появиться список последних записей развертывания сайта:

Заключение

Если вы внимательно следовали всем шагам и параллельно почитывали официальную документацию, то для вас в этом не было ничего сложного.

По моим личным ощущениям, Firebase уже произвела революцию в том, как разработчики тестируют и используют хостинг как услугу. Это гораздо более простой и более легкий способ эффективного хостинга приложений, который помогает не вдаваться в детали и тонкости настройки хостинга.