Do not deprecate wrangler's proxy feature, e.g. `wrangler pages dev -- vite` or keep at least the injection part with a new api such as `wrangler inject -- vite`

[newsve]

Edit: I edited the issue title since this thread has been evolved about how to inject CF env vars into a hot reloading dev server, the actual issue is further down: #5315 (comment)

Which Cloudflare product(s) does this pertain to?

Pages

What version(s) of the tool(s) are you using?

3.35.0

What version of Node are you using?

v20.11.1

What operating system and version are you using?

Ubuntu 22.04.2 LTS

Describe the Bug

Observed behavior

When the app redirects wrangler pages dev does the redirect but the URL in the browser's URL bar doesn't change (or redirect's header lacks the redirect status and new URL and the response header lacks a location header.

This is a big problem because it breaks relative links on redirected pages and doesn't reflect production.

Expected behavior

A proper redirect with URL change and proper headers

Steps to reproduce

git clone https://github.com/newsve/wrangler-no-redirect.git
npm i
npm run dev

In your browser go first to localhost:5713 which is the og SvelteKit/Vite server without wrangler, you see a redirect happng to localhost:5713/some-random-page. Now try the same with localhost:8788 which is via wrangler, still redirects but the URL in the URL bar does not change.

Also check and compare the headers (left: 5713, right 8788), note that the 8788 one lacks a response location header:

Please provide a link to a minimal reproduction

git clone https://github.com/newsve/wrangler-no-redirect.git

Please provide any relevant error logs

No response

[GregBrimble]

Thanks for the report. This can be fixed by building assets to a directory and pointing Wrangler at that (wrangler pages dev <directory>), rather than using the proxy feature (wrangler pages dev -- <command>). This proxy feature will be deprecated shortly because of incompatibilities like you flag in this issue: #5317.

[newsve]

Thanks for your prompt answer.

When I develop I usually don't have a build yet which wrangler pages dev could consume. And, I assumed wrangler pages dev is for developing, so running dev envs with HMR and live reload, etc., it is not meant for testing static production builds without hot realod/HMR. Please correct me if I am wrong.

Most modern web frameworks are based on Vite and when I look into, e.g. SvelteKit's output folder .svelte-kit I don't see any cloudflare/ folder when in developing mode (vite dev or just vite). Only when I do a build with vite build, then I see that folder. But actually I never do latter because CF does this automatically when pushing to GH. So, not sure how the dev workflow would be then.

So, maybe I do miss something and you can hint me with an example wrangler command targeting a Vite framework such as SvelteKit how this should work when developing with hot reload. Thanks!

[GregBrimble]

Yes, unfortunately the best we can suggest right now is running vite build --watch (https://vitejs.dev/guide/build#rebuild-on-files-changes) and simultaneously, wrangler pages dev <directory>. We're actively considering how to improve this experience, so please bear with us. cc @dario-piotrowicz

[newsve]

But will wrangler pages dev still inject Cloudflare binds, e.g. to services like KV, or the props on request.cf, so the framework can consume those? This is somewhat the key USP of wrangler.

[GregBrimble]

Yes, it will.

[newsve]

Just an idea:

Right now, I use only the output of vite's dev server on 5173 despite wrangler started and proxied latter. And it is great because it has already all injected binds without the need to use wrangler's proxied version on 8788.

A dev doesn't need more. So if there is way to get just the binds injected into vite dev without actually wrangler proxying vite would be already a huge step (because something like vite build --watch isn't as nice as vite dev for development).

[IgorMinar]

hi @newsve, if you use the latest cloudflare adapter for sveltekit it will allow you to access all the bindings from within sveltekit's dev server. you can scaffold a new project using create-cloudflare to test it out and check out https://developers.cloudflare.com/pages/framework-guides/deploy-a-svelte-site/#sveltekit-cloudflare-configuration - the docs don't mention it yet (WIP) but you can configure the bindings via wrangler.toml. Again, check out a clean create-cloudflare project where all of this is preconfigured already.

[newsve]

Thanks, I just skimmed through a create-cloudflare installation, and wow, super impressive! All the supported frameworks and in one place, amazing!

One question though: I can't use the locally emulated Cloudflare services anymore like with wrangler in dev mode (wrangler doesn't run with npm run dev, just with build and preview), so I would need to bind my local dev server with an actual Cloudflare service in the cloud and have there always min. two of each kind (one for dev and one for production).

Did I get it right?

[IgorMinar]

Did I get it right?

not quite, with the create-cloudflare integration we start a wrangler/miniflare process behind the scenes and integrate it into vite. So you can access a local D1 database, or KV store from your app while it's running via vite dev

[newsve]

Incredible! Is vite then somehow patched? Because in package.json, I only find "dev": "vite dev", (or do you mean the preview and build scripts?) and in vite.config.js I find no invocation of wrangler/miniflare either:

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';

export default defineConfig({
        plugins: [sveltekit()],
        test: {
                include: ['src/**/*.{test,spec}.{js,ts}']
        }
});