Update
Experimental Vite Support is now included in Redwood v4.1.0.
With Redwood v4.1 RC, we’re launching support for switching your bundler from the default Webpack to Vite 4!
To use 4.1 RC, make sure you’ve upgraded to v4 of Redwood first, and made all the relevant changes to your code. Redwood v4.0.0 Upgrade Guide
Vite support is still in the experimental phase, so we really, I mean, realllly… value your feedback from trying it out! (It is currently opt-in). Switching a bundler, especially with a batteries-included framework like Redwood is challenging. So, your help in trialing and reporting issues is incredibly valuable.
Importantly: if you choose to stay on Webpack, you can totally continue to with V4.x, no need to do anything!
Video Walk-through
What you get in this release:
- a setup command to convert your project to use Vite
- the dev server and build process, for the web side, will be switched over to Vite. You can expect a big performance boost, especially during dev
Some gotchas:
- Prerendered images can cause a flash. This happens because the image in the HTML is replaced by a different one from Vite’s build proess once your app has loaded.
- Storybook still runs on Webpack: expect Vite support in Redwood’s storybook to come soon. This actually has no real impact, minus the fact that you don’t get the performance boost from Vite that you do during dev.
- There are subtle differences in the way environment variables are loaded. If you have specified a variable in your redwood.toml, in the
includeEnvironmentVariablesarray, if the value is not specified, the dev and build process will crash (and tell you which vars are missing)
Opt-in guide
-
Make sure you’re running the latest RC of Redwood.
Runyarn rw upgrade -t rc. Vite suppport is only available in 4.1-rc (or higher) -
Setup Vite by running
yarn rw setup vite.
This will configure your project to switch over to Vite. Take a look at your git diff to see the changes introduced! -
Launch dev server
Runyarn rw dev. The console output should be slightly different to what you’re used to, and should look like this!
- Launch your browser (usually on
localhost:8910) but may be different on your project! If you see a blank screen at this point, something has probably gone wrong, and it would be incredibly useful if you would raise an issue with the error(s) printed in your terminal.
ℹ️ Getting a vite-plugin-environment error? Expand for details
With our Vite setup, if you are receiving an error like “Error: vite-plugin-environment: the BAZINGA environment variable is undefined.” - its indicating a missing environment variable. You have to define BAZINGA in your .env or .env.defaults file
This happens because in your redwood.toml you specified that you want to include a variable
[web]
bundler = "vite"
includeEnvironmentVariables = ['BAZINGA'] # 👈 Included here
#...
But haven’t defined it in your .env files
Note that there may be Vite specific quirks - often these have a quick and easy solution if you do a search on the Vite github issues, but we’d appreciate if you raised an issue on the Redwood repo with the solution to share with the community!
Switching between Webpack and Vite
Once you’ve setup Vite, you’ll notice a new flag in your redwood.toml
[web]
+ bundler = "vite" # 👈 new bundler flag
port = 8910
apiUrl = "/api"
includeEnvironmentVariables = ['CONTEXT', 'NODE_ENV', 'DEPLOY_ID']
title = "My Redwood App"
If you comment out the bundler, or switch it to "webpack", it will switch the bundler back!
This might come in handy, if you find bugs with the Vite integration and need to continue development!
Discord Channel For Support
We’ve setup a special Discord channel, where you can report and discuss any issues you may be facing!
Please do remember to take a bit of time to describe your problem in detail, and include any relevant errors/warnings and ideally a reproduction on Github or Gitpod!
Thanks 
