Nwb: Custom HTML for react-component demo

[joshwcomeau]

I'm creating a React component, and I'd like for its demo to be a pretty full-featured demo app.

By default, there is no index.html file in the /demo/src directory. When I run nwb build, a template gets built that automatically links up the compiled JS/CSS.

This is awesome! But I need to have some custom stuff added to that index.html file (custom <title>, a <link> for my Google Fonts stylesheet, etc).

Right now I'm just manually pasting it into the /demo/dist/index.html file, but that feels really messy.

In the introduction, it implies I can use a template HTML file if I have an index.html file in /src. I have tried using it without success... nwb build seems to be ignoring it.

Would appreciate any guidance in figuring out how to do this in a nicer way. Absolutely loving nwb so far :)

[insin]

Demo app builds currently fall back to using a default, basic template.

It wouldn't take much to have demo builds check for demo/src/index.html (in keeping with the src/index.html convention for React/web apps) and use that instead if present.

[insin]

This wasn't _intended_ for demo builds, but adding webpack.plugins.html config to your nwb.config.js with a template property which points to your custom demo template might just work.

[joshwcomeau]

Awesome, thanks @insin! Will try that.

[ghost]

This is great for having external HTML...
I'm trying to add external css/js files (bootstrap framework FYI) to the template html. seems like it doesn't get picked by nwb.

Any suggestion on how to add css frameworks?

Thanks.

[revolunet]

Looks like we must not include the plugins key in nwb.config.js.

Works for me :

module.exports = {
  type: 'react-component',
  npm: {
    esModules: true,
    umd: false
  },
  webpack: {
    html: {
      template: 'src/index.html'
    }
  }
}

you can get the default template from https://github.com/insin/nwb/blob/master/templates/webpack-template.html

nwb v0.12.2

[insin]

Plugin config was moved up to the top-level webpack object a while back for convenience - thanks for the example solution.

[jimniels]

FWIW, I had to specify the demo folder in my config to get this to work (nwb version 0.20.0), i.e.

module.exports = {
  webpack: {
    html: {
      template: 'demo/src/index.html'
    }
  }
}