An Angular full stack starter kit featuring Angular 4, Router, Forms, Http, Services, Spring boot, JSON Web Token
If you're looking for using Angular 1.x for frontend implementation, please check out springboot-jwt-starter A Spring Boot token-based security starter kit featuring AngularJS and Spring Boot (JSON Web Token)
Make sure you have Maven and Java 1.7 or greater Make sure you also have NPM 3.1, Node 6.9.5 and [email protected] globally installed
# clone our repo
# --depth 1 removes all but one .git commit history
git clone --depth 1 https://github.com/bfwg/angular-spring-starter.git
# change directory to the repo's frontend folder
cd angular-spring-starter/frontend
# install the frontend dependencies with npm
# npm install @angular/[email protected] -g
npm install
# build frontend project to /server/src/main/resources/static folder
ng build
# change directory to the repo's backend folder
cd ../server
# install the server dependencies with mvn
mvn install
# start the server
mvn spring-boot:run
# the app will be running on port 8080There are two user accounts present to demonstrate the different levels of access to the endpoints in the API and the different authorization exceptions:
Admin - admin:123
User - user:123
For more detailed configuration/documentation, please check out the frontend and server folder.
Since the frontend app needs a dev-server for a faster development speed, we need a way to proxy the request to our spring boot backend which is running on port 8080. I'm using nginx.
Nginx configuration for Development
Put the below code snippet in your nginx.conf file. We are proxying everything to port 4201.
server {
listen 4201;
location / {
proxy_pass http://localhost:4200;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location ~ ^/(api|auth) {
proxy_pass http://localhost:8080;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
Nginx configuration for Production
Please build the frontend app first by running ng build in the frontend folder.
Put the below code snippet in your nginx.conf file.
We are proxying everything to port 80, and redirecting everything to index.html.
server {
listen 80;
index index.html index.htm;
server_name localhost;
root /path/to/angular-spring-starter/server/src/main/resources/static;
location / {
try_files $uri $uri/ /index.html;
proxy_pass http://localhost:8080;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location ~ ^/(api|auth) {
proxy_pass http://localhost:8080;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties. for more info, checkout https://jwt.io/
Token authentication is a more modern approach and is designed solve problems session IDs stored server-side can’t. Using tokens in place of session IDs can lower your server load, streamline permission management, and provide better tools for supporting a distributed or cloud-based infrastructure.
-- Stormpath
I'll accept pretty much everything so feel free to open a Pull-Request
This project is inspired by