Cannot access vue.js frontend when running npm build (frontend-maven-plugin and spring-boot backend)

Question

Inspired by:

https://github.com/jonashackt/spring-boot-vuejs

I am building a vue.js frontend and a spring-boot backend using the frontend-maven-plugin. My project has the following structure:

webapp
 -> webapp-backend
 -> webapp-frontend

During development running npm run serve works fine and I can access my frontend at:

But when I build the application (using the frontend-maven-plugin) and run it with:

mvn clean install
java -jar webapp-backend/target/webapp-backend-1.0.0-SNAPSHOT.jar

I just get a blank page:

Even though there are no errors from the java logs.

Are there some additional configuration I need to apply in e.g. the spring-boot backend to get it to redirect correctly to my frontend during a production build?

Below some more details:

webapp/webapp-backend/src/main/java/hello/GreetingController.java

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/api")
public class GreetingController {


  @RequestMapping(value = "/**/{[path:[^\\.]*}")
  public String redirect() {
    // Forward to home page so that route is preserved.
    return "forward:/";
  }
}

webapp-backend/pom.xml

<build>
    <plugins>
         ...
        <plugin>
            <artifactId>maven-resources-plugin</artifactId>
            <executions>
                <execution>
                    <id>Copy Vue.js frontend assets</id>
                    <phase>generate-resources</phase>
                    <goals>
                        <goal>copy-resources</goal>
                    </goals>
                    <configuration>
                        <outputDirectory>src/main/resources/public</outputDirectory>
                        <overwrite>true</overwrite>
                        <resources>
                            <resource>
                                <directory>${project.parent.basedir}/webapp-frontend/dist</directory>
                                <includes>
                                    <include>static/</include>
                                    <include>index.html</include>
                                </includes>
                            </resource>
                        </resources>
                    </configuration>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>

webapp-backend/src/main/resources/public/index.html (non empty index.html file)

webapp/webapp-frontend/pom.xml

...
  <build>
    <plugins>
      <plugin>
        <groupId>com.github.eirslett</groupId>
        <artifactId>frontend-maven-plugin</artifactId>
        <version>${frontend-maven-plugin.version}</version>
        <executions>
          <execution>
            <id>install node and npm</id>
            <goals>
              <goal>install-node-and-npm</goal>
            </goals>
            <configuration>
              <nodeVersion>v10.0.0</nodeVersion>
            </configuration>
          </execution>
          <execution>
            <id>npm install</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <configuration>
              <arguments>install</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>  
...

Answer 1

Here are some things to consider, I don't know if any of them will help, but we never know:

On the backend:

• Check again your backend pom.xml and see if the required dependencies are properly in it
• Make sure you don't have a server.servlet.contextPath=/api in your application.properties
• Make sure the application.properties contains server.port=8080 (or just don't this property, the default port is 8080).
• I don't think the GreetingController is useful... The purpose of the @RequestMapping you specified on the method is to avoid your controller to take over when the client refreshes his page and the browser sends a /toto"... If you don't have this rule, your server will try to execute the /toto route, which it doesn't know of... Try either removing the @RequestMapping on your controller class, or delete the class for now...

On the frontend:

• You said your application were working when you were doing the npm run serve command and trying to access http://localhost:8080/... which is okay and weird. Using this command is to allow you to have a frontend server, faster to develop your frontend and your components. Here is my vue.config.js, see if you get the same, or something close:

module.exports = {
    'outputDir': 'target/dist',
    'assetsDir': 'static',
    'devServer': {
        'port': 8088,
        'proxy': {
            '/api': {
                'target': 'http://localhost:8080',
                'ws': true,
                'changeOrigin': true
            }
        }
    },
    'transpileDependencies': [
        'vuetify'
    ]
}

As you can see, my frontend dev server is accessible through the port 8088=> http://localhost:8088... Besides, I have the 'outputDir': 'target/dist',, making sure that my js files are written into the proper directory.

Here is what you can do to make sure your frontend and backend files are "connected": (in the webapp folder)

1. mvn clean
2. Delete the folder webapp-backend/src/main/resources/public and everything in it.
3. If you have one, delete the webapp-backend/src/main/resources/index.html (we never know)
4. Execute mvn install
5. Check the webapp-backend/src/main/resources. You should have a new public folder and everything in it (index.html, static/)

That should do the trick.

If you have the public folder created you are still experiencing the blank page issue, then I don't what else you can look for.

But give it a go !