Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wimdeblauwe/vite-spring-boot
https://github.com/wimdeblauwe/vite-spring-boot
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/wimdeblauwe/vite-spring-boot
- Owner: wimdeblauwe
- License: apache-2.0
- Created: 2024-08-19T18:34:46.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-11-18T21:02:48.000Z (about 2 months ago)
- Last Synced: 2024-11-18T22:19:28.190Z (about 2 months ago)
- Language: Java
- Size: 113 KB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Spring Boot library for Vite integration
This library allows to use [Vite](https://vitejs.dev/) as the frontend build tool to have live
reloading (Called Hot Module Replacement or HMR).
It must be used together with
the [vite-plugin-spring-boot](https://www.npmjs.com/package/@wim.deblauwe/vite-plugin-spring-boot)
on the frontend.
> [!TIP]
> The easiest way to generate a working setup is to generate the Spring Boot project
> using [ttcli](https://github.com/wimdeblauwe/ttcli).
## Maven configuration
When using Thymeleaf:
```xml
io.github.wimdeblauwe
vite-spring-boot-thymeleaf
LATEST_VERSION_HERE
```
Other templating engines are currently not supported, but you can use the classes in `vite-spring-boot` as those do not
depend on Thymeleaf to build support.
Use the following dependency in that case:
```xml
io.github.wimdeblauwe
vite-spring-boot
LATEST_VERSION_HERE
```
## Usage
### Hot Module Reload client
Vite needs the HMR client rendered when running in DEV mode.
This library exposes the `` tag to conditionally render the HMR depending on the value of the `vite.mode`
application configuration setting.
For example:
```html
```
If the mode is `DEV`, then the HMR client is rendered. If it is `BUILD` then nothing is rendered.
### React components and Hot Module Reload
If you want to add React componets on your Thymeleaf page, then you need to something extra to make the HMR work. You
need the `` on your page.
For example:
```html
```
If the mode is `DEV`, then the extra code is rendered. If it is `BUILD` then nothing is rendered.
### Vite entry points
Any CSS or JavaScript that is used in the Spring Boot application needs to be added to the list of entrypoints. The
`` and `` tags can be used for this.
For example:
```html
```
When running in DEV mode, this will point to the HMR server of Vite so live reloading works.
When running in BUILD mode, the manifest JSON that Vite generates is read and the links to the compiled assets are
generated.
> [!IMPORTANT]
> If you add an entry point here, you also need to add it to your `vite.config.js`, otherwise the production build will
> not pick it up!
## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.
## License
[Apache 2.0](https://choosealicense.com/licenses/apache-2.0/)
## Release
To release a new version of the project, follow these steps:
1. Update `pom.xml` with the new version (Use `mvn versions:set -DgenerateBackupPoms=false -DnewVersion=`)
2. Commit the changes locally.
3. Tag the commit with the version (e.g. `1.0.0`) and push the tag.
4. Create a new release in GitHub via https://github.com/wimdeblauwe/vite-spring-boot/releases/new
- Select the newly pushed tag
- Update the release notes. This should automatically start
the [release action](https://github.com/wimdeblauwe/vite-spring-boot/actions).
5. Update `pom.xml` again with the next `SNAPSHOT` version.
6. Close the milestone in the GitHub issue tracker.