Angular Frontend

+++ title = "Creating Frontend Website Using Angular" description = "Setting up a Loco app for serving an Angular clientside app is easy. Learn how to configure and set up a full-stack Angular app with Loco." date = 2024-01-25T18:03:52+01:00 updated = 2024-01-25T18:03:52+01:00 draft = false template = "blog/page.html"

[taxonomies] authors = ["LimpidCrypto"]

+++

Overview

1. Create new SaaS project
2. Edit .devcontainer/Dockerfile
3. Reopen the project in the Dev Container
4. Delete frontend directory
5. Generate new Angular frontend
6. Build frontend
7. Edit config/development.yml
8. Start Loco

Create new SaaS project

1. Run loco new to create a new project
2. Navigate through the instructions until you reach the point where to decide what type of project to create
3. Select "SaaS app (with DB and user auth)"

Edit ".devcontainer/Dockerfile"

1. Open .devcontainer/Dockerfile
2. Replace the content with the following:

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

# Install postgresql-client and 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

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

COPY .env /.env

The Dockerfile will provide you with everything you need to develop a Loco app with an Angular frontend.

Reopen the project in the Dev Container

With VSCode it is super easy to reopen and run the project in a Dev Container.

1. Press Crtl + Shift + P
2. Select Dev Containers: Repopen in Container
3. VSCode will open the project in the dev container. This can take a while when it is built for the first time.
4. Delete the existing frontend directory

Loco comes with a Vite React frontend. We can delete the whole directory because the Angular CLI will set up everything we need

Generate new Angular frontend

1. From the project root execute ng new frontend to create a new Angular project
2. Navigate through the instructions

Build frontend

1. Run ng build to build the Angular frontend

Edit "config/development.yml"

As you may have noticed Angular has built the frontend into frontend/dist/frontend/browser. We now need to configure Loco to access the built frontend from there.

1. Open config/development.yml

2. Set the configs to the frontend build path:

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

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

Start Loco

1. Start Loco with cargo loco start
2. Open http://localhost:5150/

You should now see the Angular starter Website :smile: