Url rewrite for staging and production app

[BazzoKelesh]

Summary

Hi,

I have 3 Vercel hosted apps:

• NodeJS/Express api (api.example.com)
• SvelteKit app (app.example.com (prod) and app.staging.example.com (preview))
• SvelteKit marketing site (example.com (prod) and staging.example.com (preview))

This is working as expected of course. But my goal is to access the SvelteKit app paths example 'app.example.com/login' on 'example.com/login' using rewrites. I implemented this inside the vercel.json of the marketing site project and it's working as expected, but only for the production one. Because the rewrite destination currently is just to app.example.com/login, including some other rewrites for different paths. I want the same behaviour for the preview one, so when accessing staging.example.com/login it needs to rewrite to app.staging.example.com/login. I tried to access env variables inside the vercel.json to get my APP_BASE_URL but I can't get it inside the vercel.json using ${ENV_NAME}. Is there another way to achieve this? Different vercel.json files depending on environment will also work for me. Or something else?

Because this is only for the staging one, it's not really a big issue, but I still want a fix. In anyway, I want to also disallow people from accessing the app directly on app.example.com.

2 things I need help with:

1. Different rewrites for different environments OR accessing environment variable inside the rewrite rule, is there another file type like JS I could use like in next js you have next.config.js where you can access the env variables.
2. Disable access to the app directly on app.example.com.

Appreciate any help. Thanks!

Example

No response

Steps to Reproduce

I don't have anything to reproduce the issue. Please let me know if you need further details. Thanks!

[amyegan]

Hey @BazzoKelesh. You could use Middleware to set up dynamic rewrites using APP_BASE_URL and other environment variables.

[BazzoKelesh]

@amyegan now even in the app project the middleware file is missing in the output source after I removed it and added it again.

[amyegan]

Try moving the middleware file to the root of the project instead of inside /src/routes/

[BazzoKelesh]

I tried that also, but still not there, the first time it worked was when I had the middleware.ts in the routes folder, but now it doesn't do that anymore, the build output was like this when it worked:

[BazzoKelesh]

I notice now, when I put in the root of the project it is their and looks like this:

It is double, and when I put it back again in the src folder it their also, but does not work either, also when I put it back again in the src/routes, it does not work.

The rewrite looks like this:

import { rewrite } from '@vercel/edge';

export default function middleware(request: Request) {
	const url = new URL(request.url);

	if (url.pathname.startsWith('/register')) {
		return rewrite(new URL('/login', request.url));
	}
}

[BazzoKelesh]

https://vercel.com/docs/frameworks/sveltekit#:~:text=Edge%20Middleware%20is,intended%20rewritten%20route. Not sure if this documentation is correct, rewrites inside a vercel.json work for me. And it says:

Due to SvelteKit's client-side rendering, you cannot use Vercel's Edge Middleware with SvelteKit.

@amyegan