22da074965
The jscad worker code was hosted as a static asset, making it odd javascript where we have to be conscious of what javascript features we can use and if it will work on older browsers, plus it can't be typescript like the rest of the codebase. Since redwood 0.36 we using webpack 5 should make loading workers easy https://webpack.js.org/guides/web-workers/ But I had trouble with this (see: https://community.redwoodjs.com/t/has-anyone-tried-workers-with-webpack-5-rw0-36-x/2394) and instead used the webpack 4 loader without any issues This issue relates to #411 , and is a checklist item on #444 Resolves #494
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.
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
A file like favicon.png will be copied to /dist/favicon.png. A folder containing a file such as static-files/my-logo.jpg will be copied to /dist/static-files/my-logo.jpg. These can be referenced in your code directly without any special handling, e.g.
<link rel="icon" type="image/png" href="/favicon.png" />
and
<img src="/static-files/my-logo.jpg"> alt="Logo" />
Behind the scenes, we are using Webpack's "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.
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.
Example Asset Import with Webpack
Instead of handling our logo image as a static file per the example above, we can do the following:
import React from "react"
import logo from "./my-logo.jpg"
function Header() {
return <img src={logo} alt="Logo" />
}
export default Header
Behind the scenes, we are using Webpack's "file-loader" and "url-loader (for files smaller than 10kb).