https://github.com/wimdeblauwe/vitetest

https://github.com/wimdeblauwe/vitetest

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/wimdeblauwe/vitetest
• Owner: wimdeblauwe
• Created: 2024-07-11T13:54:54.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-07-12T09:59:12.000Z (5 months ago)
• Last Synced: 2024-07-12T16:28:54.768Z (5 months ago)
• Language: Java
• Size: 125 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.adoc

Awesome Lists containing this project

README

        
= Spring Boot with Vite test project

== Goal

This repository explorers how Vite can be used in a Spring Boot with Thymeleaf project.

== Getting started

=== Development

. Run `npm install` to install the needed dependencies.

. Run `npm run dev` to start the Vite development server.

. Start the Spring Boot application using the `local` profile.

. Open your browser at http://localhost:8080

You can now edit any CSS, JavaScript, TypeScript or HTML file and the browser should refresh as soon as you save the change.

=== Production

. Run `npm install` to install the needed dependencies.

. Run `npm run build` to have Vite bundle and build all the assets.

. Start the Spring Boot application using the `prod` profile.

. Open your browser at http://localhost:8080

If you check the HTML, you should see that it now uses hashed file names as they are generated by Vite.

== How it works

The `vite.config.js` has all the configuration for Vite:

* `plugins`: Defines 2 Vite plugins:

** `writeServerConfigPlugin`: This plugin generates a JSON file that contains the host and port of the Vite development server. The Spring Boot application will read this file to know where the development server is hosting the files.

** `copyHtmlTemplatesPlugin`: This plugin copies the Thymeleaf templates to the `target` folder when starting, or whenever they are changed.

* `root`: Defines the root directory where Vite searches for assets. Set to `src/main/resources`.

* `build`: Options for the production build. Important to have any CSS or JavaScript file that you want to use from a Thymeleaf template referenced here. There is no need to specify further imports from that top-level file, they will be included automatically.

On the Java side, a custom Thymeleaf tag and attribute processor is added that knows where the CSS or JavaScript can be found, depending on wether you run in development or production mode.

Example:

[source,html]

----

    

    

    

----

* `` renders the HMR client of Vite when running in development mode.

* `vite:href` is used to reference the asset itself. The attribute processor will convert this into a link to either the Vite development server, or to the bundled asset.

== Future

This is just a POC, so futher testing will be needed.

The https://vitejs.dev/guide/backend-integration.html[Vite Backend Integration] also mentions something about chunks that is not handled yet. Not sure when exactly this is needed.

Once this is more mature, we could create a JavaScript library with those 2 Vite plugins and a Java library with the Thymeleaf integration to make it easy to setup the Vite integration. At that point, https://github.com/wimdeblauwe/ttcli[ttcli] could offer Vite as an option to create a Spring Boot with Thymeleaf project.