/images/soap-bubble-gdc68aeb05_640.jpg

Angular - Add Bootstrap to your application

Bootstrap components / styles installation In the root of your angular project open package.json file and add new dependency for Bootstrap and font-awesome. … “dependencies”: { … … “bootstrap”: “^3.3.7”, “font-awesome”: “^4.7.0” } … Update installed dependencies with npm : $ npm install Add new directive for styles in .angular-cli.json configuration … “styles”: [ “../node_modules/bootstrap/dist/css/bootstrap.css”, “../node_modules/font-awesome/css/font-awesome.css”, “styles.css” ], … After you build your angular application, new webpack prepared application will contain bootstrap components and font.

Angular - create currency list view component

You can get source code of this project from github repository “ANGULARMYAPP” . Build components In previous blog article I describe angular environment and generate base angular skeleton application. In this article I will create my first list component and connect client app to server REST service. Create new component When you create new component, you will need to name it first. You can use dash in the middle of the name, but it is not required.

Maven: Build a executable JAR

Prepare java deploy package In true microservice architecture we need to prepare self sufficient applications which must be very easy to deploy. For java server app this means executable JAR file with all dependencies included. Because I use spring boot application my application already is self sufficient. I only need to prepare a combined JAR with all dependencies. Maven In the maven pom.xml file I add build plugin: After executing a maven “package” lifecycle command, maven will produce combined JAR with everything inside in the target folder :

Web compression on Spring Boot application

Compression of JSON messages If you look at common JSON message, the data are highly repetitive ! Each array of objects contains meta data for all object properties. If all of your messages are short you probably won’t need a compression but in typical scenario where REST services return data from database you gain a lot. In the message of this size (220 bytes) there is no gain at all (compressed size is 250 bytes) and you lost some processor time to compress it.

Angular and Git project setup

Angular-CLI, VSCode and Git/GitHub configuration I will create Angular 4 client application with project setup needed to seamlessly develop and store source code to remote Github repository. Projects folder structure I will create client side SPA application as client to Java spring boot server application, created in previous blog article. Both projects (server & client) are in separate folders, only at the deployment stage they will be combined under java server application.

Java Spring Boot project setup

You can get source code of this project from github repository “SpringBootMyApp” . Create Spring Boot Maven project Go to Spring Boot project generator web site and select minimal project definition with dependencies : Web: dependency for embedded tomcat server jOOQ: integrated SQL query language and data model code generator Flyway: database model migration tool Postgresql JDBC driver After downloading ZIP project file, unzip it to some folder and open folder in IntelliJ IDE environment.