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

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

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

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

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

Требования:

• Начальные знания React, хотя бы на базовом уровне
• Установленные Node.js и NPM
• Умение пользоваться командной строкой

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

• Сгенерируем простое React-приложение с помощь команды create-react-app
• Залогинимся в Firebase Console и создадим новый проект
• Задеплоим его на хостинг Firebase с помощью одной простой команды

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

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

Часть 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, прежде чем переходить к настройкам.

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

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

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

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

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

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

О Firebase наглядно

Вход в Firebase

Итак, начнем с самого простого: перейдите на страницу https://firebase.google.com/ и войдите в свою учетную запись Google. Когда вы войдете в систему, нажмите «Перейти в консоль». Вам будет предложено создать новый проект.

После создания проекта у вас есть возможность добавить Firebase в любое мобильное приложение Android или iOS и даже в веб-приложение.

Часть 3 — Firebase & React

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

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

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

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

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

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

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

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

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

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

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

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

$ npm run build

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

Заключение

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

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

Подписывайтесь на канал Nuances of programming , чтобы получать уведомления о новых полезных статьях