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...

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

Sep 14, 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.

Sep 16, 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

Sep 11, 2022

React Bootstrap admin starter template

 React Bootstrap admin starter template

React Bootstrap admin starter template screenshots Loading Effect Login page screenshot Forgot password page screenshot Dashboard page screenshot Left

Sep 9, 2022

jQuery tags input plugin based on Twitter Bootstrap.

Bootstrap Tags Input Bootstrap Tags Input is a jQuery plugin providing a Twitter Bootstrap user interface for managing tags. Current stable version: v

Sep 7, 2022

A sample app (with TypeScript) to help developers bootstrap their Shopify app development.

⚠️ Please, refer to kanzitelli/shopify-app-template-typescript for the most up-to-date version. This repo was used for testing purposes. Shopify App N

Jun 10, 2022

A simple javascript library for pagination, compatible with Bootstrap.

A simple javascript library for pagination, compatible with Bootstrap.

Easy Pagination JS A simple library for pagination, compatible with Bootstrap. Check my website here. Demo Check this Demo here. Example Import the fi

Aug 5, 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 13 Jul 1, 2022
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 133 Sep 10, 2022
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 Sep 8, 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
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.

null 10 Jun 10, 2022
🚀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

Wilfried 44 Sep 6, 2022
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

null 8 Jul 23, 2022