What is this?

Angular NgRx powered frontend template project for Symfony Flex Backend or any other backend that is providing similar API.

This application is meant to be used as a standalone SPA frontend that consumes REST APIs. The default target backend for local development is symfony-flex-backend, but you can use any backend that provides a compatible API.

Quick Start

git clone https://github.com/tarlepp/angular-ngrx-frontend.git
cd angular-ngrx-frontend
make start

Then open https://localhost:4200 in your browser. For more details, see Installation.

Table of Contents

• What is this
  • Table of Contents
  • Requirements
    • Recommendations
  • Installation
    • 1. Clone repository
    • 2. Start containers
  • Running the application
    • Using application
    • Getting shell to container
    • Building containers
    • Health check
  • Dev Containers
  • Backend?
• Resources
  • External links / resources
  • Authors
  • License

Requirements

• Docker Engine
• Docker Compose v2 (included with Docker Desktop)

Recommendations

• *nix platform - most likely you're going to host your application on *nix platform - so I would recommend to do development also on that platform.
• WSL2 on Windows - if you develop on Windows, use WSL2 to get a Linux-like development environment for Docker and tooling.
• Dev Container capable IDE - recommended for the quickest setup (e.g. VS Code or JetBrains IDEs with Dev Container support).
• Makefile support - recommended if you run containers with Make commands; if you do not have make, check Makefile to see equivalent Docker commands.

Installation

This installation guide expects that you're using Docker Engine.

1. Clone repository

Use your favorite IDE and check out the repository from GitHub, or use the following command:

git clone https://github.com/tarlepp/angular-ngrx-frontend.git

2. Start containers

You can run this project either with Dev Containers (for example in VS Code or JetBrains IDEs) or with Make commands.

For Dev Containers, open this repository in your IDE and use its Dev Container workflow to reopen/start the project in a container (see Dev Containers section for details).

If you want to use Make commands instead, run the following command:

make start

This command will create one (1) Docker container where your application is running on development stage.

For next steps (application URL, shell access, rebuilding containers, and a quick health check), see Running the application.

Running the application

These instructions are shared for both Make-based and Dev Container-based workflows.

Using application

By default make start starts the Angular development server inside the Docker container and exposes the following port on localhost on your host machine (note that the application is using HTTPS):

• angular-ngrx-frontend - https://localhost:4200 (Angular Live Development Server)

And this application is usable in your browser at https://localhost:4200. When you open that site for the first time, you will see a "Your connection is not private" warning - see this to resolve that.

Note that this frontend application assumes that your backend is running on https://localhost:8000 address. Also note that "default" backend is running on that address by default.

Getting shell to container

After you've started the container (make start or via Dev Containers), you can list all running containers with docker ps.

To get shell access inside the container, run the following command:

make bash

If you are using Dev Containers, you can also use the IDE terminal that is already attached to the node container.

Building containers

From time to time you probably need to build containers again. This is something that you should do every time if you have some problems getting containers up and running.

If you use Make commands, rebuild/start the development container with:

make start-build

If you want to start the application locally with the production-like Angular configuration, use:

make start-production

If you use Dev Containers, use your IDE's Dev Container rebuild action (for example, "Rebuild Container" / "Rebuild and Reopen in Container").

Health check

To verify your setup is working correctly, you can check:

# Check container status
docker compose ps

# Test HTTPS endpoint (ignore SSL warning)
curl -k -I https://localhost:4200

Dev Containers

This project also supports opening the repository directly in a Dev Container for IDE workflows.

• VS Code: use Dev Containers: Reopen in Container.
• JetBrains IDEs: open the project using Dev Container support if available in your IDE version.

When using a Dev Container, start the Angular development server inside the container and use the IDE forwarded port for https://localhost:4200.

Quick start inside the Dev Container:

make start

In VS Code, you can run the same command via Tasks: Run Task using Dev Container: Start Angular (dev).

For local production mode inside the Dev Container, use:

make start-production

Task definitions are maintained in .devcontainer/devcontainer.json.

Those task definitions are VS Code-specific (customizations.vscode.tasks). In JetBrains IDEs, run make start / make start-production from the integrated terminal.

This support is additive; the existing make start, make start-build, and make bash workflow remains unchanged.

See Dev Containers for detailed steps.

Backend?

This frontend template is designed to work especially well with the symfony-flex-backend project, but it can be used with any backend that exposes a compatible REST API.

If you want a ready-made backend pair for this frontend, start with the Symfony Flex Backend project. It includes the API, authentication flow, and Docker-based development environment that this frontend expects by default.

Resources

• Resource index
• Custom commands
• Concepts and features
• Dependency update
• Dev Containers
• Speed problems with application?
• Tools
• Translations
• Usage checklist
• Scripts

External links / resources

• Angular
• Angular Material
• Material Icons
• Angular Flex-Layout
• The RxJS Library
• NgRx Reactive State for Angular
• Redux DevTools

Authors

• Tarmo Leppänen

License

The MIT License (MIT)

Copyright © 2024 Tarmo Leppänen