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.