spring boot "frontend gradle 플러그인" + vite (solid.js)

.gitignore 추가

node
node_modules
.frontend-gradle-plugin

spring boot (kts)

• react라면
• gradle용 플러그인

plugins {
	// ... 생략

    id("org.siouan.frontend-jdk17") version "8.0.0"
}

frontend {
    nodeVersion = "20.10.0"
    nodeInstallDirectory = project.layout.projectDirectory.dir("node")

    // https://siouan.github.io/frontend-gradle-plugin/configuration/#script-settings
    
    // vite는 빌드 때마다 알아서 지운다
    // https://github.com/vitejs/vite/issues/10986
    cleanScript = null
    // assembleScript가 null이면 publishFrontend 는 실행되지 않음.
    // 그냥 assembleScript에만 넣는 게 나을듯
    assembleScript = "run build"
    publishScript = null 
}

// 채찍피티한테 물어봤음. 완전하진 않지만 자동으로 빌드하고 싶어서...
// 백엔드 빌드에 프론트까지 빌드하기 싫으면 주석처리하면 됨
tasks.processResources {
    dependsOn("assembleFrontend")
}

vite + solid template

템플릿 목록

npx degit solidjs/templates/ts-unocss my-solid-project

파일 이동:

• index.html -> src/main/frontend/index.html
• 그 외의 파일은 spring boot 프로젝트 루트에 복사

<script src="/src/index.tsx" type="module"></script>
를
<script src="src/index.tsx" type="module"></script>
로 바꿨는데 이게 맞는지 모르겠음

package.json

• packageManager를 넣어줘야 함
• 넣는 방법

  "packageManager": "pnpm@8.13.1",

vite.config.ts

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
// import devtools from 'solid-devtools/vite';
import UnocssPlugin from '@unocss/vite';

export default defineConfig({
  plugins: [
    /* 
    Uncomment the following line to enable solid-devtools.
    For more info see https://github.com/thetarnav/solid-devtools/tree/main/packages/extension#readme
    */
    // devtools(),
    solidPlugin(),
    UnocssPlugin({
      // your config or in uno.config.ts
    }),
  ],

  // https://stackoverflow.com/a/69746868
  base: './',
  root: 'src/main/frontend',

  build: {
    target: 'esnext',
    // https://ko.vitejs.dev/config/build-options.html#build-outdir
    outDir: '../../../src/main/resources/static/',
    assetsDir: './assets',
    emptyOutDir: true,
  },
  server: {
    // https://ko.vitejs.dev/config/server-options.html#server-proxy
    // https://velog.io/@wooryung/Spring-Boot%EC%99%80-Vue.js-%EC%97%B0%EB%8F%99%ED%95%98%EA%B8%B0
    proxy: {
      "/api": "http://localhost:12346"
    },
    port: 3000,
  },
});