В последнее время я много слышал о Firebase. Я посмотрел на него и моей первой мыслью было «Вау, это хорошо выглядит для создания приложения после стадии прототипирования». Потому что вам не нужно думать о серверной архитектуре, и вы можете просто сосредоточиться на том, какой сервис вы собираетесь предоставлять. И, вдобавок ко всему, Firebase запускается бесплатно!

Vue.js - мой любимый фреймворк. С Vue.js. так легко создать пользовательский интерфейс веб-приложения. Nuxt.js использует технологию Vue.js, чтобы сделать возможным SSR (рендеринг на стороне сервера). Я считаю, что сочетание Firebase и Nuxt.js позволяет мгновенно создавать веб-приложения.

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

В этом посте я использую Терминал на своем Mac. vim - мой редактор. Когда вы видите это в этом руководстве, вы можете просто подумать, что это открытие редактора и редактирование файла. Моя версия узла - 8.11.2, и мне нравится использовать пряжу. yarn add совпадает с npm install —-save, если вы используете npm.

Я хотел бы покинуть репозиторий, созданный с помощью этого руководства: https://github.com/wataruoguchi/nuxtjs-firebase-example

1. Создайте каталог проекта.

<proj> может быть названием вашего проекта. Этот каталог будет корневым каталогом проекта.

2. Настройте Nuxt.js.

Давайте установим vue-cli, который позволяет запускать команду vue. Установка пряжи необязательна. Затем инициализируйте свой проект в папке src с шаблоном.

3. Отредактируйте домашнюю страницу.

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

pages/index.vue будет выглядеть так:

Это просто! Просто отображается список, полученный с https://nuxt-ssr.firebaseio.com/facts.json

Давайте отредактируем файл конфигурации для создания приложения.

Добавьте следующий блок кода в узел build.

4. Запустим на localhost.

Поздравляю! Вы должны увидеть это в http: // localhost: 3000! Если вы видите страницу с View Page Source, вы можете сказать, что это SSR!

5. Используйте Babel для поддержки старых браузеров.

Нам необходимо поддерживать не только новейшие браузеры, но и более старые, такие как IE. Babel - это инструмент, который вы хотите использовать.

Nuxt.js необходимо знать об их существовании. Давайте отредактируем файл конфигурации.

Кроме того, в том же файле вы хотите обновить vendor следующим образом:

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

6. Настройте Firebase.

У Firebase есть отличная документация, я бы просто просмотрел ее. Но вот что я сделал:

Он говорит вам открыть https://console.firebase.google.com в какой-то момент. Откройте его в своем браузере.

Затем добавьте проект в свою консоль.

7. Настройка облачных функций.

Давайте настроим облачные функции. Он используется для SSR. Работа на стороне сервера должна выполняться этими облачными функциями на базе Firebase.

Добавьте эту строку на верхнем уровне.

Затем перейдем к functions и поработаем там

Добавьте "engines": { "node": "8"} на верхнем уровне. Затем вы можете включить узел 8 в Firebase. "Узнать больше"

Затем добавьте все пакеты, которые есть в src/package.json

Теперь вы должны увидеть каталог nuxt в каталоге functions.

8. Запустите Nuxt.js с помощью облачных функций.

Мы хотим обслуживать статические активы со статического сервера. Давайте скопируем статические ресурсы из functions и сохраним в public/assets.

functions/index.js будет выглядеть так, как показано ниже. Приложение отправляет запрос и позволяет Nuxt визуализировать ответ.

9. Обслуживайте статические ресурсы с помощью хостинга Firebase.

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

Теперь каталог public создан. Давайте скопируем статические объекты сюда

10. Давайте развернемся!

Обновите rewrites под hosting. Посмотрите, как это будет выглядеть:

Окей круто. Давайте запустим firebase на localhost.

Это займет немного времени. Когда вы увидите, что функции стали зелеными, откройте http: // localhost: 5000. Вы должны увидеть эту страницу в своем браузере.

Однако у нас все еще есть ошибки в окне консоли. Давайте исправим их.

Измените publicPath с /public/ на /

То же самое для functions/index.js

Перейдем к src и снова создадим приложение.

Снова откройте http: // localhost: 5000. Надеюсь, вы не увидите ошибки в окне консоли в своем браузере.

Наконец, приступим!

Подождите, пока не появится сообщение «✔ Развертывание завершено!» сообщение. Затем посетите «URL-адрес хостинга:». Вы видите страницу, которую создали? Поздравляю!

Не могу поверить, что развернуть приложение SSR так просто. Какую эпоху мы живем! Такая быстрота будет полезна для хакатона или создания альфа-версии приложений. Я хотел бы какое-то время насладиться Nuxt.js и Firebase.

Спасибо за чтение, удачного кодирования!