Project Bootstrap for an Angular + Symfony project

Overview

angular-symfony Build Status

Project Bootstrap for an Angular 2+ and Symfony 4+ webservices project.

Introduction

This project is a template application with a secured RestFul API communication via JWT security scheme.

Installation

Install docker and docker-compose.

Clone the project :

git clone [email protected]:FlyersWeb/angular-symfony.git

Launch dockerized environment :

docker-compose up -d

Log in application docker image :

docker-compose exec application bash

Install dependencies :

composer install

Create database if necessary :

php bin/console doctrine:database:create

Create schemas (FOSUserBundle) :

php bin/console doctrine:schema:create

Create and activate user :

php bin/console doctrine:fixtures:load

Access the front end using port 4200 :

firefox http://localhost:4200 &

Launching tests

If you want to contribute to project you'll need to have tests to pass. So in order to run them you'll need to :

Log in application docker image :

docker-compose exec application bash

Update database connection information in .env.test

Create database :

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

Create schemas (FOSUserBundle) :

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

Create and activate user :

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

Copy Phpunit config :

cp phpunit.xml.dist phpunit.xml

Launch tests using :

bin/phpunit

Authentication system

The Authentication system is based on the JWT token as implemented by Lexik

User management is done through FOSUserBundle, you can easily add / edit / delete users by using their API.

The server provides a Rest API using FOSRestBundle allowing you to connect using the following query:

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

Client Side specifics

On the client side, I've inspired my code from Angular official documentation about HttpInterceptor, allowing me to send the JWT Token on each HTTP request when token is available.

The token is sent in Authorization headers:

Authorization: Bearer xxx

LICENSE

This program is free software. It comes without any warranty, to the extent permitted by applicable law.

This software is LICENSED under the MIT License. Use it at your own risk.

WARNING

Servers are configured for developments purposes. Do not deploy this project on production as is. You should have a look to Symfony deployment documentation for the Back-end and the Angular deployment documentation for the Front-End part.

You should also change the preconfigured keys for signatures by generating your own keys using :

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

And copy the passphrase into the field JWT_PASSPHRASE in .env file.

You should also update the APP_SECRET in .env file.

Conclusion

You can use this template and adapt it to your needs.

You might also like...

Inventory App - a SPA project developed with Angular using Reactive Forms and VMware's Clarity components.

Inventory App - a SPA project developed with Angular using Reactive Forms and VMware's Clarity components.

Inventory App - a SPA (Single Page Application) project developed with Angular using Reactive Forms and VMware's Clarity components.

Oct 5, 2022

🚀Starter project with Angular 13, Ngx-admin, NestJS, Nx Workspace, Jest, Cypress, ESLint & Prettier 🚀

🚀Starter project with Angular 13, Ngx-admin, NestJS, Nx Workspace, Jest, Cypress, ESLint & Prettier 🚀

Angular 13 + Ngx-admin + NestJs + NX Starter project with Angular 13, Ngx-admin, NestJs, Nx Workspace, Jest, Cypress, ESLint & Prettier Features ✅ Ang

Jan 4, 2023

Personal Blog - a project developed with Angular for the front-end interface and Wordpress for the back-end API served with Docker containers

Personal Blog - a project developed with Angular for the front-end interface and Wordpress for the back-end API served with Docker containers

PersonalBlog This project was generated with Angular CLI version 13.0.1. Front-end Interface Development server Run ng serve or ng serve --configurati

Oct 5, 2022

A project that tests out various Angular 8 features.

AngularNgIfDirective This project was generated with Angular CLI version 8.3.19. Development server Run ng serve for a dev server. Navigate to http://

Oct 5, 2022

Projeto realizado como meio de aprendizado do Front-End e do Bootstrap. Tentei testar algumas animações e expor o máximo de criatividade possível😜

Projeto realizado como meio de aprendizado do Front-End e do Bootstrap. Tentei testar algumas animações e expor o máximo de criatividade possível😜

Steck Cars Demonstração : Sobre Projeto realizado como meio de aprendizado do Front-End e do Bootstrap. Tentei testar algumas animações e expor o máxi

Jan 10, 2022

Bootstrap plugin for markdown editing

Bootstrap Markdown Markdown editing meets Bootstrap. Demo and documentation available at http://toopay.github.io/bootstrap-markdown/ Compatibility Ver

Dec 27, 2022

BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.3.0 CSS framework

BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.3.0 CSS framework

BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.3.0 CSS framework. It provides a faster, easier and less repetitive way for web developers to create elegant web apps.

Dec 25, 2022

Bootstrap an NFT minting site with Merkle tree whitelists.

🖌️ nft-merkle-whitelist-scaffold Bootstrap an NFT minting site with merkle tree whitelists. Go to nft-merkle-whitelist.vercel.app to see the latest d

Dec 24, 2022
Owner
Man of Justice
Looking for an senior developer position in a dynamic firm that values my analytical and technical skills and provides scope for updating my knowledge
Man of Justice
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4.

Bootstrap Tooltip Custom Class Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4. Define you

Andrei Victor Bulearca 14 Feb 10, 2022
A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans.

bootstrap-validate A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans. ?? Support us with Developer Merchandise

null 138 Jan 2, 2023
Bootstrap Colorpicker is a modular color picker plugin for Bootstrap.

Bootstrap Colorpicker Bootstrap Colorpicker is a modular color picker plugin for Bootstrap 4. THIS PROJECT IS NOT MAINTAINED ANYMORE. After almost 10

Javi Aguilar 1.4k Dec 22, 2022
Firebase Storage with Angular 14 example: Upload File, Retrieve, Display, Download Url & Delete using @angular/fire AngularFireStorage

Angular 14 File Upload to Firebase Storage example I will show you how to make Angular 14 Firebase Storage: File Upload/Display/Delete Application usi

null 7 Sep 7, 2022
Angular JWT refresh token with Interceptor, handle token expiration in Angular 14 - Refresh token before expiration example

Angular 14 JWT Refresh Token example with Http Interceptor Implementing Angular 14 Refresh Token before Expiration with Http Interceptor and JWT. You

null 8 Nov 30, 2022
Quickly bootstrap your next TypeScript REST API project. Node 16+, auto OpenAPI, Prettier+ESLint, Jest

REST API template with autogenerated OpenAPI Quickly bootstrap your next TypeScript REST API project with the most up to date template. Included a sam

null 6 Oct 1, 2022
leaderBoard is a project used to add a score, view score list, and refresh score list. It is built using JS, HTML, BootStrap, and API.

LeaderBoard ?? Table of Contents ?? About the Project ?? Built With Tech Stack Key Features ?? Live Demo ?? Getting Started Setup Prerequisites Instal

Zewdie Habtie 4 Mar 20, 2023