React и Firebase са всичко, от което се нуждаете, за да хоствате вашите уеб приложения

Много от съвременните истории за уеб разработки нямат добри окончания поради сложния брой включени технологии и подхода за разработване, приет за свършване на работата.

Истинският въпрос е как можем да направим това пътуване по-малко болезнено или трябва да кажа по-ползотворно и ефективно? В идеалния случай избраните от нас технологии трябва да са добре установени и да имат голяма подкрепа от общността.

В тази статия ще разгледаме две технологии, които са много добре установени и имат силна подкрепа от общността, които ни позволяват да създаваме уеб приложения на живо по-ефективно.

Предпоставки:

  • Знаете някои React, поне основите
  • Имате инсталирани Node.js и NPM
  • Знаете как да използвате командния ред

И така, ето какво ще разгледаме днес:

  • Създайте просто приложение React с create-response-app
  • Влезте в конзолата на Firebase и създайте нов проект
  • Разположете го във Firebase хостинг с една проста команда

Когато първоначално се опитах да разгърна уеб приложение на React към хостинг на Firebase и исках да изтегля уеб приложениетои работи, се сблъсках с няколко препятствия. Разбрах, че може да е полезно да събера всички изследвания, които съм извършил, в изчерпателна статия, за да помогна на общността. Така че нека да започнем.

На високо ниво тази статия е разделена на три части:

  1. Вземете много основно приложение React на място
  2. Създайте акаунт във Firebase
  3. Свържете нашата конзола Firebase с нашето приложение React

Част 1 - Създайте приложението React

Вероятно знаете, че създайте-реагирайте-приложение myappе най-добрият начин да създадете основен шаблон за приложение React. Той не само създава много основен шаблон, но и добавя необходимите зависимости, необходими за изпълнението на React.

Ако не осъзнавате истинската магия и чистата сила на тази еднолинейна команда, опитайте да създадете директория за React от нулата. Само тогава ще осъзнаете истинската болка. Голям вик към разработчиците, които първоначално са настроили тази команда.

За да започнем, трябва да инсталираме приложение за създаване-реагиране на нашата машина.

$ 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 г., преди да бъде известен като Firebase, това беше стартиране, наречено Envolve. Включете се като продукт, предоставен на разработчиците с API, който позволява интегрирането на функционалността за онлайн чат в техния уебсайт.

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

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

След като беше придобит от Google през 2014 г., Firebase бързо се превърна в мултифункционалната гигантска мобилна и уеб платформа, каквато е днес.

Това едно изображение описва Firebase с цялата си мощ.

Вход за Firebase

Така че нека започнем с това: отидете на //firebase.google.com/ и влезте с вашия акаунт в Google. След като влезете, кликнете върху Отидете на конзолата . Ще ви бъде представена опция за Създаване на нов проект .

След като проектът бъде създаден, имате възможност да добавите Firebase към всяко мобилно приложение за Android или iOS и дори към уеб приложение.

Част 3 - Firebase & React

Кликнете върху опцията за добавяне на Firebase към вашето уеб приложение . Ще получите диалогов прозорец с кодов фрагмент.

Добавете този кодов фрагмент в дъното на вашия файл index.html във вашия проект. Уверете се, че този кодов фрагмент е добавен преди някой от другите маркери на скрипта във вашия файл index.html .

Ако се вгледате внимателно в изображението по-горе, можете да видите, че в долната част има някои връзки. Кликнете върху първата връзка и проверете „ Започнете с Firebase за уеб приложения“ . Ще ви бъде представен екранът по-долу.

Кликнете върху Започнете.

Отидете до вашата основна директория и въведете командата по-горе във вашия терминал. Това ще изтегли локално инструментите на Firebase на вашата машина.

Следващата и последна стъпка е да инициализирате Firebase и да разположите изходния код във вашата директория във Firebase.

След като натиснете финала и сте изпълнили всички стъпки по-горе и сте ги въвели във вашия терминал, трябва да имате списък с последните записи за разполагане, показани на уеб страницата.

Повторно посещение на React, както беше обещано

Не забравяйте, че в по-горната част на React казах, че ще се върнем и ще направим едно последно нещо Ще направим това сега.

Придвижете се до директорията, в която е създадено вашето приложение.

Начинът, по който React работи, е, че ви позволява да създадете версия за компилация. Това е много умалена версия на цялата библиотека с мамутски кодове, която създава, ако имате доста плътно приложение.

За да получим тази минимизирана и компресирана версия, можем да използваме нашия терминал и една много полезна команда:

$ npm run build

Това създава нова папка в директорията на приложението ви, наречена build . Тази папка съдържа няколко файла, които са най-важните части от цялото ви приложение React.

Заключение

Ако сте изпълнили внимателно всички стъпки и сте прочели малко от официалната документация, всичко това трябва да бъде разходка с торта.

Лично аз чувствам, че Firebase вече революционизира начина, по който разработчиците тестват и използват хостинга като услуга . Това е много по-опростен и спокоен начин за ефективно хостиране на вашите приложения, без да се задълбочавате в детайлите на хостинга.