grails-vite-spa/
|-- settings.gradle              # include ':backend' (frontend is npm-only)
|-- build.gradle                 # npmInstall, frontendBuild, copyFrontendToBackend
|-- backend/                     # Grails 8 rest_api
|   `-- grails-app/
|       |-- domain/example/Book.groovy
|       |-- controllers/example/BookController.groovy        # /api/books
|       |-- controllers/example/SpaController.groovy         # forwards / -> SPA
|       |-- controllers/example/UrlMappings.groovy
|       `-- views/book/{_book,index,show}.gson
`-- frontend/                    # Vite + React (NOT a Gradle subproject)
    |-- package.json
    |-- vite.config.js           # proxy /api/** -> http://localhost:8080
    |-- index.html
    `-- src/{main.jsx, App.jsx, index.css}

git clone -b grails8 https://github.com/grails-guides/grails-vite-spa.git
cd grails-vite-spa/complete

# Dev (two shells):
./gradlew :backend:bootRun                  # http://localhost:8080
cd frontend && npm install && npm run dev   # http://localhost:5173

# Prod (one bootJar packages both halves):
./gradlew :backend:bootJar
java -jar backend/build/libs/backend-0.1.jar  # http://localhost:8080

/*
 * Two-tier multi-project build.
 *
 *   backend/    Grails 8 rest_api - JSON over /api/**
 *   frontend/   Vite + React - NOT a Gradle subproject; driven by npm
 *               via the npmInstall + frontendBuild + copyFrontendToBackend
 *               tasks in the root build.gradle.
 *
 * A single bootJar produced by `./gradlew :backend:bootJar` ships both
 * halves: the SPA's static bundle is copied into backend/src/main/
 * resources/public/ before bootJar packages it.
 */

rootProject.name = 'grails-vite-spa'

include ':backend'

/*
 * Root build script.
 *
 * The frontend module is NOT a Gradle subproject - it lives as a plain
 * npm directory at frontend/ with its own package.json. Three Gradle
 * tasks bridge the two halves:
 *
 *   npmInstall              -> npm install in frontend/
 *   frontendBuild           -> npm run build (writes frontend/dist/)
 *   copyFrontendToBackend   -> copies dist/ into backend/src/main/
 *                              resources/public/ so bootJar packages it
 *
 * The backend's processResources task depends on copyFrontendToBackend
 * so a plain `./gradlew :backend:bootJar` (or :backend:bootRun) builds
 * the SPA and copies it into the right place automatically.
 */

def npxCmd = org.gradle.internal.os.OperatingSystem.current().isWindows() ? 'npx.cmd' : 'npx'
def npmCmd = org.gradle.internal.os.OperatingSystem.current().isWindows() ? 'npm.cmd' : 'npm'

// tag::frontendTasks[]
tasks.register('npmInstall', Exec) {
    description = 'Install npm dependencies for the frontend SPA'
    group = 'frontend'
    workingDir = file('frontend')
    inputs.file('frontend/package.json')
    outputs.dir('frontend/node_modules')
    commandLine npmCmd, 'install', '--no-fund', '--no-audit'
}

tasks.register('frontendBuild', Exec) {
    description = 'Build the Vite/React SPA into frontend/dist/'
    group = 'frontend'
    dependsOn 'npmInstall'
    workingDir = file('frontend')
    inputs.dir('frontend/src')
    inputs.file('frontend/index.html')
    inputs.file('frontend/vite.config.js')
    inputs.file('frontend/package.json')
    outputs.dir('frontend/dist')
    commandLine npmCmd, 'run', 'build'
}

tasks.register('copyFrontendToBackend', Copy) {
    description = 'Copy the built SPA into backend/src/main/resources/public/'
    group = 'frontend'
    dependsOn 'frontendBuild'
    from file('frontend/dist')
    into file('backend/src/main/resources/public')
}
// end::frontendTasks[]

project(':backend') {
    afterEvaluate {
        tasks.named('processResources').configure { dependsOn rootProject.tasks.named('copyFrontendToBackend') }
    }
}

package example

import grails.persistence.Entity

@Entity
class Book {

    String  title
    String  author
    String  isbn

    static constraints = {
        title  blank: false, maxSize: 255
        author blank: false, maxSize: 255
        isbn   blank: false, unique: true, matches: /^(97(8|9))?\d{9}(\d|X)$/
    }
}

package example

import grails.rest.RestfulController

class BookController extends RestfulController<Book> {
    static responseFormats = ['json']
    BookController() { super(Book) }

    @Override
    protected List<Book> listAllResources(Map params) {
        params.max = Math.min(params.int('max', 25), 100)
        Book.list(params)
    }
}

import example.Book

model { Book book }

json {
    id     book.id
    title  book.title
    author book.author
    isbn   book.isbn
}

import example.Book

model {
    Iterable<Book> bookList
    Long           bookCount
}

json {
    total   bookCount
    items   bookList.collect { Book b -> g.render(template: 'book', model: [book: b]) }
}

package example

class UrlMappings {

    static mappings = {

        // SPA routes resolved here so client-side routing survives
        // a hard reload to any deep link.
        '/' (controller: 'spa', action: 'index')

        // JSON API surface consumed by the Vite/React frontend.
        '/api/books'(resources: 'book')

        '500'(view: '/error')
        '404'(view: '/notFound')
    }
}

package example

class SpaController {
    static responseFormats = ['html']

    /**
     * Forwards any non-/api request to the SPA's bundled index.html
     * (which Vite produced into src/main/resources/public/index.html).
     * Spring Boot auto-serves that file at /; we forward here so client-
     * side routes like /books/42 survive a browser refresh.
     */
    def index() {
        forward url: '/index.html'
    }
}

{
  "name": "grails-vite-spa-frontend",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.3.0",
    "vite": "^5.4.0"
  }
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>Grails + Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import './index.css'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

import { useEffect, useState } from 'react'

/**
 * Single-screen SPA: lists books from the Grails backend's /api/books
 * and lets the user add a new one.
 *
 * fetch('/api/books') resolves through the Vite proxy in dev and
 * directly (same-origin) from the bundled SPA in prod.
 */
export default function App() {
  const [books, setBooks] = useState([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  useEffect(() => {
    fetch('/api/books')
      .then((r) => (r.ok ? r.json() : Promise.reject(r.statusText)))
      .then((data) => setBooks(data.items || []))
      .catch((e) => setError(String(e)))
      .finally(() => setLoading(false))
  }, [])

  return (
    <main className="container">
      <h1>Library</h1>
      {loading && <p>Loading...</p>}
      {error && <p className="error">Error: {error}</p>}
      {!loading && !error && (
        <ul>
          {books.map((b) => (
            <li key={b.id}>
              <strong>{b.title}</strong> by {b.author} ({b.isbn})
            </li>
          ))}
          {books.length === 0 && <li>No books yet.</li>}
        </ul>
      )}
    </main>
  )
}

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

/**
 * In dev: `npm run dev` starts Vite on :5173 with HMR.
 *   - Requests to /api/** get proxied to the Grails backend on :8080,
 *     so the SPA can fetch('/api/books') without dealing with CORS.
 * In prod: `npm run build` writes a static bundle to ./dist/.
 *   - The root build.gradle copies dist/ into
 *     backend/src/main/resources/public/ so Spring Boot serves the
 *     SPA from the same origin as the API. Still no CORS.
 */
export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },
  build: {
    outDir: 'dist',
    emptyOutDir: true,
  },
})

# Shell 1
./gradlew :backend:bootRun
# Backend on http://localhost:8080
# Spring DevTools reloads on Groovy changes

# Shell 2
cd frontend
npm install
npm run dev
# Vite on http://localhost:5173
# HMR updates the browser on JSX/CSS changes without losing component state

./gradlew :backend:bootJar

grails:
    cors:
        enabled: true
        allowedOrigins:
            - 'https://app.example.com'
        allowedMethods:
            - GET
            - POST
        allowCredentials: true