Allow customising the Vite config #1465
Conversation
|
|
||
| // https://vitejs.dev/config/ | ||
| export default defineConfig({ | ||
| {=# isCustomViteConfigUsed =} |
There was a problem hiding this comment.
If the file is defined, we import it. If not, we use an empty object.
| }; | ||
|
|
||
| // https://vitejs.dev/config/ | ||
| export default mergeConfig( |
There was a problem hiding this comment.
Using the built-in Vite helper to merge the objects.
| @@ -0,0 +1,6 @@ | |||
| export default { | |||
Signed-off-by: Mihovil Ilakovac <[email protected]>
| @@ -76,7 +77,7 @@ data AppSpec = AppSpec | |||
| -- | Connection URL for a database used during development. If provided, generated app will | |||
| -- make sure to use it when run in development mode. | |||
| devDatabaseUrl :: Maybe String, | |||
| isCustomViteConfigUsed :: Bool | |||
| customViteConfigPath :: Maybe (Path' (Rel SourceExternalCodeDir) File') | |||
There was a problem hiding this comment.
You made it relative to SourceExternalCodeDir -> that is correct, I am just wondering, do we care if it is in external code dir or not? Because we could be less specific and say it is in source project dir (so root of source project). Then it could be in ext src, or not, who knows. But ok, this is also fine on one hand, especially if you are relying on this property of it being in ext src.
There was a problem hiding this comment.
Either we add the src part in the AppSpec creation part or we add it in the generator 🤷 I think it's a bit arbitrary and maybe just keep it like this for now? I don't really any good reasons
There was a problem hiding this comment.
It's more about constraints -> is it important for us that custom vite config is in source external code dir? In the sense that, if I was doing some new code changes and moved it out of external code dir somewhere else, you would complain when reviewing it? If so, then let's leave it as it is. If it doesn't matter, and we are ok with it being anywhere in the project, but for now we chose source external code dir, then I would go with the path starting from the root of the project.
Signed-off-by: Mihovil Ilakovac <[email protected]>
|
|
||
| export default defineConfig({ | ||
| server: { | ||
| open: true, |
| }) | ||
| ``` | ||
| </TabItem> | ||
| </Tabs> |
There was a problem hiding this comment.
You should mention that they might break stuff if they over-customize it, because we expect some stuff in vite config to be configured in a specific way, so they should be careful.
There was a problem hiding this comment.
Makes sense, I'll add that part as well 👍
Signed-off-by: Mihovil Ilakovac <[email protected]>
It allows the user to specify the overrides for the Vite config which is used for the React web app. Closes #1085
How it works
Users need to define a
vite.config.tsor avite.config.jsin theirsrc/clientfolder. Wasp picks up this file and uses the contents of it to override the defaults.For example, one such override would be "Does the browser open by default when a Wasp project is started?":
Demo app
There is a simple demo app in
waspc/examples/vite-config-demofor testing purposes.