ccreusat/demo-vertx-react-vitejs

How to start a backend with Vertx and a React frontend with ViteJS

Demo Vertx + React

How to start a backend with Vertx and a React frontend with ViteJS.

References

• Vert.x How To
• Vert.x Docs

Prerequisite

• NodeJS
• HTTPie

Install

git clone git@github.com:ccreusat/demo-vertx-react-vitejs.git

Go to src/main/frontend and install React

yarn

Backend

Inside root folder, start Vertx on Port 3001 with Gradle

./gradlew run

For this example, /api/message will send this message:

Hello React from Vert.x!

You can check if route is working fine with:

• HTTPie in your terminal

http :3001/api/message

• Using route in your browser

http://localhost:3001/api/message

Hello React from Vert.x!

Frontend

Start ViteJS localhost on Port 3000 inside src/main/frontend

yarn dev

You should see Hello React from Vert.x! inside your client app.

Server Proxy

ViteJS Server will listen the Port 3001 on /api route:

server: {
    proxy: {
      "/api": "http://localhost:3001",
    },
    host: "0.0.0.0",
    port: 3000,
    open: true,
}

Server Options

Build

The build task will create the frontend application and add the bundle to: build/classes/java/main/webroot

./gradlew run

Browse to http://localhost:3001 and you should see the build version.