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>  
...

First question: I find it weird your java command line to run the jar: webapp-backend/.... It seems to me you don't have any webapp-backend folder ? And could you tell me what is the content of your application.properties ? and the content of your folder : backend/src/main/resources/public ? thanks — RUARO Thibault
– RUARO Thibault, Commented Apr 5, 2020 at 16:18
and the content of the webapp-backend/src/main/resources/public folder ? — RUARO Thibault
– RUARO Thibault, Commented Apr 5, 2020 at 16:48
See updated post, it contains: webapp-backend/src/main/resources/public/index.html — u123
– u123, Commented Apr 5, 2020 at 17:28

RUARO Thibault · Accepted Answer · 2020-04-05 19:04:35Z

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)

mvn clean
Delete the folder webapp-backend/src/main/resources/public and everything in it.
If you have one, delete the webapp-backend/src/main/resources/index.html (we never know)
Execute mvn install
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 !

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related