Can't get plugin working with DDEV - 502 Unresponsive/broken ddev back-end site.

[acalvino4]

Question

I have spent hours pouring over all the documentation I can find, tweaking parameters, but cannot seem to get my Vite server running within my DDEV environment.

I have successfully run npm run dev / vite both on local and within my container. However, any url of the form 127.0.0.1:3000/... returns a 502, as does craft.ddev.site:3000/.... This happens whether I load the url manually or through twig: {{ craft.vite.script("src/ts/index.ts") }}. The markup generated by this tag seems to be correct: <script type="module" src="https://craft.ddev.site:3000/src/ts/index.ts"></script>

Also, I have confirmed through {{ craft.vite.devServerRunning() }} that the dev server is running, though if i make 'checkDevServer' => true,, the devServerRunning tag says that it's not. So not sure what to make of that. Anyway, below are my configs - let me know if something seems off, and Thanks!

vite.php

use craft\helpers\App;

return [
    'useDevServer' => App::env('CRAFT_ENVIRONMENT') === 'dev',
    'manifestPath' => '@webroot/dist/manifest.json',
    'devServerPublic' => App::env('PRIMARY_SITE_URL') . ':3000',
    'serverPublic' => App::env('PRIMARY_SITE_URL') . '/dist/',
    'errorEntry' => '',
    'cacheKeySuffix' => '',
    'devServerInternal' => 'http://localhost:3000',
    'checkDevServer' => false,
    'includeReactRefreshShim' => false,
    'includeModulePreloadShim' => true,
    // 'criticalPath' => '@webroot/dist/criticalcss',
    // 'criticalSuffix' =>'_critical.min.css',
];

vite.config.js

export default ({ command }) => ({
  base: command === 'serve' ? '' : '/dist/',
  build: {
    cssCodeSplit: false,
    emptyOutDir: true,
    manifest: true,
    outDir: './web/dist/',
    rollupOptions: {
      input: {
        app: './src/ts/index.ts',
      },
      output: {
        sourcemap: true,
      },
    },
  },
  plugins: [
    ViteRestart({
      restart: [
          './templates/**/*',
      ],
    }),
    mkcert(),
  ],
  server: {
    host: '0.0.0.0',
    port: 3000,
    https: true,
  },
  css: {
    postcss: postcssConfig,
  },
});

docker-compose.vite.yaml

version: '3.6'
services:
  web:
    ports:
      - '3000'
    environment:
      - HTTP_EXPOSE=${DDEV_ROUTER_HTTP_PORT}:80,${DDEV_MAILHOG_PORT}:8025,3001:3000
      - HTTPS_EXPOSE=${DDEV_ROUTER_HTTPS_PORT}:80,${DDEV_MAILHOG_HTTPS_PORT}:8025,3000:3000

src/ts/index.ts

import Alpine from 'alpinejs'
import '../css/index.css'
if (import.meta.hot) {
  import.meta.hot.accept(() => {
    console.log("HMR")
  });
}
window.Alpine = Alpine
Alpine.start()
alert('hello world')

[khalwat]

This is not an issue with the Craft Vite plugin.

I'd suggest looking at existing setups that work, here are two:

DDEV: https://github.com/onedarnleyroad/craftcms

Docker: https://github.com/nystudio107/craft

Also a course on DDEV from CraftQuest.io: https://craftquest.io/courses/ddev-and-craft-cms-quick-start-guide

[acalvino4]

I figured it probably wasn't an issue with this plugin, which is why I opened it as a question rather than bug. I was just curious if anything might have jumped out to someone experienced as being out of line, especially regarding where the bad gateway is coming from or why {{ craft.vite.devServerRunning() }} was returning false.

In the meantime I'll keep digging into the documentation.

[khalwat]

Yeah sorry, I don't use DDEV so I can't really help you with some of the DDEV particular issues, other than point you at example setups that work.

If I had to guess, it'd be that a port hasn't been opened on the DDEV end of things or such.

[acalvino4]

For anyone who comes across this later....

I did get it working by following the CraftQuest video, though I don't know which config was specifically the problem. Here are the changes I made:

• In vite.config.js, I removed the mkcert vite plugin, and added viteCompress and manifestSRI plugins.
• In vite.config.js, I removed https: true, from my server config
• I renamed vite.config.js to vite.config.ts, and used the defineConfig helper function rather than exporting my config without it
• In vite.php, I defined and used Craft::getAlias('@web') instead of App::env('PRIMARY_SITE_URL')
• In vite.php, I made 'checkDevServer' => true,

[kevinmu17]

@acalvino4 are you running Vite 3 ? Since I upgraded to vite 3 I have the exact same issue

@khalwat 'checkDevServer' => true seems that this option is broken after upgrading to vite 3

[khalwat]

@kevinmu17 please see this ticket: #37