How to deploy vue dist folder to GlassFish 5?

I'm trying to figure out a way to deploy my vue project on GlassFish 5. The reason is that I have two projects. A java based REST project that runs on GlassFish. And a pure Vue project, which previously ran on node.js.

Since I have to struggle with CORS problems again and again due to the 2 different hosts, I would like to combine the two projects on one server.

If I understand that correctly in the Vue Docs (how to create dist folder) , then first of all I have to create a dist folder with serve -s dist.

What do I have to do with this folder in order to deploy it on my GlassFish server?

The goal would be that I can continue to develop the frontend in my pure Vue project, then create a new dist folder from it, and then move it to wherever I need to make it available via my GlassFish server.

From there, I call up my rest interface without running into any CORS problems.

My rest/backend project is built with Maven and is a war.

Solution

You can bundle your Frontend build steps within your Maven build using the frontend-maven-plugin. Just execute the command which builds your Vue app (e.g. npm run build) with this Maven plugin and configure the .war file to include the dist folder as a web resource.

I did the same for a React + Jakarta EE application running on Payara (which is similar to Glassfish) with the following setup (you might have to adjust it to your folder structure):

<project>

  <!-- dependencies like seen above -->

  <build>
    <finalName>jakarta-ee-react-file-handling</finalName>
    <plugins>
      <plugin>
        <groupId>com.github.eirslett</groupId>
        <artifactId>frontend-maven-plugin</artifactId>
        <version>1.8.0</version>
        <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>
            <phase>generate-resources</phase>
            <configuration>
              <arguments>install</arguments>
            </configuration>
          </execution>
          <execution>
            <id>npm test</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <phase>generate-resources</phase>
            <configuration>
              <environmentVariables>
                <CI>true</CI>
              </environmentVariables>
              <arguments>test</arguments>
            </configuration>
          </execution>
          <execution>
            <id>npm build</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <phase>generate-resources</phase>
            <configuration>
              <environmentVariables>
                <CI>true</CI>
              </environmentVariables>
              <arguments>run build</arguments>
            </configuration>
          </execution>
        </executions>
        <configuration>
          <workingDirectory>src/main/frontend</workingDirectory>
          <nodeVersion>v12.13.1</nodeVersion>
        </configuration>
      </plugin>
      <plugin>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.8.1</version>
      </plugin>
      <plugin>
        <artifactId>maven-surefire-plugin</artifactId>
        <version>2.22.2</version>
      </plugin>
      <plugin>
        <artifactId>maven-war-plugin</artifactId>
        <version>3.2.3</version>
        <configuration>
          <webResources>
            <resource>
              <directory>${project.basedir}/src/main/frontend/build</directory>
            </resource>
          </webResources>
        </configuration>
      </plugin>
    </plugins>
  </build>
</project>

I've also written a guide on bundling the frontend build with a Jakarta EE backend and the source code is also available on GitHub.