Все, что вам нужно, это реагировать и Firebase

Автор оригинала: Yuriy Linnyk.

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

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

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

Предпосылки:

Вы знаете, что некоторые реагируют, по крайней мере, основы
У вас есть Node.js и NPM установлены
Вы знаете, как использовать командную строку, по крайней мере, основы

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

Войдите в консоль Firebase и создайте новый проект
Создайте простое приложение React Application с Create-React-App
Разверните его в хостинг Firebase с одной простой командой
Проводные данные в вашем приложении к базе данных FireBase

Вот несколько тем, которые не будут покрыты в этом руководстве:

Закрепите свои данные с правилами базы данных FireBase и FireBase Auth
Храните ваши изображения и другие файлы на хранилище FireBase
Заставьте свои приложения похожими как обычные веб-сайты с Reaction-маршрутом
Создать и администратор раздел или условно отображать инструменты редактирования
Используйте свой собственный домен

С небольшим количеством информации и опытом, вы должны иметь возможность выполнять эти задачи без проблем!

Войдите в консоль Firebase и создайте новый проект

Откройте свой браузер на firebase.google.com , Войдите в систему с вашей учетной записью Google, создайте новый проект и выберите имя для вашего нового веб-приложения. Firebase будет генерировать уникальный адрес для вашего веб-приложения и будет готов к его серверам.

Google достаточно щедрый, чтобы дать 1 ГБ хранилища бесплатно, поэтому вы не должны выходить из места в ближайшее время. Проверьте Стол цена Firebase также.

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

Если у вас нет Create-React-App установил еще, просто установите его с помощью NPM I -G Create-React-App Отказ

Теперь откройте вашу командную строку и CD в папку, где вы хотите, чтобы ваш проект был расположен на месте. Идти вперед и беги Create-React-App Firebase-and-rection , где «FireBase-and-React» – это имя вашего нового проекта – не стесняйтесь заменить его своим собственным.

После Create-React-App Это магия устанавливает все зависимости реагирования, CD в папку проекта и запустить NPM начать Отказ Это откроет ваш браузер к http://localhost: 3000 с демонстрационным приложением реагирования.

Разверните приложение к хостингу Firebase

Теперь мы собираемся развернуть наше приложение для хостинга Firebase.

Для этого нам нужно будет создать производственную сборку с NPM запустить сборку , который будет расположен в построить подпапка.

Чтобы иметь возможность развернуть наше приложение для хостинга Firebase, нам нужно иметь Интерфейс командной строки Firebase установлены. Это может быть установлено с NPM Установить -G FireBase-Tools команда.

После Firebase-Tools Был установлен, убедитесь, что вы в вашей папке проекта – продолжайте и запустите Firebase init Отказ Интерфейс командной строки Firebase проведет вас через подключение вашего локального проекта к вашему проекту FireBase.

Шаг 1: Выберите функции FireBase, которые вы хотите использовать. База данных и хостинг выбираются по умолчанию – все, что вам нужно сделать, это нажмите Введите идти на следующий шаг.

Шаг 2: Интерфейс командной строки FireBase подтянет ваш список проектов FireBase, где вы можете выбрать соответствующий проект, используя клавиши вверх и вниз.

Шаг 3: Сохраните значение по умолчанию для имени файла правил базы данных и просто нажмите Enter.

Шаг 4: Обратите внимание на вопрос об общественном каталоге, который является каталогом, который будет развернут и обслуживаться FireBase. В нашем случае это «сборка», которая находится в папке, где находится наша производственная сборка. Тип «строить» и продолжить.

Шаг 5: Firebase спросит вас, хотите ли вы настроить приложение в качестве одностраничного приложения. По умолчанию это «нет» – в нашем случае мы могли бы действительно воспользоваться конфигурацией, поэтому мы введем «y» и нажмите Enter. Позже вы сможете использовать React-Router, а URL-адреса просто будет работать.

Шаг 6: Firebase предупреждает нас, что у нас уже есть «build/index.html», что мы не хотим перезаписывать. Введите «n» и нажмите Enter, чтобы сохранить наш собственный «index.html», созданный нашим процессом сборки ранее.

Теперь мы готовы развернуть приложение! Мы сделаем это бегом Firebase Развертываете Отказ Через несколько секунд вы увидите URL-адрес – где размещено ваше приложение – вашего приложения. Это должно выглядеть что-то вроде «https://react-and-firebase–6bee.firebaseapp.com». Вы должны быть в состоянии открыть URL для просмотра вашего приложения.

Промыть и повторить

Разве это не интересно? Теперь мы можем вернуться к нашему приложению сейчас, внесите изменения, построить его с помощью NPM запустить сборку и загрузите новую версию с Firebase Развертываете любое время. Там нет необходимости развертывать во время развития, хотя база данных FireBase работает хорошо с localhost.

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

Чтобы включить NPM запустить развертывание Команда, Открыть Package.json и добавить «Развертывание»: «Развертывание FireBase» к Сценарии объект. Мы будем использовать эту команду из сейчас.

Проводные данные в вашем приложении к базе данных FireBase

Чтобы использовать базу данных FireBase в нашем приложении React, нам нужно будет импортировать библиотеку JavaScript FireBase JavaScript и настроить его с нашими ключами приложений FireBase, которые можно найти в Консоль Firebase Отказ Откройте свой проект в разделе Обзор, нажмите на красную кнопку, которая написана «Добавить Firebase в ваше веб-приложение», и вы увидите ключи, которые нам нужно будет использовать.

Убедитесь, что вы не спешите скопировать все предоставленные код, мы сделаем это немного по-другому – мы включаем пакет FireBase в нашем приложении React.

Откройте командную строку в вашем проекте DIR и установите пакет FireBase в проект, запустив NPM установить -S FireBase Отказ Не путайте это с тем, что мы сделали ранее. Мы просто устанавливаем наш проект, чтобы быть развернутым для хостинга Firebase – нам не обязательно нужно использовать FireBase в нашем внешнем приложении.

Теперь мы будем использовать его, создавая файл – я назову это Fire.js в нашем SRC папка.

import firebase from 'firebase'
var config = { /* COPY THE ACTUAL CONFIG FROM FIREBASE CONSOLE */
  apiKey: "unreadablestuff",
  authDomain: "your-domain-name.firebaseapp.com",
  databaseURL: "https://your-domain-name.firebaseio.com",
  storageBucket: "your-domain-name.appspot.com",
  messagingSenderId: "123123123123"
};
var fire = firebase.initializeApp(config);
export default fire;

Теперь мы готовы использовать базу данных FireBase, Auth, а также хранение в нашем приложении в интернет-приложении!

Прежде чем мы сможем на самом деле использовать базу данных FireBase

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

Если это ваше первое введение в правила FireBase, я предлагаю вам начать с определения совершенно безответственных правил, которые позволяют всем прочитать и писать. Вы научитесь понимать аутентификацию и правила позже: firebase.google.com/docs/database/security/

Но на данный момент открыть database.rules.json Файл в любом редакторе и заменить «Аутет» с просто правда :

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

Беги NPM запустить развертывание Чтобы применить новые правила базы данных.

Это отключит какую-либо защиту данных вашей базы данных, что поможет вам привыкнуть к тому, как работает Firebase.

Какая-то база данных raction и firebase

Теперь пришло время сделать некоторые чтение и запись в нашем приложении React, поэтому давайте отправимся в нашу App.js Импорт наших огонь и делайте немного магии.

Для наиболее основного примера у нас будет входное поле, которое сохранит сообщение в базе данных FireBase и список введенных сообщений. Нам придется остановиться там, потому что написание полного приложения React – за пределами объема этой статьи. Вы будете свободны, чтобы раскрыть ваше творчество с новыми знаниями под рукой!

Вот что я придумал:

import React, { Component } from 'react';
import fire from './fire';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { messages: [] }; // <- set up react state
  }
  componentWillMount(){
    /* Create reference to messages in Firebase Database */
    let messagesRef = fire.database().ref('messages').orderByKey().limitToLast(100);
    messagesRef.on('child_added', snapshot => {
      /* Update React state when message is added at Firebase Database */
      let message = { text: snapshot.val(), id: snapshot.key };
      this.setState({ messages: [message].concat(this.state.messages) });
    })
  }
  addMessage(e){
    e.preventDefault(); // <- prevent form submit from reloading the page
    /* Send the message to Firebase */
    fire.database().ref('messages').push( this.inputEl.value );
    this.inputEl.value = ''; // <- clear the input
  }
  render() {
    return (
      
         this.inputEl = el }/>
        
        
          { /* Render the list of messages */
            this.state.messages.map( message => {message.text} )
          }
        
      
    );
  }
}

export default App;

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

Вы можете развернуть его в свой онлайн URL с помощью NPM Run Build && NPM Run Развертывание И это должно работать там.

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