Using the Static Folder
- Scripts and stylesheets are minified and bundled together to avoid extra network requests.
- Missing files cause compilation errors instead of 404 errors for your users.
- Result filenames include content hashes so you don’t need to worry about browsers caching their old versions.
However, there is an escape hatch that you can use to add an asset outside of the module system.
You can create a folder named
static at the root of your project. Every file you put into that folder will be copied into the
public folder. E.g. if you add a file named
sun.jpg to the static folder, it’ll be copied to
You can reference assets from the
static folder in your code without anything special required:
Video hosted on egghead.io.
Keep in mind the downsides of this approach:
- None of the files in the
staticfolder will be post-processed or minified.
- Missing files will not be called at compilation time, and will cause 404 errors for your users.
- Result filenames won’t include content hashes, so you’ll need to add query arguments or rename them every time they change.
folder is useful as a workaround for a number of less common cases:
- You need a file with a specific name in the build output, such as
- You have thousands of images and need to dynamically reference their paths.
- You want to include a small script like
pace.jsoutside of the bundled code.
- Some libraries may be incompatible with Webpack and you have no other option but to include it as a
- You need to import JSON file that doesn’t have a consistent schema, like TopoJSON files, which is difficult to handle with GraphQL. Note that importing JSON files directly inside a page, a template, or a component using
importsyntax results in adding that file to the app bundle and increasing the size of all site’s pages. Instead, it’s better to place your JSON file inside the
staticfolder and use the dynamic import syntax (
import('/static/myjson.json')) within the
componentDidMountlifecycle or the