How to deploy webapp that was made with Angular and Java Spring-boot?

Question

I want to deploy a web app onto a website and share it publicly.

I have followed this guide: https://developer.okta.com/blog/2017/12/04/basic-crud-angular-and-spring-boot

I was able to deploy it onto localhost, but how do I deploy this app onto a live webpage?

Answer 1

You can build your angular app using maven and put it in resources package. this way on starting spring using a webServer (for example jetty) you will access your angular app on webServer port(for example 8080).

Here is an example of pom.xml .

<plugin>
     <configuration>
         <nodeVersion>${node.version}</nodeVersion>
         <npmVersion>${npm.version}</npmVersion>

     <workingDirectory>${project.basedir}/src/main/frontend/</workingDirectory>
         <outputdir>${project.basedir}/src/main/resources/public/</outputdir>
                    </configuration>
                    <executions>
                        <execution>
                            <id>install node and npm</id>
                            <goals>
                                <goal>install-node-and-npm</goal>
                            </goals>
                            <phase>generate-resources</phase>
                        </execution>
                        <execution>
                            <id>npm install</id>
                            <goals>
                                <goal>npm</goal>
                            </goals>
                        </execution>
                        <execution>
                            <id>npm version</id>
                            <goals>
                                <goal>npm</goal>
                            </goals>
                            <configuration>
                                <arguments>-v</arguments>
                            </configuration>
                        </execution>
                        <execution>
                            <id>npm run build</id>
                            <goals>
                                <goal>npm</goal>
                            </goals>
                            <configuration>
                                <arguments>run build</arguments>
                            </configuration>
                        </execution>
                    </executions>
                </plugin>
            </plugins>
        </build>

Also in your angular.json:

"projects": {
    "[APP_NAME]": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "../resources/public/",
          }
        }
      }
    }
}