使用 Angular 创建前端网站

概述

1. 创建新的 SaaS 项目
2. 编辑 .devcontainer/Dockerfile
3. 在 Dev Container 中重新打开项目
4. 删除 frontend 目录
5. 生成新的 Angular 前端
6. 构建前端
7. 编辑 config/development.yml
8. 启动 Loco

创建新的 SaaS 项目

1. 运行 loco new 以创建一个新项目
2. 按照指示操作，直到您到达决定要创建的项目类型的步骤
3. 选择 "SaaS app (with DB and user auth)" (SaaS 应用（带有数据库和用户认证）)

编辑 ".devcontainer/Dockerfile"

1. 打开 .devcontainer/Dockerfile
2. 将内容替换为以下内容：

FROM mcr.microsoft.com/vscode/devcontainers/rust:0-1

# 安装 postgresql-client 和 sea-orm-cli
RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
    && apt-get -y install --no-install-recommends postgresql-client \
    && cargo install sea-orm-cli \
    && chown -R vscode /usr/local/cargo

# 安装 Node.js 和 npm
RUN curl -fsSL https://deb.nodesource.com/setup_lts.x | bash - \
    && apt-get install -y nodejs
# 安装 Angular CLI
RUN npm install -g @angular/cli

COPY .env /.env

Dockerfile 将为您提供开发带有 Angular 前端的 Loco 应用所需的一切。

在 Dev Container 中重新打开项目

使用 VSCode，在 Dev Container 中重新打开和运行项目非常容易。

1. 按 Crtl + Shift + P
2. 选择 Dev Containers: Reopen in Container (Dev Containers：在容器中重新打开)
3. VSCode 将在 dev container 中打开项目。首次构建时，这可能需要一段时间。
4. 删除现有的 frontend 目录

Loco 自带 Vite React 前端。 我们可以删除整个目录，因为 Angular CLI 将设置我们需要的一切。

生成新的 Angular 前端

1. 从项目根目录执行 ng new frontend 以创建一个新的 Angular 项目
2. 按照指示操作

构建前端

1. 运行 ng build 以构建 Angular 前端

编辑 "config/development.yml"

您可能已经注意到 Angular 已将前端构建到 frontend/dist/frontend/browser 中。 我们现在需要配置 Loco 以从那里访问构建好的前端。

1. 打开 config/development.yml

2. 将配置设置为前端构建路径：

   a. server.middlewares.static.folder.path: "frontend/dist/frontend/browser"

   b. server.middlewares.static.fallback: "frontend/dist/frontend/browser/index.html"

启动 Loco

1. 使用 cargo loco start 启动 Loco
2. 打开 http://localhost:5150/

您现在应该看到 Angular 启动器网站 :smile: