fix(remix-dev/vite): change build output paths

[markdalgleish]

This is a fix for #8039 (comment) and a better fix for #8023 and #8038.

See the changeset and updated docs for more details, but tl;dr:

• The server is now compiled into build/server by default (rather than build)
• The client is now compiled into build/client by default (rather than public/build)

This fixes an issue where the way Vite manages the public directory clashes with the way the existing Remix compiler works. So far we've been trying to get Vite to behave like the Remix compiler but it's causing issues since it's such a different model, so instead we're now leaning into the way Vite works.

As a bonus, I personally think the build output feels a lot cleaner too ✨

[changeset-bot]

🦋 Changeset detected

Latest commit: 98a2d86

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages

Name	Type
@remix-run/dev	Patch
create-remix	Patch
remix	Patch
@remix-run/architect	Patch
@remix-run/cloudflare	Patch
@remix-run/cloudflare-pages	Patch
@remix-run/cloudflare-workers	Patch
@remix-run/css-bundle	Patch
@remix-run/deno	Patch
@remix-run/eslint-config	Patch
@remix-run/express	Patch
@remix-run/node	Patch
@remix-run/react	Patch
@remix-run/serve	Patch
@remix-run/server-runtime	Patch
@remix-run/testing	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[justinwaite]

Would this necessitate updating image sec references in the apps as well?

For example, given you had an image stored at public/images/my-image.jpg and a reference to it in a page <img src="/images/my-image.jpg"/>, what would need to change here (if anything?)

Would the recommended approach change to storing image assets in a app/assets directory and let vite bundle them and handle the asset paths?

import imageSrc from "~/assets/images/my-image.jpg"

...

<image src={imageSrc}/>

[gustavopch]

@justinwaite Without this PR, you'd have to move your images from public to app. The PR is addressing this exact situation so you can keep your images in public and reference them directly by the path without having to import. You can get more context here: #8039 (comment).

[hi-ogawa]

Nice change!
With this change of default publicPath from /build to /, I feel it became closer to what base vite config does (base default value is also / https://vitejs.dev/config/shared-options.html#base).

I think remix still doesn't support custom basename in general, but I was wondering if it makes sense to deprecate publicPath remix config and favor base option from user vite config at some point (which also somehow works on dev too hopefully).

For the reference:

• vite base not honored during dev mode #8052
• [Feature]: Add `basename` to remix config file #2891

[markdalgleish]

That's a really good point! I'll keep this in mind when looking at custom base support.

[markdalgleish]

This is available in the latest nightly, currently 0.0.0-nightly-8c42697-20231122

@justinwaite @gustavopch @nicksrandall If you could all try it out and report back, that would be super helpful 🙏

[nicksrandall]

@markdalgleish I have migrated and it is working. I like this approach.

[justinwaite]

@markdalgleish I was able to fork my original stackblitz and migrate: https://stackblitz.com/edit/remix-run-remix-5qicaa?file=vite.config.ts

The setup in the stackblitz is to emulate how we would setup an app to run on a base path with how Remix works today. In this case, the basepath is /mybase. It requires that:

• Assets (images, etc) be placed in public/mybase
• Routes are explicitly prefixed with mybase (e.g. mybase._index.tsx or mybase.settings.tsx)
• The publicPath is set to /mybase in the remix config in the vite plugin (no longer need to mess with assetsBuildDirectory).

Testing it out, the build directory does indeed get populated with client and server directories. The assets in the public directory are copied into the client build. Remix serve seems to gracefully handle everything. When I check the network logs, js bundles and images are being properly served from /mybase.

Just a couple of thoughts:

1. I really like the new build output structure. Makes sense, it's cleaner, and one less directory for me to make sure my editor is ignoring properly (and one less entry into gitignore 😄 )
2. I wish Vite dev emulated production more closely. When running Vite in dev mode, assets are under /mybase, but rather are scattered around /node_modules, /app, @id, @vite, etc. This really only becomes annoying when trying to proxy apps in local development, where I have to manage proxy entries for all of those unique root-level entrypoints. Perhaps this would be a better experience if the vite base option were supported natively within remix?

Thanks for the quick support on this one!

[gustavopch]

@markdalgleish Working here as well!

[github-actions]

🤖 Hello there,

We just published version 2.4.0-pre.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 2.4.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!