UI as Microservices Part 2: Creating Gateway with Spring Cloud and Angular 5
In this part 2 of UI as microservices we will create a api gateway using Spring Cloud Configuration service and angular 5. Lets get started.
- Create parent folder ui-as-microservices and cd into.
- Use https://start.spring.io/ add web and zuul dependencies, generate application and unzip copy the main project into ui-as-microservices.
- ./mvnw spring-boot:run to check that everything whent smoothly.
-For more details on this check this article Spring Angular
- In your pom add Maven Front-end plugin.
.pom.xml
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.6</version>
<configuration>
<nodeVersion>v8.8.1</nodeVersion>
</configuration>
<executions>
<execution>
<id>install-npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>
- Run the following to install node and npm locally
/mvnw generate-resources
- Install angular cli
- Create file npm in the root folder and copy the following.
#!/bin/sh
cd $(dirname $0)
PATH="$PWD/node/":$PATH
node "node/node_modules/npm/bin/npm-cli.js" "$@"
- Run the following command in your terminal.
chmod +x npm
-
This is to make npm file executable.
-
Install angular cli by running
./npm install @angular/cli
- Create a program to run ng cli
- Create a file ng and copy the contents of:
#!/bin/sh
cd $(dirname $0)
PATH="$PWD/node/":"$PWD":$PATH
node_modules/@angular/cli/bin/ng "$@"
- Make executable by running:
chmod +x ng
- Create a new application as follows:
./ng new client
- Move it into root folder by executing the follwing.
> $ cat client/.gitignore .gitignore
$ rm -rf client/node* client/src/favicon.ico client/.gitignore client/.git
$ sed -i '/node_/anode/' .gitignore
$ cp -rf client/* .
$ cp client/.??* .
$ rm -rf client
$ sed -i -e 's,dist,target/classes/static,' .angular-cli.json
- Building
- Add the following into the pom.xml, under front-end maven plugin.
<execution
<id>npm-install</id>
<goals>
<goal>npm</goal
</goals>
</execution>
- Testing
- Run the following
./ng e2e
-
You should see something like below.
-
Executed 1 of 1 spec SUCCESS in 0.718 sec.
- Add the following to the maven front-end plugin
<execution>
<idnpm-build</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>run-script build</arguments>
</configuration>
</execution>
- Add bootstrap
./npm install bootstrap@3 jquery --save
-
Update .angular-cli.json
-
From
"styles": [
"styles.css"
],
"scripts": [],
To
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
./mvnw spring-boot:run