Spring Petclinic Angular
Angular frontend for Spring Petclinic
Warning: client only. Use REST API from backend spring-petclinic-rest project You need start backend server before start frontend application.
Screenshot
Installation
- Update angular-cli to latest version (8.0.3 current) as described on angular-cli github readme.md
npm uninstall -g angular-cli @angular/cli
npm cache clean
npm install -g @angular/cli@latest
Clone project from github
git clone https://github.com/spring-petclinic/spring-petclinic-angular.git
Install local project package
npm install --save-dev @angular/cli@latest
if npm version > 5.0 delete package-lock.json file ( bug in npm 5.0 - this file prevent correct packages install)
npm install
Now project use Angular CLI v.8.0.3 and Angular v.8.0.1 You can see current dependencies in package.json file.
Development server
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Code scaffolding
Run ng generate component component-name
to generate a new component. You can also use ng generate directive|pipe|service|class|module
.
Build
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the -prod
flag for a production build.
You can also build the application in a dedicated docker image using the provided Dockerfile
as follows:
docker build -t spring-petclinic-angular:latest .
Then you will be able to use it as follows:
docker run --rm -p 8080:8080 spring-petclinic-angular:latest
Documentation
The documentation of the Spring Petclinic Angular application is generated by the compodoc tool.
Documentation URL: https://spring-petclinic.github.io/spring-petclinic-angular/
Regenerate the docs
folder with compodoc:
compodoc -p src/tsconfig.app.json -d docs
Deploy on Web servers
Deploy on Nginx (for Nginx CentOS installation):
- Build Angular application:
ng build --prod --base-href=/petclinic/ --deploy-url=/petclinic/
-
Create sub-directory /petclinic in default nginx directory /usr/share/nginx/html
-
Copy /dist sub-directory from Angular appication to /usr/share/nginx/html/petclinic
-
Edit nginx config (nginx.conf file in /etc/nginx/ directory)
server {
listen 80 default_server;
root /usr/share/nginx/html;
index index.html;
location /petclinic/ {
alias /usr/share/nginx/html/petclinic/dist/;
try_files $uri$args $uri$args/ /petclinic/index.html;
}
}
-
Reload nginx: nginx -s reload
-
Run app in brouser: http://server_name/petclinic/
Deploy on Apache (for Apache CentOS installation):
- Build Angular application:
ng build --prod --base-href=/petclinic/ --deploy-url=/petclinic/
-
Create sub-directory /petclinic in default Apache directory /var/www/html
-
Go into Angular appication /dist sub-directory and copy all files and sub-dirs from it to /var/www/html/petclinic
-
Edit Apache config (/etc/https/conf/httpd.conf):
sudo vi /etc/httpd/conf/httpd.conf
Find the Directory /var/www/html> section and change the AllowOverride directive from None to All:
/etc/httpd/conf/httpd.conf
. . .
<Directory /var/www/html>
. . .
#
# AllowOverride controls what directives may be placed in .htaccess files.
# It can be "All", "None", or any combination of the keywords:
# Options FileInfo AuthConfig Limit
#
AllowOverride All
. . .
</Directory>
. . .
- Save and exit the file and then restart Apache to apply the change:
sudo systemctl restart httpd
- Create a .htaccess file in the directory /var/www/html/petclinic
sudo vi /var/www/html/petclinic/.htaccess
Add the following line to the top of the file to activate the RewriteEngine, which instructs Apache to process any rules that follow:
RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested resource doesn't exist, use index.html
RewriteRule ^ index.html
- Reload Apache:
sudo systemctl restart httpd
- Run app in browser: http://server_name/petclinic/
Running unit tests
Run ng test
to execute the unit tests via Karma.
Running end-to-end tests
Run ng e2e
to execute the end-to-end tests via Protractor.
Before running the tests make sure you are serving the app via ng serve
.
Further help
To get more help on the Angular CLI use ng help
or go check out the Angular CLI README.