如何在已完成的Vaadin-SpringBoot项目中集成Hilla

结论先行：完全可以在现有Spring Boot项目基础上集成Hilla，不用重新搭建后端架构，只需调整Maven依赖、添加前端代码就能尝试React或Lit。

步骤1：修改Maven配置 #

1.1 更新BOM依赖

在<dependencyManagement>里，把原有的Vaadin BOM替换成Hilla的BOM（注意版本兼容：Hilla 2.x对应Vaadin 24.x，选最新稳定版即可）：

<dependencyManagement>
    <dependencies>
        <dependency>
            <groupId>dev.hilla</groupId>
            <artifactId>hilla-bom</artifactId>
            <version>2.4.3</version> <!-- 替换为当前最新兼容版本 -->
            <type>pom</type>
            <scope>import</scope>
        </dependency>
    </dependencies>
</dependencyManagement>

1.2 替换前端核心依赖

在<dependencies>里移除原有的vaadin依赖，添加Hilla的Spring Boot Starter，保留原有Spring相关依赖不变：

<dependencies>
    <!-- 移除原vaadin依赖 -->
    <!-- <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin</artifactId>
    </dependency> -->
    
    <!-- 添加Hilla核心依赖 -->
    <dependency>
        <groupId>dev.hilla</groupId>
        <artifactId>hilla-spring-boot-starter</artifactId>
    </dependency>
    
    <!-- 保留原有的vaadin-spring-boot-starter和其他Spring依赖 -->
    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin-spring-boot-starter</artifactId>
    </dependency>
    <!-- ... 其他原有依赖无需修改 -->
</dependencies>

1.3 仓库配置无需额外调整

你现有pom中的Vaadin仓库已支持拉取Hilla相关包，无需新增仓库。

步骤2：初始化前端环境 #

1. 在项目根目录新建frontend文件夹，进入后初始化npm项目：

cd frontend
npm init -y

2. 根据需求安装对应前端框架依赖：

• 若用React：

npm install react react-dom @hilla/react

• 若用Lit：

npm install lit @hilla/lit

3. 编写入口文件和基础视图：
   以React为例，新建frontend/index.tsx：

import { createRoot } from 'react-dom/client';
import { Router } from '@hilla/react-router';
import HomeView from './views/HomeView';

// 配置路由，与原有Vaadin路径区分开
const routes = [
  { path: '/hilla', component: <HomeView /> },
];

createRoot(document.getElementById('root')!).render(
  <Router routes={routes} />
);

再新建简单的视图文件frontend/views/HomeView.tsx：

export default function HomeView() {
  return <h1>Hello Hilla React!</h1>;
}

4. 创建页面模板frontend/index.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Hilla测试页</title>
</head>
<body>
    <div id="root"></div>
    <script type="module" src="/index.tsx"></script>
</body>
</html>

步骤3：配置Spring路由映射 #

编写一个简单的控制器，将/hilla路径映射到Hilla前端页面，避免与原有Vaadin视图冲突：

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HillaFrontendController {
    @GetMapping("/hilla")
    public String hillaFrontend() {
        return "forward:/frontend/index.html";
    }
}

步骤4：启动项目验证 #

运行Spring Boot应用，访问http://localhost:8080/hilla即可看到Hilla的前端页面，原有Vaadin视图仍可通过原路径正常访问。

注意事项 #

• 版本需匹配：Hilla 2.x对应Vaadin 24.x，避免跨版本兼容问题
• 若遇依赖冲突，可执行mvn dependency:tree排查，通过依赖排除调整
• 原有Vaadin视图与Hilla前端可共存，通过不同访问路径区分

内容的提问来源于stack exchange，提问作者James