Setting Vite 'base' option to an alternate domain, but still making client build files accessible via the app

[fabregas4]

I'm trying to get my app's client build files to be served via Cloudfront CDN.

I have Cloudfront set up as static.domain.com - with origin of app.domain.com (my Remix app hosted on Render.com)

Without making any changes to app config, I can access any js file available via app.domain.com/assets/file.js, by going to static.domain.com/assets/file.js. Cloudfront is getting the file from the app, caching it, and serving it to me without issue.

However at this point, the app is still telling the browser to request all the client build files from app.domain.com/assets/

So I update the Vite base option to be https://static.domain.com/

Now when I go to the app, I can see in the dev tools network tab, that the app has told the browser to download the client build js files from static.domain.com/assets/. This is what I would expect.

However, the problem is they all return a 404.
static.domain.com/assets/file1.js returns a 404, but so does app.domain.com/assets/file1.js

This tells me:

1. The Cloudfront configuration is working, and that is not the cause of the issue

2. Updating the base option in Vite to an external domain, results in Remix no longer making the build files accessible via /assets/. This means Cloudfront can't access the files it needs to cache/serve when a request is made to static.domain.com

The client build files still all exist in /build/client/assets in the file system, however they aren't accessible via the server/Remix at /assets

How can I make the app have the files accessible via app.domain.com/assets/ but at the same time tell the app to request them from static.domain.com/assets/

The alternative seems to be to copy all the files to an S3 bucket with a CDN on it post-build, but I would rather not add that step into my build process and an additional storage layer.

I'm sure there must be a way to achieve this. Any help would be greatly appreciated.

[akomm]

I did not use cloudflare CDN, but does the config have the mapping to your app URL where the statics are located for initial fetch? Then the problem will be that if you change the base url, correctly, remix wouldn't serve the static files under the app url anymore, so cloudflare couldn't get the initial content for caching. If it is not how couldflare CDN is configured or working, than you need to deploy the statics to the server manually otherwise it will be a 404.

[fabregas4]

Yes this seems to be what's happening. Once I change the base to another domain, Remix doesn't serve the files under the app URL anymore. So Cloudfront has nowhere to access these files from in order to generate the cache.

Changing the base to another domain seems to make two things happen:

1. The app requests client build files from the other domain
2. The app stops serving client build files on the app URL (I.e. they are no longer accessible via http)

For Cloudfront (or any similar CDN) to work, without me explicitly copying client build files to external storage in advance, I would need it to do #1, but NOT #2.

[fabregas4]

I don't think this is the right answer, and I'm hopeful someone comes up with a more standard solution.

I implemented a workaround, which is basically a new assets.$file.tsx route, to serve files out of /build/client/assets

Any requests to /assets/file.extension will hit this route. The route will then look for file.extension in /build/client/assets and provide it as the response.

It seems to work, and any slowness added by the implementation of this route isn't a serious factor because it is only the CDN accessing this route. Once the CDN accesses a file for the first time, it should just hold it in cache from that point, so users always get the cached file from the edge.

It seems to work OK in initial testing, but I do wonder if there's any edge cases where this will break. I'm more hoping there's an alternative/standard solution to this.

import { LoaderFunctionArgs } from "@remix-run/node";
import { readFile } from "fs/promises";
import mime from "mime";
import { join } from "path";

export async function loader({ params }: LoaderFunctionArgs) {
	const { file } = params;
	if (!file) return new Response('File parameter is missing', { status: 400 });
	const filePath = join(process.cwd(), 'build', 'client', 'assets', file);
	try {
		const fileBuffer = await readFile(filePath);
		const contentType = mime.getType(filePath) || 'application/octet-stream';

		return new Response(fileBuffer, {
			headers: {
				"Content-Type": contentType,
			},
		});
	} catch (error) {
		return new Response('File not found', { status: 404 });
	}
}

[corygibbons]

@fabregas4 This wasn't working for me either until I switched to using the custom server.js from the express template since it serves the assets at /assets regardless of the base.

Then updated vite config and it worked as expected.

export default defineConfig({
  // ...
  base: process.env.NODE_ENV === 'production' ? 'https://static.domain.com/' : '/',
  // ...
});