Integration-SpringBoot-SpringDataJPA-Angular5

I share basic example, how to integrate Spring Boot - SpringDataJPA-Angular5

Technologies used:

1. Spring Boot 2.0.1.RELEASE
2. Oracle (Ojdbc) 11.2.0.4
3. Tomcat Embed
4. Maven 4
5. Java 8
6. Angular CLI: 1.7.4
7. Node: 8.9.4
8. Eclipse: Oxygen.1.a Release (4.7.1a)

Steps:

1. Create project angular

  

if you want to test and start application,  you have to run the next command in your console.

Open your browser: http://localhost:4200/

2. Import your project angular to eclipse:

Import -> General -> Projects from Folder or Archieve -> Directory, press finish

3. To clean the sourcecode in STS, we need to remove node_modules:

– Right click on angular5-client project, choose Properties, then choose:  Resource --> Resource Filter.
– Press Add Filter, choose Filter Type, press OK -> Apply and Close

4. Create a file proxy.conf.json

{

"/ws": {

"target": "http://localhost:8080",

"secure": false

}

}

5. Edit package.json file for “start” script:

Edit next line: "start": "ng serve --proxy-config proxy.conf.json",

6. - Right click on angular5-client project

  -Show in -> Terminal.

 Build angular5 client with command  ng build --env=prod

Result is a dist folder:

7. References folder dist from pom.xml Eclipse project.

                         

8. build and run the SpringBoot server again with commands:

– Build: mvn clean install

– Run:  mvn spring-boot:run

--request url from test: http://localhost:8080/

--

request url web service rest: http://localhost:8080/ws/read

Code on GitHub: 

Backend: https://github.com/HenryXiloj/SpringBoot-SprinDataJPA

Front-end: https://github.com/HenryXiloj/angular5-client

References: http://javasampleapproach.com/java-integration/integrate-angular-4-springboot-web-app-springtoolsuite