Angular 5 with Spring Boot

Hi everyone. Today I write a post using the English Language. This is about integration angular 5 with Spring Boot for deployment only one sever. We do it using maven and npm, so let's start.

Maven projects

We will start with creating a parent module which organize and build our modules.

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 <modelVersion>4.0.0</modelVersion>

 <groupId>pl.devpragmatic</groupId>
 <artifactId>devpragmatic</artifactId>
 <version>0.0.1-SNAPSHOT</version>
 <packaging>pom</packaging>

 <name>devpragmatic</name>
 <description>Parent module for presentation integrate Angular with Spring boot</description>

 <parent>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-parent</artifactId>
  <version>1.5.8.RELEASE</version>
  <relativePath/>
 </parent>

 <properties>
  <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
  <java.version>1.8</java.version>
 </properties>
</project>

parent/pom.xml

This isn't something hard, so go to the next step.

We need create two submodule for parent and add it to its configuration in pom.xml.

The first module is an API/Server. The pom looks like:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 <modelVersion>4.0.0</modelVersion>

 <groupId>pl.devpragmatic</groupId>
 <artifactId>devpragmatic-server</artifactId>
 <version>0.0.1-SNAPSHOT</version>
 <packaging>jar</packaging>

 <name>devpragmatic-server</name>
 <description>Server/API module for presentation integrate Angular with Spring Boot</description>

 <parent>
  <groupId>pl.devpragmatic</groupId>
  <artifactId>devpragmatic</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <relativePath/> <!-- lookup parent from repository -->
 </parent>

 <properties>
  <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
  <java.version>1.8</java.version>
 </properties>

 <dependencies>
  <dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-web</artifactId>
  </dependency>
 </dependencies>

 <build>
  <plugins>
   <plugin>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-maven-plugin</artifactId>
   </plugin>
  </plugins>
 </build>

</project>

parent/devpragmatic-server/pom.xml

Ok, in this pom.xml we don't have any information about UI, we will add it later. The next step is creating a UI maven module.

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 <modelVersion>4.0.0</modelVersion>

 <groupId>pl.devpragmatic</groupId>
 <artifactId>devpragmatic-ui</artifactId>
 <version>0.0.1-SNAPSHOT</version>
 <packaging>jar</packaging>

 <name>devpragmatic-ui</name>
 <description>UI module for presentation integrate Angular with Spring Boot</description>

 <parent>
  <groupId>pl.devpragmatic</groupId>
  <artifactId>devpragmatic</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <relativePath/> <!-- lookup parent from repository -->
 </parent>

 <properties>
  <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
 </properties>

</project>

parent/devpragmatic-ui/pom.xml

Now, we will add submodules to parent, we do it when we add these lines to pom:

<modules>
 <module>devpragmatic-ui</module>
 <module>devpragmatic-server</module>
</modules>

Don't worry about that our project don't build now. We have to correct configure UI maven.

Install angular5

On our UI module execute install @angular/cli by npm.

npm i -g @angular/cli

After install you can check if installation finish correct using:

ng -v

If after using command you get version of angularcli then it a good way to create our angular application using:

ng new devpragmatic-ui

Now we have UI for our application. We need to configure maven to compile it and copy to our server. We will use plugin exec-maven-plugin to execute npm by maven. Add to pom these configuration:

<profiles>
  <profile>
    <id>linux</id>
    <activation>
      <os>
        <family>!windows</family>
      </os>
    </activation>
    <properties>
      <npm>npm</npm>
    </properties>
  </profile>
  <profile>
    <id>windows</id>
    <activation>
      <os>
        <family>windows</family>
      </os>
    </activation>
    <properties>
      <npm>npm.cmd</npm>
    </properties>
  </profile>
</profiles>
<build>
  <resources>
    <resource>
      <directory>dist</directory>
      <targetPath>static</targetPath>
    </resource>
  </resources>

  <plugins>
    <plugin>
      <groupId>org.codehaus.mojo</groupId>
      <artifactId>exec-maven-plugin</artifactId>
      <version>1.5.0</version>
      <executions>
        <execution>
          <id>install</id>
          <phase>generate-resources</phase>
          <goals>
            <goal>exec</goal>
          </goals>
          <configuration>
            <executable>${npm}</executable>
            <arguments>
              <argument>install</argument>
              <argument>--no-optional</argument>
            </arguments>
          </configuration>
        </execution>
        <execution>
          <id>build</id>
          <phase>generate-resources</phase>
          <goals>
            <goal>exec</goal>
          </goals>
          <configuration>
            <executable>${npm}</executable>
            <arguments>
              <argument>run-script</argument>
              <argument>build</argument>
            </arguments>
          </configuration>
        </execution>
      </executions>
    </plugin>
  </plugins>
</build>

What are we doing here? In resources section we mapping dist directory(angular compiled files) to static (Spring Boot static files). We configured plugin to build and install angular application. We use the profiles because the Windows, MacOs and Linux are different way to execute npm, so we need this to stay in multi platform compilation. Now we can run our build, but UI resources still aren't on the server.

We must add to server pom dependency:

<dependency>
 <groupId>pl.devpragmatic</groupId>
 <artifactId>devpragmatic-ui</artifactId>
 <version>0.0.1-SNAPSHOT</version>
 <scope>runtime</scope>
</dependency>

So when we build our parent, we have working application with angular 5. This is a good way to build an application to deploy on hosts, but not for developing. The next post will be about configuration webpack-dev-server for developing without a cors problem and a lot of change.