I recently spent the time to setup Angular CLI front-end using IntelliJ and Maven tool. Angular 4 is the next version of Angular 2. In this article, I am going to show how to integrate Angular 4 with SpringBoot RestAPI using IntelliJ step by step. In this article,
1. I used various technologies.
-> Maven
-> IntelliJ
-> SpringBoot
-> Java 8
-> Angular 4
->Node.js
2. Setup Node.js and NPM.
Install Node.js from Download. And then check Node.js and NPM by node -v and npm -v command respectively.
-> Open CMD in Windows and check Node.js and NPM: node -v and npm -v.
3. Install the Angular-CLI using the command line as:
-> open cmd and type npm install -g @angular/cli
-> and check Angular-CLI after installing as: ng -v
4. Setup SpringBoot App using IntelliJ as:
-> create a simple spring-boot restful app and dependency for the web in pom.xml file as
-> Go to recently created spring-boot app location /src/main location using the terminal.
and use the cmd: ng new frontend. where frontend is the angular project client.
-> start the frontend project by cmd: npm start and check in the URL as localhost:4200 and see the result.
6. Integrating SpringBoot Server and Angular-4 frontend app.
-> Until SpringBoot App and Angular-4 frontend work independently on port 8080 and 4200 respectively.
But now integrating: the client at 4200 will proxy any /api request to the server as.
-> create a file with name proxy-config.json under frontend folder with following content:
So, Install copyfiles dependency as:
-> npm install copyfiles -g
-> Build and run the SpringBoot project and Frontend client app and check in the URL as at port 8080 and 4200 respectively. -> make request http://localhost:4200/api/check,
7. Deploy SpringBoot project with Angular4 frontend as:
-> use cmd at frontend location: npm run build
-> I used following method to copy all files from dist folder to /src/main/resources/static folder of the SpringBoot app.
-> Open Package.json file and update following portion of script part as:
Now,
Build and run spring-boot app using maven cmd as:
-> build: mvn clean install
-> run mvn spring-boot:run
finally make request as : http://localhost:8080 and see result.
Download
Done! Done!! Done!!
1. I used various technologies.
-> Maven
-> IntelliJ
-> SpringBoot
-> Java 8
-> Angular 4
->Node.js
2. Setup Node.js and NPM.
Install Node.js from Download. And then check Node.js and NPM by node -v and npm -v command respectively.
-> Open CMD in Windows and check Node.js and NPM: node -v and npm -v.
3. Install the Angular-CLI using the command line as:
-> open cmd and type npm install -g @angular/cli
-> and check Angular-CLI after installing as: ng -v
4. Setup SpringBoot App using IntelliJ as:
-> create a simple spring-boot restful app and dependency for the web in pom.xml file as
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency>-> And also create RestController as:
@RestControllerpublic class HomeController { @GetMapping("/api/check") public String check() { return "Spring Boot App"; } }5. Create Angular-4 client app using the command as:
-> Go to recently created spring-boot app location /src/main location using the terminal.
and use the cmd: ng new frontend. where frontend is the angular project client.
-> start the frontend project by cmd: npm start and check in the URL as localhost:4200 and see the result.
6. Integrating SpringBoot Server and Angular-4 frontend app.
-> Until SpringBoot App and Angular-4 frontend work independently on port 8080 and 4200 respectively.
But now integrating: the client at 4200 will proxy any /api request to the server as.
-> create a file with name proxy-config.json under frontend folder with following content:
{ "/api": { "target": "http://localhost:8080", "secure": false } }-> Edit package.json file for the start script and others as: "scripts":
"scripts": { "ng": "ng", "start": "ng serve --proxy-config proxy-config.json", "build": "ng build -prod", "postbuild": "npm run deploy", "predeploy": "rimraf ../resources/static/ && mkdirp ../resources/static", "deploy": "copyfiles -f dist/** ../resources/static", "test": "ng test", "pree2e": "webdriver-manager update --standalone false --gecko false", "e2e": "protractor"},Here, I used copyfiles cmd to copy -f dist/**folder into ../resources/static.
So, Install copyfiles dependency as:
-> npm install copyfiles -g
-> Build and run the SpringBoot project and Frontend client app and check in the URL as at port 8080 and 4200 respectively. -> make request http://localhost:4200/api/check,
7. Deploy SpringBoot project with Angular4 frontend as:
-> use cmd at frontend location: npm run build
-> I used following method to copy all files from dist folder to /src/main/resources/static folder of the SpringBoot app.
-> Open Package.json file and update following portion of script part as:
"scripts": { "ng": "ng", "start": "ng serve --proxy-config proxy-config.json", "build": "ng build -prod", "postbuild": "npm run deploy", "predeploy": "rimraf ../resources/static/ && mkdirp ../resources/static", "deploy": "copyfiles -f dist/** ../resources/static", "test": "ng test", "pree2e": "webdriver-manager update --standalone false --gecko false", "e2e": "protractor"},
Now,
Build and run spring-boot app using maven cmd as:
-> build: mvn clean install
-> run mvn spring-boot:run
finally make request as : http://localhost:8080 and see result.
Download
Done! Done!! Done!!
Great and useful blog.
ReplyDeleteAngularjs course in Chennai
It is an excellent blog. Your post is very good and unique. I eagerly waiting for your new post. Thanks for sharing keep sharing more good blogs.
ReplyDeleteDOT NET Training in Bangalore
DOT NET Training in Chennai
DOT NET Training Institutes in Bangalore
DOT NET Course in Bangalore
Best DOT NET Training Institutes in Bangalore
DOT NET Institute in Bangalore
AWS Training in Bangalore
Data Science Courses in Bangalore
DevOps Training in Bangalore
PHP Training in Bangalore
It is an wonderful blog. Your post is very good and unique. I eagerly waiting for your new post. Thanks for sharing keep sharing more good blogs. Very informative article.Thank you admin for you valuable points.Keep Rocking
ReplyDeleteangular js training in chennai
angular js online training in chennai
angular js training in bangalore
angular js training in hyderabad
angular js training in coimbatore
angular js training
angular js online training