If you’re looking to create a powerful web service using Angular and Symfony, you’re in the right place. This guide will walk you through and help you bootstrap your project efficiently.

Introduction

This project serves as a template application with a secured Restful API communication via JWT (JSON Web Token) security scheme. Before diving in, consider supporting the project: Buy me a coffee.

Installation Steps

Let’s break down the installation process step by step:

• Install Docker and Docker-Compose: Make sure you have these installed to create a containerized environment.
• Clone the Project: Execute the following command in your terminal:

  git clone git@github.com:FlyersWeb/angular-symfony.git

• Launch the Dockerized Environment: Run:

  docker-compose up -d

• Log Into the Application Docker Image:

  docker-compose exec application bash

• Install Dependencies: Use Composer to install necessary packages:

  composer install

• Create the Database: If required, execute:

  php bin/console doctrine:database:create

• Create Schemas: For FOSUserBundle, run:

  php bin/console doctrine:schema:create

• Create and Activate User:

  php bin/console doctrine:fixtures:load

• Access the Front End: Open it in your browser on port 4200:

  firefox http://localhost:4200

Running Tests

If you want to contribute, you need to ensure that your tests pass. Follow these steps:

• Log into the application Docker image:

docker-compose exec application bash

• Update the database connection information in .env.test
• Create the test database:

php bin/console doctrine:database:create --env=test

• Create schemas for testing:

php bin/console doctrine:schema:create --env=test

• Create and activate the test user:

php bin/console doctrine:fixtures:load --env=test

• Copy PHPUnit configuration:

cp phpunit.xml.dist phpunit.xml

• Launch tests:

bin/phpunit

Understanding the Authentication System

The authentication mechanism is built using JWT tokens, facilitated by the respected LexikJWTAuthenticationBundle. User management is conducted through the FOSUserBundle, providing a robust API for user operations (add, edit, delete).

The server integrates a Rest API using FOSRestBundle, connecting through the following command:

curl -X POST -H "Content-Type: application/json" http://localhost:8000/api/login_check -d '{"username":"bob","password":"Abc123"}'

Client-Side Specifics

To handle JWT tokens on the client side, I’ve taken inspiration from Angular’s official documentation regarding HttpInterceptor. This allows the token to be sent in the Authorization headers with every HTTP request, ensuring security:

Authorization: Bearer xxx

Warning

Servers are configured purely for developmental purposes. It is crucial that you do not deploy this project in production directly. For production setup, review the Symfony deployment documentation and the Angular deployment documentation.

Additionally, make sure to generate your own keys for signatures and update the APP_SECRET in your `.env` file:

openssl genpkey -out config/jwt/private.pem -aes256 -algorithm rsa -pkeyopt rsa_keygen_bits:4096

Conclusion

You can take this template as a foundation to build and adapt your own projects as needed. Happy coding!

Troubleshooting

If you encounter any issues during your setup, consider these troubleshooting ideas:

• Ensure Docker and Docker-Compose are correctly installed and up to date.
• If you have database-related problems, double-check the database configuration in your `.env` files.
• Verify that the application container is running and accessible.
• If authentication fails, check your JWT configuration and ensure the correct tokens are being used.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.