CD
Cloudflare Developers•2mo ago
DrWayne

Are you the team working on the Vite

Are you the team working on the Vite plugin? I've been enjoying that for local dev and may have found an edge case when running Astro with other Vite plugins.
4 Replies
James Opstad
James Opstad•2mo ago
We are. It doesn't support Astro at present though. We are in touch with the Astro team but we're still a way off getting things to a place where it works well with the Cloudflare plugin.
DrWayne
DrWayneOP•2mo ago
Ah. Okay. Well, it is working well for some cases. I am doing SSG only (no SSR for Astro) with a hono Worker accessed via a Vue island. Everything is fine until I add Tailwind via another Vite plugin. Then I get CSS files in dist/_astro/ as well as the JS in dist/client/_astro/ and then it doesn't deploy properly (it seems to treat dist/client as static resources to be deployed as a sub dir since it found things in the dist/ folder to deploy). Is this something I should open a github issue over or just wait for deeper Astro support? (I have a work around where I just move all the dist/client/ files to dist/ before deploy. Not ideal, but gets the job done in the meantime.)
James Opstad
James Opstad•2mo ago
Are you using the @tailwindcss/vite plugin? Before adding it is the output just in dist/client/_astro?
DrWayne
DrWayneOP•2mo ago
$ cat package.json 
{
  "name": "ecomm-nano-starter",
  "type": "module",
  "version": "0.0.1",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro",
    "deploy": "npm run build && wrangler deploy"
  },
  "dependencies": {
    "@astrojs/vue": "^5.1.0",
    "@cloudflare/vite-plugin": "^1.12.1",
    "@tailwindcss/vite": "^4.1.12",
    "astro": "^5.13.4",
    "hono": "^4.9.4",
    "tailwindcss": "^4.1.12",
    "vue": "^3.5.20",
    "wrangler": "^4.33.1"
  }
}
$ cat package.json 
{
  "name": "ecomm-nano-starter",
  "type": "module",
  "version": "0.0.1",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro",
    "deploy": "npm run build && wrangler deploy"
  },
  "dependencies": {
    "@astrojs/vue": "^5.1.0",
    "@cloudflare/vite-plugin": "^1.12.1",
    "@tailwindcss/vite": "^4.1.12",
    "astro": "^5.13.4",
    "hono": "^4.9.4",
    "tailwindcss": "^4.1.12",
    "vue": "^3.5.20",
    "wrangler": "^4.33.1"
  }
}
$ cat astro.config.mjs 
// @ts-check
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';
//import tailwindcss from '@tailwindcss/vite';
import { cloudflare } from '@cloudflare/vite-plugin';

// https://astro.build/config
export default defineConfig({
  integrations: [vue()],

  vite: {
    plugins: [cloudflare()/*, tailwindcss()*/]
  }
});
$ cat astro.config.mjs 
// @ts-check
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';
//import tailwindcss from '@tailwindcss/vite';
import { cloudflare } from '@cloudflare/vite-plugin';

// https://astro.build/config
export default defineConfig({
  integrations: [vue()],

  vite: {
    plugins: [cloudflare()/*, tailwindcss()*/]
  }
});
$ tree dist
dist
├── client
│   └── _astro
│       ├── ClickCounter.CL_kOgrM.js
│       ├── client.C3DmcQSk.js
│       └── runtime-core.esm-bundler.BorSqTXW.js
├── favicon.svg
└── index.html
$ tree dist
dist
├── client
│   └── _astro
│       ├── ClickCounter.CL_kOgrM.js
│       ├── client.C3DmcQSk.js
│       └── runtime-core.esm-bundler.BorSqTXW.js
├── favicon.svg
└── index.html
Versus with the tailwind bits uncommented: 
$ tree
dist
├── _astro
│   └── index.B4rPlb3N.css
├── client
│   └── _astro
│       ├── ClickCounter.CL_kOgrM.js
│       ├── client.C3DmcQSk.js
│       └── runtime-core.esm-bundler.BorSqTXW.js
├── favicon.svg
└── index.html
$ tree
dist
├── _astro
│   └── index.B4rPlb3N.css
├── client
│   └── _astro
│       ├── ClickCounter.CL_kOgrM.js
│       ├── client.C3DmcQSk.js
│       └── runtime-core.esm-bundler.BorSqTXW.js
├── favicon.svg
└── index.html
Can push a minimal repro repo if you'd like.

Did you find this page helpful?