Skip to content

Files

Latest commit

author
cleophas.mashiri
May 1, 2018
9aea68e · May 1, 2018

History

History
172 lines (140 loc) · 3.85 KB

File metadata and controls

172 lines (140 loc) · 3.85 KB

Creating Gateway Main UI microservice with (Angular 5, Spring-boot and Zuul gateway)

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.

Creating Spring boot project

  1. Create parent folder ui-as-microservices and cd into.
  2. Use https://start.spring.io/ add web and zuul dependencies, generate application and unzip copy the main project into ui-as-microservices.
  3. ./mvnw spring-boot:run to check that everything whent smoothly.

Adding angular 5 application to Spring Boot project.

Add front-end assets plugin to your pom.xml.

-For more details on this check this article Spring Angular

  1. 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>
  1. Run the following to install node and npm locally
/mvnw generate-resources
  1. 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
  1. 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
  1. Create a new application as follows:
 ./ng new client
  1. 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
  1. Building
  • Add the following into the pom.xml, under front-end maven plugin.
 <execution
    <id>npm-install</id>
    <goals>
        <goal>npm</goal
    </goals>
</execution>
  1. Testing
  • Run the following
 ./ng e2e
  • You should see something like below.

  • Executed 1 of 1 spec SUCCESS in 0.718 sec.

  1. 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>
  1. 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"
],

Run

./mvnw spring-boot:run