docs(vite): Remove references to webpack, and more docs on SVGs and fonts

docs/docs/app-configuration-redwood-toml.md

@@ -28,7 +28,7 @@ The options and their structure are based on Redwood's notion of sides and targe
 > For the difference between a side and a target, see [Redwood File Structure](tutorial/chapter1/file-structure.md).
 
 You can think of `redwood.toml` as a frontend for configuring Redwood's build tools.
-For certain options, instead of having to deal with build tools like webpack directly, there's quick access via `redwood.toml`.
+For certain options, instead of having to deal with build tools configuration directly, there's quick access via `redwood.toml`.
 
 ## [web]
 
@@ -38,7 +38,6 @@ For certain options, instead of having to deal with build tools like webpack dir
 | `apiGraphQLUrl`               | The path or URL to your GraphQL function                   | `"${apiUrl}/graphql"`   |
 | `apiDbAuthUrl`                | The path or URL to your dbAuth function                    | `"${apiUrl}/auth"`      |
 | `a11y`                        | Enable storybook `addon-a11y` and `eslint-plugin-jsx-a11y` | `true`                  |
-| `fastRefresh`                 | Enable webpack's fast refresh                              | `true`                  |
 | `host`                        | Hostname to listen on                                      | `"localhost"`           |
 | `includeEnvironmentVariables` | Environment variables to include                           | `[]`                    |
 | `path`                        | Path to the web side                                       | `"./web"`               |
@@ -309,7 +308,7 @@ Setting `open` to `true` opens your browser to `${host}:${port}` (by default, `l
 If you want your browser to stop opening when you `yarn rw dev`, set this to false.
 (Or just remove it entirely.)
 
-There's actually a lot more you can do here. For more, see webpack's docs on [devServer.open](https://webpack.js.org/configuration/dev-server/#devserveropen).
+There's actually a lot more you can do here. For more, see Vite's docs on [preview.open](https://vitejs.dev/config/preview-options.html#preview-open).
 
 ## [generate]
 

docs/docs/assets-and-files.md

@@ -10,7 +10,8 @@ There are two ways to add an asset to your Redwood app:
 2. add it to the `web/public` directory and reference it relative to your site's root
 
 Where possible, prefer the first strategy.
-It lets webpack include the asset in the bundle, opting-in to all of webpack's benefits.
+
+It lets Vite include the asset in the bundle when the file is small enough.
 
 ### Co-locating and Importing Assets
 
@@ -45,7 +46,7 @@ const Header = () => {
 export default Header
 ```
 
-If you're curious how this works, see the webpack docs on [asset management](https://webpack.js.org/guides/asset-management/).
+If you're curious how this works, see the Vite docs on [static asset handling](https://vitejs.dev/guide/assets.html).
 
 ## Adding to the `web/public` Directory
 
@@ -54,7 +55,7 @@ During dev and build, Redwood copies `web/public`'s contents into `web/dist`.
 
 > Changes to `web/public` don't hot-reload.
 
-Again, because assets in this directory don't go through webpack, **use this strategy sparingly**, and mainly for assets like favicons, manifests, `robots.txt`, libraries incompatible with webpack—etc.
+Again, because assets in this directory don't go through Vite, **use this strategy sparingly**, and mainly for assets like favicons, manifests, `robots.txt`, libraries incompatible with Vite, etc.
 
 ### Example: Adding Your Logo and Favicon to `web/public`
 
@@ -102,3 +103,66 @@ const Header = () => {
 
 export default Header
 ```
+
+## Styling SVGs: The special type of image
+
+By default you can import and use SVG images like any other image asset.
+
+```jsx title="web/src/components/Example.jsx"
+// highlight-next-line
+import svgIconSrc from '../mySvg.svg'
+
+const Example = () => {
+  return (
+    <>
+      // highlight-next-line
+      <img src={svgIconSrc} alt="Logo" />
+    </>
+  )
+}
+
+export default Example
+```
+
+Sometimes however, you might want more control over styling your SVGs - maybe you want to modify the `stroke-width` or `fill` color.
+
+The easiest way to achieve this, is to make your SVGs a React component. Open up your SVG file, and drop in its contents into a component – for example:
+
+```tsx title="web/src/components/icons/CarIcon.tsx"
+import type { SVGProps } from "react"
+
+export const CarIcon = (props: SVGProps) => {
+  return (
+    // 👇 content of your SVG file
+    <svg
+      // highlight-next-line
+      className="fill-blue-500" // 👈 you can use classes, like with tailwind
+      // highlight-next-line
+      stroke={props.strokeColor} // or adjust properties directly
+    // ...
+```
+
+If you needed to convert a whole library of SVGs into stylable (or animatable!) components, one easy way would be to use the [SVGR cli](https://react-svgr.com/docs/cli/)
+
+
+
+## Custom fonts
+There are many different ways to peel this potato – it's all a search away – but if you're using the CSS `@font-face` rule, we have a quick tip for you:
+
+1. Place your fonts in the public folder, so it gets carried across
+2. In your CSS, use relative paths to point to the font file, for example:
+
+```css
+/* in some CSS file you are loading in your project */
+@font-face {
+  font-family: 'Redwood Neue';
+  /* 👇 it's a relative path */
+  // highlight-next-line
+  src: url('../../public/fonts/RedwoodNeue.woff2')
+    format('woff2');
+  font-weight: 300;
+  font-style: italic;
+  ascent-override: 97%;
+}
+```
+This will make sure that the fonts are being loaded correctly across your dev server and storybook – where there are subtle differences in how paths are processed.

docs/docs/cli-commands.md

@@ -74,7 +74,6 @@ We use Babel to transpile the api side into `./api/dist` and Webpack to package
 | Arguments & Options | Description                                                                                                                                                                 |
 | :------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `side`              | Which side(s) to build. Choices are `api` and `web`. Defaults to `api` and `web`                                                                                            |
-| `--stats`           | Use [Webpack Bundle Analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) to visualize the size of Webpack output files via an interactive zoomable treemap |
 | `--verbose, -v`     | Print more information while building                                                                                                                                       |
 
 **Usage**
@@ -196,7 +195,7 @@ yarn redwood dev [side..]
 | Argument           | Description                                                                                                                                                                                 |
 | :----------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `side`             | Which dev server(s) to start. Choices are `api` and `web`. Defaults to `api` and `web`                                                                                                      |
-| `--forward, --fwd` | String of one or more Webpack Dev Server config options. See example usage below. See the [Redwood Webpack Doc](webpack-configuration.md#webpack-dev-server) for more details and examples. |
+| `--forward, --fwd` | String of one or more Vite Dev Server config options. See example usage below |
 
 **Usage**
 

docs/docs/environment-variables.md

@@ -17,7 +17,7 @@ For a reference on dotenv syntax, see the dotenv README's [Rules](https://github
 
 <!-- also in a Redwood app's base directory. -->
 
-Redwood also configures Webpack with `dotenv-webpack`, so that all references to `process.env` vars on the Web side will be replaced with the variable's actual value at build-time. More on this in [Web](#Web).
+Redwood also configures Vite, so that all references to `process.env` vars on the Web side will be replaced with the variable's actual value at build-time. More on this in [Web](#Web).
 
 ## Web
 

docs/docs/how-to/custom-function.md

@@ -60,7 +60,7 @@ from the web side would give you an error like:
 Access to fetch at 'http://localhost:8911/serverTime' from origin 'http://localhost:8910' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
 ```
 
-We could set the headers for `serverTime` to allow requests from any origin... but maybe a better idea would be to never request `8911` from `8910` in the first place. Hence the `apiUrl`! We're making a request to `8910/.redwood/functions/serverTime`—still the same domain—but the [webpack dev-server](https://webpack.js.org/configuration/dev-server/#devserverproxy) proxies them to `localhost:8911/serverTime` for us.
+We could set the headers for `serverTime` to allow requests from any origin... but maybe a better idea would be to never request `8911` from `8910` in the first place. Hence the `apiUrl`! We're making a request to `8910/.redwood/functions/serverTime`—still the same domain—but [Vite](https://github.com/redwoodjs/redwood/blob/main/packages/vite/src/index.ts#L119) proxies them to `localhost:8911/serverTime` for us.
 
 ## Getting the Time
 

docs/docs/how-to/file-uploads.md

@@ -33,7 +33,7 @@ The first thing we'll do is create an environment variable to hold our Filestack
 REDWOOD_ENV_FILESTACK_API_KEY=AM18i8xV4QpoiGwetoTWd
 ```
 
-> We're prefixing with `REDWOOD_ENV_` here to tell webpack that we want it to replace this variables with its actual value as it's processing pages and statically generating them. Otherwise our generated pages would still contain something like `process.env.FILESTACK_API_KEY`, which wouldn't exist when the pages are static and being served from a CDN.
+> We're prefixing with `REDWOOD_ENV_` here to tell Vite that we want it to replace this variables with its actual value as it's processing pages and statically generating them. Otherwise our generated pages would still contain something like `process.env.FILESTACK_API_KEY`, which wouldn't exist when the pages are static and being served from a CDN.
 
 Now we can start our development server:
 
@@ -478,7 +478,7 @@ export const deleteImage = async({ id }) => {
 
   // The `security.handle` is the unique part of the Filestack file's url.
   const handle = image.url.split('/').pop()
-  
+
   const security = Filestack.getSecurity(
     {
       // We set `expiry` at `now() + 5 minutes`.
@@ -490,7 +490,7 @@ export const deleteImage = async({ id }) => {
   )
 
   await client.remove(handle, security)
-  
+
   return db.image.delete({ where: { id } } )
 }
 ```

docs/docs/router.md

@@ -510,11 +510,11 @@ In addition to the `to` prop, `<Redirect />` also takes an `options` prop. This
 
 ## Code-splitting
 
-By default, the router will code-split on every Page, creating a separate lazy-loaded webpack bundle for each. When navigating from page to page, the router will wait until the new Page module is loaded before re-rendering, thus preventing the "white-flash" effect.
+By default, the router will code-split on every Page, creating a separate lazy-loaded bundle for each. When navigating from page to page, the router will wait until the new Page module is loaded before re-rendering, thus preventing the "white-flash" effect.
 
 ## Not code splitting
 
-If you'd like to override the default lazy-loading behavior and include certain Pages in the main webpack bundle, you can simply add the import statement to the `Routes.js` file:
+If you'd like to override the default lazy-loading behavior and include certain Pages in the main bundle, you can simply add the import statement to the `Routes.js` file:
 
 ```jsx title="Routes.js"
 import HomePage from 'src/pages/HomePage'

docs/docs/tutorial/chapter1/second-page.md

@@ -10,7 +10,7 @@ Notice that we didn't specify a route path this time. If you leave it off the `r
 
 :::info Code-splitting each page
 
-As you add more pages to your app, you may start to worry that more and more code has to be downloaded by the client on any initial page load. Fear not! Redwood will automatically code-split on each Page, which means that initial page loads can be blazingly fast, and you can create as many Pages as you want without having to worry about impacting overall webpack bundle size. If, however, you do want specific Pages to be included in the main bundle, you can [override the default behavior](../../router.md#not-code-splitting).
+As you add more pages to your app, you may start to worry that more and more code has to be downloaded by the client on any initial page load. Fear not! Redwood will automatically code-split on each Page, which means that initial page loads can be blazingly fast, and you can create as many Pages as you want without having to worry about impacting overall bundle size. If, however, you do want specific Pages to be included in the main bundle, you can [override the default behavior](../../router.md#not-code-splitting).
 
 :::
 

docs/docs/vite-configuration.md

@@ -0,0 +1,72 @@
+---
+description: If you have to configure Vite, here's how
+---
+
+# Vite Configuration
+
+Redwood uses Vite. One of Redwood's tenets is convention over configuration.
+
+Vite is an awesome build tool, but we don't want it to be something that you have to be familiar with to be productive.
+So it's worth repeating that you don't have to do any of this, because we configure everything you will need out of the box with a Redwood Vite plugin.
+
+Regardless, there'll probably come a time when you have to configure Vite. All the Vite configuration for your web side sits in `web/vite.config.{js,ts}`, and can be configured the same as any other Vite project. Let's take a peek!
+
+```js
+import dns from 'dns';
+import { defineConfig } from 'vite';
+import redwood from '@redwoodjs/vite';
+
+dns.setDefaultResultOrder('verbatim');
+
+const viteConfig = {
+  plugins: [
+    // 👇 this is the RedwoodJS Vite plugin, that houses all the default configuration
+    redwood()
+    // ... add any custom Vite plugins you would like here
+  ],
+  // You can override built in configuration like server, optimizeDeps, etc. here
+};
+export default defineConfig(viteConfig);
+
+```
+
+Checkout Vite's docs on [configuration](https://vitejs.dev/config/)
+
+
+### Sass and Tailwind CSS
+
+Redwood is already configured to use Sass, if the packages are there:
+
+```
+yarn workspace web add -D sass sass-loader
+```
+
+And if you want to use Tailwind CSS, just run the setup command:
+
+```
+yarn rw setup ui tailwindcss
+```
+
+## Vite Dev Server
+
+Redwood uses Vite's preview server for local development.
+When you run `yarn rw dev`, keys in your `redwood.toml`'s `[web]` table—like `port` and `apiUrl`—are used as vite preview server options (in this case, [preview.port](https://vitejs.dev/config/preview-options.html#preview-port) and [preview.proxy](https://vitejs.dev/config/preview-options.html#preview-proxy) respectively).
+
+> You can peek at all the out-of-the-box configuration for your Vite preview server in the [RedwoodJS Vite plugin](https://github.com/redwoodjs/redwood/blob/main/packages/vite/src/index.ts)
+
+### Using `--forward`
+
+While you can configure Vite using `web/vite.config.js`, it's often simpler to use `yarn rw dev`'s `--forward` option.
+
+For example, if you want to force optimise your Vite dependencies again, you can run:
+
+```
+yarn rw dev --fwd="--force"
+```
+
+You can also use `--forward` to override keys in your `redwood.toml`.
+For example, the following starts your app on port `1234` and disables automatic browser opening:
+
+```
+yarn rw dev --forward="--port 1234 --no-open"
+```

docs/sidebars.js

@@ -185,7 +185,7 @@ module.exports = {
           ],
         },
         'webhooks',
-        'webpack-configuration',
+        'vite-configuration',
       ],
     },
     {