Add support for the preview mode of vite

[vicb]

• [] I'd be willing to implement this feature (contributing guide)

Description

Vite supports a local web server for dev (invoked via vite) but it also supports serving the built files (invoked via vite preview)

The current serve target of the vite plugin uses the local dev server (vite).

It would be nice to add a preview target using the built files.

Motivation

The files served with vite do not match what will be served in production.

It would be nice to be able to test the actual files used in production (that is the output of the build target).

Suggested Implementation

I have tried to run vite preview from my app folder after having built the project.
I only had to to update build.outDir in vite.config.ts to make this work - that is set it to my app path. The reason for that is that this config is dynamically generated by nx/vite.

The implementation of the preview target should use that options-utils.ts to set the config.

I think it would also make sense to set the preview.proxy reusing this code

[mandarini]

Hmm let me see if I get this right. Could you not see the production files by setting mode to production and also configuration to production when serving?

[vicb]

mode is actually orthogonal to the matter here. The only effect of mode is to set some env variables. In that sense it is more related to the fileReplacements of Nx.

Vite does 2 main things:

• in dev mode it bundles the dependencies with ESBuild and serves that along with a rewritten version of the app source code in ES format (for example it rewrites the import path in JS, inject scripts the html, ...)
• in build mode it uses Rollup to bundle the app.

So those are 2 quite different things.

The dev mode is invoked via vite outside of Nx or the serve target with Nx.
The build is invoke via vite build outside of Nx or the Nx build target.
(And to be clear that's valid whatever the configuration and the mode are).

As explained above the built version is quite different from the dev version as they are built with a different set of tools. This is where the preview mode of Vite is valuable. What vite preview does is to serve the built files.

As explained in my first comment it should probably be implemented as an additional preview target depending on the build target. It would allow to test the files that are actually used in production.

Does this make sense?

A semi-related question is why the build target as "defaultConfiguration": "production". It is not consistent with what we have on the server side (i.e. an express app) so it prevent using nx run-many --target=build --projects=frontend,server without explicitly passing --configuration=....

[mandarini]

Yes, makes sense! :) I would say we should add a flag in the generator to let the user choose if they want the preview target to be generated or not. Do you want to work on this?

[vicb]

I can probably take a look at that.

I am not sure if there should be a flag for the preview target as it's really a good practice to inspect what you will deploy in prod but we can discuss that later.

[roblebel]

I would appreciate the addition of this feature as well.

[vicb]

I start feeling the pressure :)
I hope to have something reviewable at the end of next week.

[vicb]

Update: At this point I have a POC preview-server executor. I need to add more options and do some cleanup, probably a couple more days before I'll open a PR.

@mandarini can I submit a PR with the executor first and then a PR updating the generators? (The idea is to make each PR small enough so that they are easier to review).

[mandarini]

@vicb sure, thanks! Indeed, you can make the executor PR, and push the generators in a later PR. :D :D

[mandarini]

@vicb let me know if you think we can close this feature request now! :)

[vicb]

Maybe we can close it with my next PR that will be adding watch mode to the preview.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.