Simplify vite.php config (look into CORs issues too)

[joshuapease]

While Slacking with @maxfenton it seems like this:

$host = Craft::$app->getRequest()->getIsConsoleRequest()
    ? App::env('PRIMARY_SITE_URL')
    : Craft::$app->getRequest()->getHostInfo();

Can be simplified to

$host = App::env('PRIMARY_SITE_URL');

Max also noted some potential CORs issues (that may or may not be related to this change)

Blocked request. This host ("parents-fentanyl-awareness.ddev.site") is not allowed.
To allow this host, add "parents-fentanyl-awareness.ddev.site" to `server.allowedHosts` in vite.config.js.

[maxfenton]

I may have been wrong about the change to $host — when I restarted this morning I ran into CORS issues like you thought I would.

This allowedHosts seems like a good and safe addition to our vite.config.js files:

server: {
      host: '0.0.0.0',
      cors: true,
      strictPort: true,
      port: HTTP_PORT,
      allowedHosts: ['.ddev.site'],
      origin: env.PRIMARY_SITE_URL + ':' + originPort
    },

[maxfenton]

I didn't get a chance to test this other way out

[robzor]

Not sure if this is the right ticket but I was using your great blog article to dip my toes into using Vite inside the DDEV container and fell into a CORS issue.

See this article for info: https://dev.to/mandrasch/vite-is-suddenly-not-working-anymore-due-to-cors-error-ddev-3673

But it seems like there was a security issue with Vite before and so now you need to add:

cors: {
        origin: /https?:\/\/([A-Za-z0-9\-\.]+)?(\.ddev\.site)(?::\d+)?$/,
      },

into your server bit in the vite.config.js

I also changed to using the simplified $host as specified up there as I'm currently using DDEV with a custom port and the previous version would try and add 2 ports to the end of the URL :)

[maxfenton]

Thank you @robzor

@joshuapease I just checked out the Craft Vite docs and Andrew Welch has updated the ports and config to include that change but also that the ports in ddev/config are flipped from these ones. https://nystudio107.com/docs/vite/#using-ddev

---

.ddev/config.yaml

web_extra_exposed_ports:
    - name: craft-vite
      container_port: 3000
      http_port: 3001
      https_port: 3000

(note https and container_port are the same)

vite.config.js

server: {
  host: '0.0.0.0',
  port: 3000, 
  strictPort: true,
  origin: `${process.env.DDEV_PRIMARY_URL.replace(/:\d+$/, "")}:3000`,
  cors: {
    origin: /https?:\/\/([A-Za-z0-9\-\.]+)?(\.ddev\.site)(?::\d+)?$/,
  },
}

(again here the ports are the https and container_port values, not http and container_port)

config/vite.php

<?php

use craft\helpers\App;

return [
	'checkDevServer' => true,
	'devServerInternal' => 'http://localhost:3000',
	'devServerPublic' => preg_replace('/:\d+$/', '', App::env('PRIMARY_SITE_URL')) . ':3000',
	'serverPublic' => App::env('PRIMARY_SITE_URL') . '/dist/',
	'useDevServer' => App::env('ENVIRONMENT') === 'dev' || App::env('CRAFT_ENVIRONMENT') === 'dev',
	'manifestPath' => '@webroot/dist/.vite/manifest.json'
];

[robzor]

Yeah his example didn't work for me until I changed the port to match yours (e.g. Use the HTTPS one for the dev server)

[joshuapease]

Thanks for all your notes @robzor and @maxfenton

Here's where I've landed with a PR.

• [#80] Vite CORS updates and vite.php simplification #88

[robzor]

One thing to add to this, because I am running DDEV on a custom port, I have both regex things in the JS config and Plugin config:

origin: `${process.env.DDEV_PRIMARY_URL.replace(/:\d+$/, "")}:` + HTTPS_PORT,`

and

'devServerPublic' => preg_replace('/:\d+$/', '', App::env('PRIMARY_SITE_URL')) . ':3001', // Matches https_port in .ddev/config.yaml

Might be worth adding those? :)

[maxfenton]

@robzor I had a deploy error when I tried something that included ${process.env.DDEV_PRIMARY_URL.replace(...)} because DDEV_PRIMARY_URL wasn't present on the production server .env — needed to use optional chaining (?.): DDEV_PRIMARY_URL?.replace

[robzor]

Hm, that's interesting, I would've thought that on the production environment it should ignore that whole server section, maybe that's a FR for the Vite guys.

[joshuapease]

@robzor I think that's just an error that's inherent to the order that JavaScript executes.

${process.env.DDEV_PRIMARY_URL.replace(/:\d+$/, "")}: + HTTPS_PORT,` gets called before Vite even reads the config file.

Optional chaining is a good fix.

I've never needed to run DDEV in a custom port. Does that port show up in your PRIMARY_SITE_URL?

Would it work to use the PRIMARY_SITE_URL .env var in both cases?

[robzor]

hi @joshuapease yeah, DDEV populates the .env with the custom port which is nice.

I tried changing DDEV_PRIMARY_URL to the primary site url .env var but it didn't work, I'm not using the loadEnv method from the Viget config though, as I was trying to make the vite config as small as possible :D

[joshuapease]

@robzor Gotcha... those ports are immediately removed by the regex right?

Seems like the main benefit is that you don't need to use loadEnv?

I think that's benefit is worthwhile. I also like being aligned with the nystudio docs wherever possible.

@maxfenton @robzor I made a few tweaks to that PR to account for your feedback

• Add regex replacements to allow for custom DDEV ports
• Switch port numbers to match nystudio docs (I don't know why I made mine different, but aligning with nystudio is better)
  • https://nystudio107.com/docs/vite/#using-ddev
• Use DDEV_PRIMARY_URL in vite.config.js
  • We don't need loadEnv anymore

[robzor]

Mine is an ongoing concern, as this is my first project properly diving into Vite, but my config is currently looking like this:

import { defineConfig } from 'vite';
import ViteRestart from 'vite-plugin-restart';

// Match ports in .ddev/config.yaml and config/vite.php
const HTTP_PORT = 3000;
const HTTPS_PORT = 3001;

export default defineConfig(({ command }) => {

  return {
    base: command === 'serve' ? '' : '/dist/',
    build: {
      manifest: true,
      outDir: './web/dist/',
      rollupOptions: {
        input: {
          app: 'src/js/app.js',
        },
      },
    },
    plugins: [
      ViteRestart({
        reload: [
          'templates/**/*',
        ],
      }),
    ],
    publicDir: 'src/public',
    server: {
      host: "0.0.0.0",
      port: HTTP_PORT,
      strictPort: true,
      origin: `${process.env.DDEV_PRIMARY_URL.replace(/:\d+$/, "")}:` + HTTPS_PORT,
      cors: {
        origin: /https?:\/\/([A-Za-z0-9\-\.]+)?(\.ddev\.site)(?::\d+)?$/,
      },
    },
  }
});

[robzor]

Just to add to this, I've tried to deploy this to Servd and I'm getting an error with process I believe - is this what happened to you @maxfenton ?

[robzor]

Ah, got it working by adding this:

 const primaryUrl = process.env.DDEV_PRIMARY_URL ? process.env.DDEV_PRIMARY_URL.replace(/:\d+$/, "") : '';

and changing the origin line to:

      origin: `${primaryUrl}:` + HTTPS_PORT,

[maxfenton]

@robzor I think that's equivalent to:

origin: `${process.env.DDEV_PRIMARY_URL?.replace(/:\d+$/, '')}:${HTTPS_PORT}`,

where the optional chaining is doing the same as your ternary logic.

[robzor]

I tried that a few days ago and it didn't work for some reason