https://github.com/making/ssr-react-spring-boot-graalvm-js
Server Side Rendering example with React + React Router + Vite + GraalVM (JS) + Spring Boot
https://github.com/making/ssr-react-spring-boot-graalvm-js
Last synced: 12 months ago
JSON representation
Server Side Rendering example with React + React Router + Vite + GraalVM (JS) + Spring Boot
- Host: GitHub
- URL: https://github.com/making/ssr-react-spring-boot-graalvm-js
- Owner: making
- License: apache-2.0
- Created: 2024-04-08T13:21:17.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-31T05:55:59.000Z (over 1 year ago)
- Last Synced: 2024-07-31T07:22:03.951Z (over 1 year ago)
- Language: Java
- Homepage: https://ssr-react-spring-boot-graalvm-js-demo.apps.ik.am
- Size: 419 KB
- Stars: 7
- Watchers: 2
- Forks: 2
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Server Side Rendering example with React + React Router + Vite + GraalVM (JS) + Spring Boot
This project demonstrates server-side rendering (SSR) using React with Spring Boot and GraalVM's JavaScript engine. The approach allows for faster page loads and improved SEO compared to client-side rendering.
Demo: https://demo-blog.ik.am
> [!NOTE]
> This implementation assumes the use of GraalVM 21, however, except for native image creation, it should work with other JDK 21 implementations as well.
Before running the application in your IDE, please execute the following command to bundle the required JavaScript resources:
```
./mvnw compile
```
## Running the local server
Start the application with proper code formatting applied:
```
./mvnw spring-javaformat:apply spring-boot:run
```
Once the application is running, you can access it in your browser at:
http://localhost:8080
You can also test the server-side rendering by making a request to one of the routes:
```
curl -s http://localhost:8080/posts/1
```
This will return the fully rendered HTML for the requested route.
## UI development only
For UI development with hot-reloading capabilities, navigate to the UI directory and start the Vite development server:
```
cd ui
npm run dev
```
Note that for UI development, you need to have the backend server (localhost:8080) running. The UI development server will proxy API requests to the backend.
## Creating an executable jar file
Build an executable JAR file with the following command:
```
./mvnw package -DskipTests
```
Run the packaged application:
```
java -jar target/ssr-react-spring-boot-graalvm-js-0.0.1-SNAPSHOT.jar
```
Test that the application is working correctly:
```
curl -s http://localhost:8080/posts/1
```
## Native image creation
Native images provide faster startup and reduced memory usage. To build a native image, ensure your `JAVA_HOME` points to GraalVM 21:
```
./mvnw -Pnative native:compile -DskipTests
```
Run the compiled native executable:
```
./target/ssr-react-spring-boot-graalvm-js --management.otlp.tracing.endpoint=https://httpbin.org/post
```
Verify the application is working:
```
curl -s http://localhost:8080/posts/1
```
You can also create a docker image as follows:
```
./mvnw spring-boot:build-image -DskipTests -Dspring-boot.build-image.imageName=ghcr.io/making/ssr-react-spring-boot-graalvm-js:native -Pnative
```
Run the docker image:
```
docker run --name demo --rm ghcr.io/making/ssr-react-spring-boot-graalvm-js:native --management.otlp.tracing.endpoint=https://httpbin.org/post
```
This containerized approach ensures consistent runtime environments across different deployment platforms.