Skip to content

Commit

Permalink
Update test-project after Vite doc changes (redwoodjs#8755)
Browse files Browse the repository at this point in the history
  • Loading branch information
Tobbe committed Jun 27, 2023
1 parent e3e87b5 commit db465ce
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 7 deletions.
2 changes: 1 addition & 1 deletion __fixtures__/test-project/web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
"postcss": "^8.4.24",
"postcss-loader": "^7.3.3",
"prettier-plugin-tailwindcss": "^0.3.0",
"storybook": "^7.0.22",
"storybook": "^7.0.24",
"tailwindcss": "^3.3.2"
}
}
11 changes: 5 additions & 6 deletions __fixtures__/test-project/web/public/README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
# Static Assets
Use this folder to add static files directly to your app. All included files and folders will be copied directly into the `/dist` folder (created when Webpack builds for production). They will also be available during development when you run `yarn rw dev`.
Use this folder to add static files directly to your app. All included files and folders will be copied directly into the `/dist` folder (created when Vite builds for production). They will also be available during development when you run `yarn rw dev`.
>Note: files will *not* hot reload while the development server is running. You'll need to manually stop/start to access file changes.
### Example Use
Expand All @@ -12,14 +12,13 @@ and
<img src="/static-files/my-logo.jpg"> alt="Logo" />
```

Behind the scenes, we are using Webpack's ["copy-webpack-plugin"](https://github.com/webpack-contrib/copy-webpack-plugin).

## Best Practices
Because assets in this folder are bypassing the javascript module system, **this folder should be used sparingly** for assets such as favicons, robots.txt, manifests, libraries incompatible with Webpack, etc.
Because assets in this folder are bypassing the javascript module system, **this folder should be used sparingly** for assets such as favicons, robots.txt, manifests, libraries incompatible with Vite, etc.

In general, it's best to import files directly into a template, page, or component. This allows Webpack to include that file in the bundle, which ensures Webpack will correctly process and move assets into the distribution folder, providing error checks and correct paths along the way.
In general, it's best to import files directly into a template, page, or component. This allows Vite to include that file in the bundle when small enough, or to copy it over to the `dist` folder with a hash.

### Example Asset Import with Webpack
### Example Asset Import with Vite
Instead of handling our logo image as a static file per the example above, we can do the following:
```
import React from "react"
Expand All @@ -33,4 +32,4 @@ function Header() {
export default Header
```

Behind the scenes, we are using Webpack's ["file-loader"](https://webpack.js.org/loaders/file-loader/) and ["url-loader](https://webpack.js.org/loaders/url-loader/) (for files smaller than 10kb).
See Vite's docs for [static asset handling](https://vitejs.dev/guide/assets.html)

0 comments on commit db465ce

Please sign in to comment.