Deprecate wrangler pages dev -- <PROXY_COMMAND>

[GregBrimble]

And the supporting --script-path arg.

It's unfortunately not fit for purpose and causes users more harm than benefit.

[penalosa]

@nevikashah @admah could you weigh in here from a product perspective?

[petebacondarwin]

Given this is only deprecation and not removal there is no need to do this in a major version bump.
So we're going to move this out of v4 and land it in a minor release.

[petebacondarwin]

The majority of the work here would actually be going through the docs and ensuring that all our guides avoid this usage.
It might also be worth checking how many Pages projects are currently relying upon this in their build command configured in the Pages dashbaord. cc @nevikashah

[GregBrimble]

Given its use, I was thinking we'd want to consider deprecating in v3, letting it sit through v4 and then remove in v5.

[petebacondarwin]

Yes. Exactly!

[GregBrimble]

Right, so I'm advocating on deprecating before we cut v4 which is why I added it to this milestone :)

[petebacondarwin]

OK. That wasn't clear from the issue. 😄
I'll add it to our next week's sprint.

[malobre]

User POV:

I rely on this feature when working on project that use vitejs + pages functions, e.g:
wrangler pages dev --proxy=5173 -- vite --port=5173 --strictPort.

If this is deprecated what would the alternative be? A miniflare vite plugin?

[petebacondarwin]

If I understand it correctly, the alternative is simply to run the vite server and wranger pages dev server side by side in separate terminals. For example, in one terminal:

vite --port=5173 --strictPort

And then in another terminal

wrangler pages dev --proxy=5173

[petebacondarwin]

Although we would need to make a small fix in wrangler to ensure that we make use of the --proxy argument even if there is no proxy command.

[petebacondarwin]

But actually, I think @GregBrimble's preferred approach would be to configure vite to watch and build to a directory that we then pass to Wrangler:

vite build --watch

and

wrangler pages dev dist

[GregBrimble]

Yes, that's correct. Building to a directory is currently the only way to accurately emulate production's static asset serving behavior.

[malobre]

@petebacondarwin thanks for the quick response, this mostly cover my use case, except for HMR (which I can live without) and live reload (with wrangler pages dev --live-reload dist) which does not work at all (maybe related to #4607 ?)

Edit: I created #5351

[KyGuy2002]

Is the best solution to this just to give up using HMR or live reload on Vite? My app was made using CRA and I just transitioned it to Vite, and found out that this was being deprecated. Should I switch back to CRA to use these features even though it's deprecated?

Does running the Vite server and CF server (for functions) at the same time work? Would I need to edit my application code to use a different port when in a dev environment?

[kurdin]

User POV:

I rely on this feature when working on project that use vitejs + pages functions, e.g: wrangler pages dev --proxy=5173 -- vite --port=5173 --strictPort.

If this is deprecated what would the alternative be? A miniflare vite plugin?
wrangler pages dev --proxy=5173 -- vite --port=5173 --strictPort
or just
wrangler pages dev -- npm run vite

This was very convenient to start vite along with wrangler pages dev in development. It's strange that this proxy feature is set to be removed. 🤷

Currently, I encounter this error when I start Wrangler with Vite as a proxy:

[ERROR] Specify either a directory OR a proxy command, not both.

Yes, I have pages_build_output_dir = "pages" set for deployment, and if I remove it from the config, I see a deployment error telling me I have to add pages_build_output_dir to the config or the whole config will be ignored 🤷.

We detected a configuration file at
wrangler.toml but it is missing the
"pages_build_output_dir" field, required by Pages.
If you would like to use this configuration file to deploy your project, please use
"pages_build_output_dir" to specify the directory of static files to upload.
Ignoring configuration file for now, and proceeding with project deploy.

Can anyone please help with how to deal with this? Sure, I can run vite and wrangler pages dev alongside each other, but it's not as convenient as using a proxy.

Is there any way to add pages_build_output_dir via wrangler deploy cli command and keep/use other all settings from wrangler.toml ?

[simultsop]

But actually, I think @GregBrimble's preferred approach would be to configure vite to watch and build to a directory that we then pass to Wrangler:

vite build --watch

and

wrangler pages dev dist

This is the only working method, separate process to run vite build --watch and wrangler pages dev dist on another. Proxy or command option do not work. Not cool to see this ignored.

This workaround will never make it possible to have the project on development mode, since it requires building it, you will always be developing on production mode.

[anri-asaturov]

Just wanted to share a configuration that's working for me so far and keeps vite's HMR.

Add this to vite.config.js

 server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:3001',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }

Now run your vite app in dev mode as usual (vite command), it will run on port 3000 and proxy all localhost:3000/api/* calls to localhost:3001/* avoiding CORS issues.

Then run

wrangler pages dev --port 3001 --live-reload

it will serve functions along with static assets which we will ignore.

[simultsop]

Just wanted to share a configuration that's working for me so far and keeps vite's HMR.

Add this to vite.config.js

 server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:3001',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }

Now run your vite app in dev mode as usual (vite command), it will run on port 3000 and proxy all localhost:3000/api/* calls to localhost:3001/* avoiding CORS issues.

Then run

wrangler pages dev --port 3001 --live-reload

it will serve functions along with static assets which we will ignore.

Can you confirm also if this fixes this: intlify/vue-i18n#1902

I will try myself, am just afk atm.

[simultsop]

wrangler pages dev --port 3001 --live-reload

Having /api as path to proxy adds an additional flag to keep eyes on, which is easy to forget about. All calls to api must be made now with double /api/api paths, in my case. Do you think vite will forward all request params to proxy calls?

Without further debugging after removing api replace, wrangler throws 500's on every api call.
I'll try if this is a reliable solution, however having it served by vite would make it possible to have dev mode on.

[anri-asaturov]

wrangler pages dev --port 3001 --live-reload

Having /api as path to proxy adds an additional flag to keep eyes on, which is easy to forget about. All calls to api must be made now with double /api/api paths, in my case. Do you think vite will forward all request params to proxy calls?

Without further debugging after removing api replace, wrangler throws 500's on every api call. I'll try if this is a reliable solution, however having it served by vite would make it possible to have dev mode on.

Here I've made a copy of my current template for you. It's opinionated, but you will see the basic idea and it works. I've spent quite a lot of time experimenting and researching and this solution makes me happy.

https://github.com/anri-asaturov/cloudflare-pages-spa-template