starter-angular-symfony

GitHub: ducrot/starter-angular-symfony

This is a demonstration project that follows best practices for an Angular frontend and a Symfony backend, using Protobuf for data exchange.

It is recommended to use DDEV for local development.

If you are unable to use DDEV, you will need to set up a web server with PHP, a database server such as MySQL or MariaDB, and a Node setup yourself.

Features

• authentication via JWT, login, logout, session expiration support
• angular production builds delivered by symfony (with proper caching)
• all data exchange between server and frontend uses Twirp and Protocol buffers
• automatic formatting of exceptions for angular client (stack traces if symfony debug = true)
• each request is tagged with a unique id, id is logged with every log record, delivered to client

Install

# Clone with SSH
git clone [email protected]:ducrot/starter-angular-symfony.git my-project
# Clone with HTTPS
git clone https://github.com/ducrot/starter-angular-symfony.git my-project
cd my-project
cp symfony/.env.ddev symfony/.env.local

Edit symfony/.env.local to match your environment (not needed for DDEV).

Development

ddev start
ddev auth ssh
ddev make install
ddev make ng-serve

Website is now available at https://starter-angular-symfony.ddev.site:4200/.

To see all services, run ddev describe.

Database

To init the database with test data, run:

ddev make db-drop-recreate

To create a new database migration, run:

ddev make db-on-change

Protobuf and twirp

For exchanging data between server and frontend, Twirp is used. It is a very simple protocol based on HTTP/1 that serializes all data using protobuf. See protos/ directory for the message and service definitions.

For the first installation and after adding or changing a .proto file, run ddev make generate to generate Typescript and PHP code.

This will write PHP files to symfony/src-pb and typescript files to angular/src/pb.

To add a new service:

• Create the service in a new .proto file in the /protos/ directory.
• Run ddev make generate.
• A PHP interface for your service has been created in symfony/src-pb.
• Create a new class in symfony/services/<your-service-name>.php and implement the generated interface with your logic.
• Register your service implementation in TwirpController::MAPPINGS.
• Register the (autogenerated) Typescript client in an angular module of your choice. See shared.module.ts for examples.

Symfony

The symfony part is located in the symfony directory.

Create a first admin account. Additional users can be created in the application.

ddev symfony console backend:createadmin [email protected] 'A#Very$ecretPwd'

Or import fixtures which will be generated with Alice and Faker.

ddev symfony console hautelook:fixtures:load

PHPUnit Tests

# Run all tests
ddev composer test

# With testdox
ddev composer test-testdox

# With coverage
ddev composer test-coverage

PHPStan

ddev composer phpstan

Rector

# Dry-run
ddev composer rector-check

# Fix
ddev composer rector-fix

PHP CS Fixer

# Dry-run with short summary
ddev composer phpcs-check

# Fix
ddev composer phpcs-fix

Angular

The angular part is located in the angular directory.

The project was tested with node v16.x and yarn v1.x.

Run ddev yarn install to install dependencies.

To start a development server, run the following command:

ddev make ng-serve

Tailwind CSS

The utility-first CSS framework Tailwind CSS is configured out of the box.

To view all possible classes in your browser start the Tailwind Config Viewer with ddev yarn --cwd angular run tailwind-config-viewer and open https://starter-angular-symfony.ddev.site:3000/.

Production builds

Make angular production build:

ddev ng build --configuration production

Production builds are automatically delivered by symfony. See FrontendController.php.

credits

• The ACME logo was created by Acme Logos - Professional Placeholder Logos.
• Used ideas on best practices from Angular Folder Structure.
• Special thanks for the support and the fantastic protobuf-ts goes to timostamm/protobuf-ts.