Path to static resources is baked in, cannot be set when using as a module

[paulkaplan]

When using the GUI as a node module in another project, you should be able to specify where to find static assets like images. Right now they are baked with /static/assets/... which works for www but makes it hard to use in other projects where those files might have a different path.

/cc @rschamp part of using GUI as a component of other projects

[rschamp]

I'm not sure what the best way to solve this is for the distributable module, but for our purposes in the short term the plan should be to inline loaders and point main (or just browser) to src/ so that the gui can be built by an external webpack config. Then the containing project can configure publicPath itself.

[thisandagain]

/cc @picklesrus @kchadha

[thisandagain]

/cc @cwillisf

[thisandagain]

/cc @chrisgarrity

[chrisgarrity]

Note, a similar issue just came up with dynamic imports of tutorial image data. Remember to check tutorial images when we solve this one.

[paulkaplan]

@rschamp there are several hundred image file references throughout the repo, are we sure we want to expand every one from import asset from './asset.svg' to import asset from 'file-loader!./asset.svg? are there other options you need to pass in to inline loaders like that?

[paulkaplan]

Looks like you can also specify loaders from the CLI, maybe we should do that so that consumers who build from source can specify loader options there?

[rschamp]

Discussed offline — we probably don't want to inline the loaders for images/sounds, and let the parent project configure those (as long as we document what types of binary files like these get imported). The imports for CSS files will be tricky though, since we have a really specific config for that, so that would get really verbose... We might want to resort to documenting or exporting that config as well.

[paulkaplan]

@rschamp maybe for CSS we could have GUI extract and build the CSS using its autoprefixer/css-variables/etc plugins to build vanilla css as an asset file, then the consumer could decide how to include that built css? One example we could look at might be a repo like react-tabs which seems to do that (although I'm not 100% sure) https://github.com/reactjs/react-tabs/blob/master/webpack.config.js