General
Importing images into HTML
import myImage from 'path-to-image/special.png';
<img src={myImage}/>
myImage
can be used as a AssetsPath for images
Importing assets to SCSS/CSS
background: url("path-to-image/scssImage.png")
Webpack will automatically replace the paths to correct paths using the AssetsPath
Paths for components
Default paths when using Dev server
The default AssetsPath for the dev server is /assets/
and cannot(and shouldn't) be changed.
Default paths for Production
The default AssetsPath for production is /assets/
, this can be further configured
Changing the paths for production
A common use case is to extern multiple components in a bundler - you can then build
the code with a specific AssetsPath. - Please see the section below regarding changing the path
Paths for application
Defaults - Dev server
The default AssetsPath for an application is /
and cannot(and shouldn't) be changed.
Changing the paths for production
Appendix
Changing AssetsPath for production only
As specified above, it's possible to alter the AssetsPath for production
Two ways to set an AssetsPath
1. Create a file: (./projectConfig.json)
{
assetsPath:'https://example.com'
}
2. build with an ENV variable ASSETS_PATH=https://example.com/ npm run build
Node : if both ENV and ProjectConfig are present, ENV will be used by default
Image/Assets output target
When assets are imported into your code they will be exported for production usage
The full path of the asset will be used, so for example inside /dist/
you will find directories matching the local path.
/dist/node_modules/SOME_NODE_MODULE/assets/icon.png
While the above path may look strange, it merely means that we're including an image
from a node module, so the full path is exported.