Combined Development Environment: Spring Boot + Vue 3

1. Project Structure

your-project/
├── backend/           ← Spring Boot project (Maven or Gradle)
├── frontend/          ← Vue 3 project (Vite preferred)

Use this monorepo structure to keep backend and frontend organized.

2. Backend Setup (Spring Boot)

• Create project in IntelliJ via Spring Initializr.
• Add dependencies: Spring Web, Spring Data JPA, Lombok, etc.
• Set location to your-project/backend.

3. Frontend Setup (Vue 3 + Vite)

npm create vite@latest frontend
cd frontend
npm install
npm run dev

Use Vue + Vite for fast hot-reload experience.

4. IntelliJ IDEA Configuration

• Open the root folder your-project/.
• Install Node.js plugin in IntelliJ.
• Use “npm scripts” panel to run frontend tasks.

5. Vite Dev Server Proxy

In frontend/vite.config.js:

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
})

This proxies Vue dev requests to Spring Boot backend.

6. Serving Frontend from Backend (Optional)

• Run npm run build in frontend/
• Copy dist/ to backend/src/main/resources/static

7. IntelliJ Run Configurations

• Spring Boot app: port 8080
• Vue dev server: port 5173

8. Tips

• Use axios in Vue to call backend APIs.
• Use Vue Router and Pinia as needed.
• Enable Spring CORS config for dev.
• Use spring-boot-devtools for live reload.