Triển khai Angular Universal với Firebase

Lời nói đầu

Trong bài viết này, chúng ta sẽ khám phá cách kết hợp Firebase với Angular Universal để xây dựng một ứng dụng JavaScript tối ưu hóa cho công cụ tìm kiếm. Gần đây, Angular Fire đã cập nhật để hỗ trợ server-side rendering với Universal. Điều này có nghĩa là nội dung của ứng dụng của chúng ta có thể được hiểu bởi các công cụ tìm kiếm và được sử dụng bởi các bot liên kết mạng xã hội. Chúng ta cũng có thể tận dụng các lợi ích về hiệu suất tải trang nếu triển khai đúng cách.

Trước tiên, chúng ta sẽ tìm hiểu về khái niệm server-side rendering là gì và tại sao nó quan trọng. Sau đó, chúng ta sẽ đi sâu vào từng bước để xây dựng một ứng dụng Angular Universal từ đầu đến khi triển khai. Chúng ta sẽ sử dụng một bộ sưu tập các động vật lấy từ cơ sở dữ liệu Firestore để tạo nội dung cho ứng dụng.

Điều quan trọng là đảm bảo rằng ứng dụng của chúng ta đáp ứng yêu cầu về meta tags của các mạng xã hội. Chúng ta sẽ tạo một service trong Angular để hiệu quả thiết lập các meta tags này. Chúng ta cũng sẽ tạo một component để xử lý việc thiết lập các meta tags dựa trên các thông tin từ Firestore.

Cuối cùng, chúng ta sẽ cấu hình ứng dụng của chúng ta và triển khai nó sử dụng Angular Universal và ExpressJS. Chúng ta sẽ khám phá cách các công cụ tìm kiếm hiểu được nội dung của ứng dụng của chúng ta và xem liệu chúng ta có thể đạt được cải thiện về hiệu suất từ việc sử dụng server-side rendering.

Hãy bắt đầu bằng việc tạo một ứng dụng Angular mới và cài đặt các phiên bản mới nhất của Angular Fire và Firebase.

Bước 1: Chuẩn bị môi trường

1. Tạo mới một ứng dụng Angular bằng lệnh sau:

   ng new ten-ung-dung

2. Di chuyển vào thư mục ứng dụng mới được tạo:

   cd ten-ung-dung

3. Cài đặt Angular Fire và Firebase:

   npm install @angular/fire firebase

4. Tiếp theo, cài đặt firebase-tools để triển khai ứng dụng vào Firebase Hosting:

   npm install -g firebase-tools

Bước 2: Thiết lập Firebase và AngularFire

1. Tạo một dự án mới trên Firebase.
2. Trong thư mục gốc của ứng dụng, chạy lệnh:

   firebase login

3. Sau khi đăng nhập thành công, chạy lệnh sau để kết nối Firebase với dự án Angular:

   firebase init

4. Chọn Hosting từ danh sách các dịch vụ Firebase.
5. Chọn dự án Firebase bạn muốn liên kết với ứng dụng Angular.
6. Chỉ định thư mục dist/ten-ung-dung (với ten-ung-dung là tên thư mục gốc của ứng dụng Angular) khi được yêu cầu. Đây sẽ là thư mục mà Firebase Hosting sẽ triển khai.
7. Chọn Yes để thiết lập các luồng triển khai tự động.
8. Chạy lệnh sau để thiết lập AngularFire trong ứng dụng của bạn:

   ng add @angular/fire

9. Chạy lệnh sau để cài đặt các gói cần thiết khác:

   npm install express @nguniversal/express-engine

Bước 3: Thiết lập routing và cấu hình Firebase

1. Mở file src/app/app-routing.module.ts và thêm import sau:

   
   import { AngularFireAuthGuard, hasCustomClaim, redirectUnauthorizedTo, redirectLoggedInTo } from '@angular/fire/auth-guard';
   import { NgModule  from '@angular/core';
   import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [ // Các tuyến đường của ứng dụng { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, // ... ];

@NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

2. Mở file `src/app/app.module.ts` và thay đổi như sau:
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebaseConfig), // Thêm dòng này
    AngularFireAuthModule // Thêm dòng này
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. Mở file src/environments/environment.ts và thay đổi các thông tin cấu hình của Firebase:

   export const environment = {
   production: false,
   firebaseConfig: {
   // Thông tin cấu hình Firebase của bạn
   }
   };