Integrate Angular5 with Kotlin SpringBoot + SpringToolSuite

Angular5 is the next version of Angular4 that comes with almost everything you need to build across all platforms frontend web or mobile apps with high speed & performance. So in the tutorial, JavaSampleApproach will guide you through the steps of integrating Angular5 with Kotlin SpringBoot Web Application and SpringToolSuite for development.

I. Technologies

– Java 1.8
– Kotlin 1.2.20
– Spring Tool Suite – Version 3.9.2.RELEASE
– Spring Boot – 1.5.10.RELEASE
– Apache Maven 3.5.2
– Angular5
– Node.js

II. Integrate Angular5 & Kotlin SpringBoot

1. Setup Node.js
1.1 Install Node.js

Firstly, checking whether or not you have ‘Node.js’ installed, by command: node -v & npm -v. If the command goes unrecognized, we must install ‘Node.js’.

-> Go to: nodejs.org. Download Node.js installer, the tutorial uses version: 8.9.4 LTS. We got a ‘node-v8.9.4-x64.msi’ file, double click on it and follow the guides to setup Node.js, successfully result:

kotlin springboot angular 5 - nodejs

1.2 Checking Node.js version

– Open cmd, checking Node.js by commandline: node -v & npm -v:

kotlin springboot angular 5 - check nodejs

2. Setup Angular-CLI
2.1 Install Angular-CLI

– Using commandline npm install -g @angular/cli:

kotlin springboot angular 5 - Install Angular-CLI

2.2 Check Angular-CLI version

– Check Angular-CLI after setup by commandline ng -v:

kotlin springboot angular 5 - Check Angular-CLI

3. Setup Kotlin SpringBoot Web server project
3.1 Create Kotlin SpringBoot project

– Using SpringToolSuite, create a simple Kotlin SpringBoot web application. Open pom.xml file, add web dependency:

3.2 Kotlin RestController

4. Create Angular5 project

Location of the SpringBoot project at: C:\Users\User\workspace\KotlinSpringBootAngular5
Now, open cmd, cd to C:\Users\User\workspace\.

4.1 Create Angular5 project

– Create a new angular5 project by commandline: ng new angular5-client.

kotlin springboot angular 5 - Create Angular 5 client project

To check angular version, go to ‘angular5-client’ folder, type: ng -v

kotlin springboot angular 5 - check version of Angular 5 client project

4.2 Start Angular5 project

Start angular5-client project by cmd npm start, results:

kotlin springboot angular 5 - Start angular5-client

kotlin springboot angular 5 - first view

5. Import Angular5 project to SpringToolSuite
5.1 Import Angular5 project

Open SpringToolSuite, go to ‘Import -> General -> Projects’ from ‘Folder or Archieve’, press ‘Next’:

kotlin springboot angular 5 - Import Angular5 client project to SpringToolSuite

Press ‘Finish’, angular5-client is imported:

kotlin springboot angular 5 - angular 5 client project first sense

5.2 Clean node_modules

To clean the sourcecode in STS, we need to remove node_modules by following the steps:
– Right click on ‘angular5-client’ project, choose Properties, then choose: ‘Resource -> Resource Filter’.
– Press ‘Add Filter…’, choose ‘Filter Type: Exclude all’, Applies to: ‘Files and folders’, and check ‘All children (recursive)’, with ‘File and Folder Atributes’, we specify ‘node_modules’:

kotlin springboot angular 5 - exclude node_modules

Press ‘OK’. Then press ‘Apply’, result:

kotlin springboot angular 5 - after filter angular 5 client project

-> Now ‘node_modules’ is already removed from the SpringToolSuite.

5.3 Modify Angular5 project

Open ‘/angular5-client/src/app/app.component.css’, edit as below:

– Open ‘/angular5-client/src/app/app.component.html’, edit:

5.4 Start Angular5 from SpringToolSuite

Right click on ‘angular5-client’ project, choose ‘Show in Local Terminal -> Terminal’. Launch ‘angular5-client’ project as cmd: npm start.

kotlin springboot angular 5 - start angular 5 from sts

kotlin springboot angular 5 - result on view after starting from STS

6. Integrate Kotlin SpringBoot server & Angular5
6.1 Build Angular project

Build ‘angular5-client’ with command ng build --env=prod:

kotlin springboot angular 5 - build production

Result is a ‘dist’ folder:

kotlin springboot angular 5 - dist

6.2 Deploy Angular5 with Kotlin Spring Boot

We have 2 approaches to deployment Kotlin Spring Boot server with angular5-client:
– Manually copy all files from ‘dist’ folder to ‘/src/main/resources/static’ folder of Kotlin SpringBoot server project.
– Using Maven plugin to copy all files from ‘dist’ folder to ‘/src/main/resources/static’ folder of SpringBoot server project.

6.3 Result

Now build and run the Kotlin SpringBoot server again with commands:
– Build: mvn clean install
– Run: mvn spring-boot:run

Then make some requests:
http://localhost:8080/, result:

kotlin springboot angular 5 - home page

http://localhost:8080/api/hi, result:

kotlin springboot angular 5 - result from api

>>> Done! Now you can start to develop Angular5 with Kotlin SpringBoot & SpringToolSuite! ?

III. SourceCode

Angular5-Client
KotlinSpringBootAngular5

By grokonez | February 21, 2018.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*