Serve static assets

[tjwelde]

This is my intent (choose one)

• [ ] I want to report a bug
• [x] I want to request a feature or change
• [ ] I want to provide or change a feature

The problem

I want to provide static assets, for example favicon.ico and robots.txt via the integrated express webserver.

AFAICS I can only import them in code, which will give me the path to the file, postfixed with a random id.

Proposed solution

Have a public folder with assets, I want to serve as-is.

[ZauberNerd]

Hi @tjwelde thank you for reporting this. At the moment we're in the middle of preparing the next major version (Hops 12) which we will release at the end of the year, but I've found a way to configure a custom mixin which will bring you the desired behaviour for now.

mixins/public-dir/mixin.core.js

const { Mixin } = require('hops');
const { ensureLeadingSlash } = require('pathifist');
const { relative } = require('path');

module.exports = class PublicMixin extends Mixin {
  configureBuild(webpackConfig) {
    webpackConfig.output.publicPath = ensureLeadingSlash(relative(this.config.distDir, this.config.buildDir));
  }
};

Then register the mixin in your config and configure distDir (the directory that is being served by express) and buildDir (the directory in which webpack writes the artifacts) accordingly:

package.json

"hops": {
  "mixins": ["./mixins/public-dir"],
  "distDir": "<rootDir>/public",
  "buildDir": "<distDir>/assets"
}

Caution: This approach unfortunately does not work when using static rendering (hops build -s).

[tjwelde]

Hey @ZauberNerd thank you for the suggestion. We will implement it as a mixin for now. If you don't want to use this ticket as a feature request for hops 12, feel free to close it.