Angular Deployment in wildfly server

Angular Deployment in wildfly server

Wildfly is an apache tomcat server to run the java based project. Wildfly server is authorized by JBoss server. It was developed by RedHat. JBoss server is an open source project, java application server to deploy for Java platform.

How to install the Wildfly server

Download the latest version from the wildfly site and unzip the wildfly folder and open the bin folder, click the standalone.bat file.

After a start, check the access of web server (http://localhost:8080). Open the Administrator console and follow the instruction to create a new user. if the new user creates now reopen the administrator console and redirects to management deployment, add a new .war or .jar files to run a project.

How to deploy the Angular in java platform

Install maven

Maven is automation tools to create primarily for the java project. To install maven project, check whether JDK installed and configured.

Then download the latest version of Apache Maven and unzip the folder and paste it as c:/Apache-maven. Installation is not required and copy and paste the folder.

when the installation finish, configure the maven folder in an environmental variable.

For verifying the maven installation, open the command prompt and run the mvn -version.

Install maven project

To create maven project, run the command mvn generate command

mvn archetype:generate -DgroupId={project pack name}

        -DartifactId={project name}
        -DarchetypeArtifactId=maven-archetype-webapp
        -DinteractiveMode=false

Example
mvn archetype:generate -DgroupId=com.projectapp
        -DartifactId=demo
        -DarchetypeArtifactId=maven-archetype-webapp
        -DinteractiveMode=false

How to configure angular to maven

create a new angular project name a projectdemo app and paste it in the maven project. The structure like this,

Maven Project structure

Maven project with angular

open the pom.xml and configure the maven plugin

 complier-plugin: no java to compile in an angular folder, the plugin excludes it.

    <plugins>
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-compiler-plugin</artifactId>
      </plugin>
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-war-plugin</artifactId>
        <version>2.6</version>
      </plugin>

front-end plugin: This plugin is used to install the npm and node locally for the maven project to compile the angular project.

<plugin>
        <groupId>com.github.eirslett</groupId>
        <artifactId>frontend-maven-plugin</artifactId>
        <version>1.0</version>
        <configuration>
          <workingDirectory>angular</workingDirectory>
          <installDirectory>temp</installDirectory>
        </configuration>
        <executions>
          <execution>
            <id>install node and npm</id>
            <goals>
              <goal>install-node-and-npm</goal>
            </goals>
            <configuration>
              <nodeVersion>v7.3.0</nodeVersion>
              <npmVersion>3.9.5</npmVersion>
            </configuration>
          </execution>

           <id>npm install</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <configuration>
              <arguments>install</arguments>
            </configuration>
          </execution>

          <execution>
            <id>npm build</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <configuration>
              <arguments>run build</arguments>
            </configuration>
          </execution>
        </executions>
      </plugin>

Maven-resources-plugin: This plugin is to run the angular project and change into war files and store in the target folder.

<plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-resources-plugin</artifactId>
        <version>2.4.2</version>
        <executions>
          <execution>
            <id>default-copy-resources</id>
            <phase>process-resources</phase>
            <goals>
              <goal>copy-resources</goal>
            </goals>
            <configuration>
              <overwrite>true</overwrite>
              <outputDirectory>${project.build.directory}/${project.artifactId}-${project.version}/</outputDirectory>
              <resources>
                <resource>
                  <directory>${project.basedir}/angular/dist</directory>
                </resource>
              </resources>
            </configuration>
          </execution>
        </executions>
      </plugin>
    </plugins>

Then if we configure the angular project, maven only opens index.JSP file as default. so add welcome file list and servlet mapping to open the index.html file in the angular project.

  <welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>

<servlet-mapping>
<servlet-name>index</servlet-name>
<url-pattern>*.html</url-pattern>
</servlet-mapping>

All configuration had finished, now build the maven project and deploy the war files in the wildfly server. To build a project use this command.

mvn clean install

open the Administrator console and add the war files and refresh the page. Now open the link as

http://localhost:8080/{projectwarfilename}