Build VueJS in Spring Boot

Tram Ho

Recently, because I have a bit of free time, I have dabbled in Spring Boot + Gradle instead of Spring Boot + Maven as usual, often used because some big boys told Gradle that Gradle is much better than Maven. As a result, it seems to be true, both in terms of performance and the way to write build-scripts in Gradle seems cleaner than Maven. To illustrate, I will create a Spring project in combination with FE (specifically VueJS, you can replace it with ReactJS) and build it in one go (quite similar to writing Jenkins Pipeline to build both FE and BE on the server). Enough long enough, let’s start now.

1. Create Project

You can create a project at Spring Initializr or create directly in the IDE (I use Eclipse, you can use IntelliJ or any other IDE). Since this is only a demo of the build, I only choose simple dependencies

Now I will create more vue project. The structure of the project is as follows

Ok that’s it. You can test the 2 newly created projects to test

2. Config build.gradle

Now we will get to the main goal of this article. Basically our build task will be as follows

  1. yarn install will bring the dependencies back into node_modules
  2. yarn build webpack will build your code, components, css, and images into unique static resources at the dist directory.
  3. Copy all static resources to the static resources directory of the spring project
  4. Compile resources and java code into a single jar package. These are the steps we will do in normal build, but with the config in build.gradle, Gradle will run the corresponding task and do this for us (also from configuring the steps in CI / CD). so). ! Install additional plugins to support node and node scripts

Config configuration of the node

Build tasks

The build task will start running in processResources first and will run vueBuild, which will specifically wait for vueInstall to finish first. The order will be the same as the steps we declared above. After that, Gradle will copy the files just built to the resource folder.

3. Build project

Run the command gradlew clean build or gradlew bootRun (this command will run the jar file just built) and see the results.

You can also test the jar file just built at build / libs by using java -jar <tên_file.jar>

You can check it out by browser http: // localhost: 8080 / # / see if you have seen the welcome page of vue or not.

Share the news now

Source : Viblo