Backend Integration: Load transpiled TypeScript/SASS assets via dev server

[ffraenz]

Hi there! I tried to follow the docs on Backend Integration to add Vite to our WordPress stack, but can't access transpiled versions of the TypeScript and SCSS entrypoints when running vite (dev server).

Here's my vite.config.ts:

import path from 'node:path'
import { defineConfig } from 'vite'

export default defineConfig({
  publicDir: path.resolve(__dirname, 'public'),
  build: {
    manifest: true,
    outDir: path.resolve(__dirname, 'public/content/themes/theme/assets/dist'),
    copyPublicDir: false,
    emptyOutDir: true,
    sourcemap: true,
    rollupOptions: {
      input: [
        path.resolve(__dirname, 'public/content/themes/theme/scripts/index.ts'),
        path.resolve(__dirname, 'public/content/themes/theme/styles/index.scss')
      ]
    }
  }
})

As far as I read the docs, I need to put this code into my frontend HTML to load the dev assets:

<link rel="stylesheet" href="http://localhost:5173/content/themes/theme/styles/index.scss" type="text/css">
<script type="module" src="http://localhost:5173/@vite/client" defer></script>
<script type="module" src="http://localhost:5173/content/themes/theme/scripts/index.ts" defer></script>

However, when I open http://localhost:5173/content/themes/theme/scripts/index.ts I get:

console.log('Hello, World.' as string)

I expected this to be a transpiled JavaScript version similar to the one I get when running vite build:

console.log("Hello, World.");

The same applies to the SCSS entrypoint.

Is this how it is supposed to work or am I using the wrong asset URLs in dev mode?

[ffraenz]

I was able to solve the issue by disabling publicDir. It might have interfered with the delivery of transpiled assets. Also, I noticed, that the Vite client needs to be loaded first, before Vite starts transpiling entrypoints. Refreshing the TypeScript asset without hitting the Vite client before, shows the original file. That was misleading during debugging. Now I get consistent results.

Here's my updated vite.config.ts:

import path from 'node:path'
import { defineConfig } from 'vite'

export default defineConfig({
  publicDir: false,
  build: {
    manifest: true,
    outDir: path.resolve(__dirname, 'public/content/themes/theme/assets/dist'),
    emptyOutDir: true,
    sourcemap: true,
    rollupOptions: {
      input: [
        path.resolve(__dirname, 'public/content/themes/theme/scripts/index.ts'),
        path.resolve(__dirname, 'public/content/themes/theme/styles/index.scss')
      ]
    }
  }
})