Angular 5 рендеринг на стороне сервера с помощью Firebase – пошаговое руководство

Angular 5 рендеринг на стороне сервера с помощью Firebase – пошаговое руководство

От автора: AngularFire Lite – самая первая и на данный момент единственная библиотека, поддерживающая серверный рендеринг по умолчанию как для Firestore, так и Realtime Database. В библиотеке Angularfire2 есть и другие функции, такие как Storage, Observable based Transactions, Batched Writes и Cloud Messaging.

Чтобы использовать в Angular Firebase для рендеринга на стороне сервера, вам понадобится:

Angular 5

AngularFire Lite (легкая оболочка Angular Firebase API)

История про название: библиотеку назвали AngularFire Lite просто потому, что она на 50% легче Angularfire2. В отличие от цифры 2 в официальной библиотеке, здесь решили подбирать версии Angular, поэтому на данный момент это версия 5. Можете ознакомиться с библиотекой в ее репозитории.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Руководство

Шаг 1: установка зависимостей и генерация нового проекта Angular CLI:

Напоминание: установите nodejs отсюда и Angular CLI с помощью команды:

далее сгенерируйте новый проект:

установите следующие зависимости, которые нужны нам для серверного рендера:

Шаг 2: установка AngularFire Lite и Firebase

Смените директорию на папку проекта и установите оба пакета: Angularfire Lite и Firebase. Замечание: на момент написания поста в firebase sdk 4.8.1 есть проблемы, поэтому устанавливайте 4.8.0:

Шаг 3: создание нового проекта Firebase и получение учетных данных

Откройте в браузере https://console.firebase.google.com. Кликните на Add Project, укажите название проекта и далее Create Project:

Angular 5 рендеринг на стороне сервера с помощью Firebase – пошаговое руководство

Angular 5 рендеринг на стороне сервера с помощью Firebase – пошаговое руководство

Для получения учетных данных кликните на Add Firebase to your web app

Angular 5 рендеринг на стороне сервера с помощью Firebase – пошаговое руководство

Скопируйте только объект config

Angular 5 рендеринг на стороне сервера с помощью Firebase – пошаговое руководство

Шаг 4: сохранение учетных данных Firebase в проекте Angular

Откройте файл environment.prod.ts, расположенный в папке src/environments/environment.ts в редакторе и вставьте объект config, полученный из консоли Firebase внутрь своего объекта environment. Повторите то же самое для файла enviroment.ts:

Шаг 5: настройка AngularFire Lite и совместимость с Universal

Откройте корневой модуль app.module.ts и импортируйте AngularFireLite, передайте объект config, который мы храним в файле environment.

Чтобы AppModule был совместим с Universal, необходимо вызвать BrowserModule.withServerTransition и передать appId. Ваш модуль должен выглядеть так:

Шаг 6: создание серверного модуля и его экспорт

Создайте новый модуль в папке src/app и назовите его app.server.module.ts. Модуль должен импортировать ваш модуль ядра, за которым следует ServerModule из пакета @angular/platform-server (порядок важен).

Для поддержки модуля ленивой загрузки на сервере мы добавили Map Loader Module.

Очень важно импортировать ServerTransferStateModule, он необходим для AngularFire Lite, чтобы создавать переходы без мерцаний при первичной загрузке приложения на Angular. Офигеть!!

Чтобы экспортировать серверный модуль, создайте новый файл main.server.ts в папке /src и скопируйте в него следующую строку:

Шаг 7: создание tsconfig для пакета Universal

Просто скопируйте файл tsconfig, который Angular CLI генерирует (tsconfig.app.json в папке /src) и назовите новый файл tsconfig.server.json

Нужно сделать всего пару вещей

Сменить назначение модуля: с es2015 на commonjs, чей узел мы используем

Добавить angularcompilerOptions, чтобы компилятор знал о его модуле ввода AppServerModule. Мы используем хэш-символ в пути, чтобы достичь реального класса.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Шаг 8: настройка Angular CLI для создания серверного приложения

Откройте файл .angular-cli.json в корне проекта – это файл настроек Angular CLI, там описаны способы создания приложения.

Взгляните на массив apps – в нем хранятся записи, которые сообщают Angular CLI, как собрать клиентское приложение с помощью простой команды ng build.

В массив apps необходимо добавить новый объект, чтобы Angular CLI знал, как компилировать наше серверное приложение. Ваш массив apps должен выглядеть так:

В первой записи необходимо лишь изменить outDir на dist/browser, чтобы в этой папке хранился пакет клиентского приложения.

Во второй записи ssr мы говорим CLI, что необходимая нам платформа – это сервер, а наш пакет Universal должен быть в dist/server. Также это необходимо указать в tsconfig, который мы создали для сервера и главного файла сервера.

Шаг 9: подъем Express Server и использование Webpack

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

Создайте server.ts в корне файла проекта и файл webpack.server.config.js для упаковки файлы ts с помощью ts-loader, который мы установили ранее

Файл server.ts:

Файл webpack.server.config.js:

Шаг 10: скрипт NPM для пакета и использования приложения

Теперь нам осталось лишь добавить скрипт npm, чтобы сэкономить время написания длинной команды для создания приложения через CLI, запаковать в файл server.ts с помощью Webpack и запустить с помощью узла.

Скопируйте следующую команду в объект scripts в файл package.json:

Использование AngularFire Lite

Здесь мы не будем делать ничего сложного, просто распечатаем кое-какие данные из Firestore в тег header, но не уходите, скоро я выпущу новое пошаговое руководство по создания красивых приложений на AngularFire Lite, готовых к выкату в продакшн.

Если добавить документ и назвать его hello с полем firestore и значением Hello Firestore from AngularFire Lite, то его можно легко вытащить в app.component.ts следующим образом:

Импортируете AngularFireLiteFirestore и вставляете его в конструктор

Добавляете ссылку в хук жизненного цикла ngOnInt и вызываете метод read

Подписываетесь на компонент или шаблон с помощью async пайпа для получения данных

Ниже показан пример использования нескольких функций AngularFire Lite, среди которых Realtime Database, Firestore (читает и запаковывает записи) и authentication (не забудьте установить права на чтение и запись в панели управления Firebase в true чисто для теста).

И шаблон:

Наслаждайтесь серверным великолепием! Осталось лишь запустить

Откройте http://localhost:5000/, там должны появиться ваши данных, так как вы храните их в Realtime Database или Firestore. Если открыть исходный код, можно посмотреть реальный HTML.

Angular 5 рендеринг на стороне сервера с помощью Firebase – пошаговое руководство

Вы получаете преимущества в:

SEO и иконки социальных сетей на общем контенте

Меньше время загрузки (первый рендер/первая отрисовка)

Вам лень? Клонируйте демо репозиторий AngularFire Lite

Если вам немного лень, клонируйте демо репозиторий AngularFire Lite с GitHub по ссылке.

Что по поводу рендера с помощью Firebase Cloud Functions и firebase хостинга?

Эта статья входит в серию, и я обязательно расскажу про эти темы. Я хотел начать с базовых принципов серверного рендера и продемонстрировать, что AngularFire Lite действительно позволяет Angular Universal рендерить HTML, используя данные, хранящиеся в Firebase realtime database или firestore, в отличие от Angularfire2, который выбрасывает ошибку.

Если не хотите пропустить будущие руководства, подпишитесь. Вы будете получать уведомления при выходе новых статей. Увидимся!

Автор: Hamed Baatour

Источник: https://medium.com/

Редакция: Команда webformyself.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Angular 4 с Нуля до Профи

Angular 4 - полное руководство для современной веб-разработки

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree