React-styleguidist: Need to restart server after adding new example file

Created on 26 Aug 2016 · 9Comments · Source: styleguidist/react-styleguidist

I don't remember if this is a regression or not, but every time I add a new component I have to restart the server. Hot reloading works when I make changes to the component and the md file, but new files don't get picked up.

Here is my config:

const path = require('path')

// Exit on end of STDIN
process.stdin.resume()
process.stdin.on('end', () => process.exit(0))

module.exports = {
  title: 'My Style Guide',
  sections: [
    {
      name: 'Forms',
      components: './client/app/components/forms/**/*.js',
    },
  ],
  skipComponentsWithoutExample: true,

  getExampleFilename(componentPath) {
    return componentPath.replace(/\.js$/, '.examples.md')
  },

  getComponentPathLine(componentPath) {
    const name = path.basename(componentPath, '.js')
    const dir = path.dirname(componentPath.replace(/^client\/app/, ''))

    return `import ${name} from 'app${dir}/${name}'`
  },

  updateWebpackConfig(webpackConfig) {
    // Your source files folder or array of folders, should not include node_modules
    const clientDir = path.join(__dirname, 'client')
    webpackConfig.resolve.modules.unshift(clientDir)
    webpackConfig.module.loaders.push(
      // Babel loader will use your project’s .babelrc
      {
        test: /\.jsx?$/,
        include: clientDir,
        loader: 'babel',
      },
      {
        test: /\.css$/,
        include: [
          path.dirname(require.resolve('ress')),
          clientDir,
        ],
        loaders: [
          'style',
          'css',
        ],
      }
    )

    return webpackConfig
  },
}

enhancement help wanted

Source

aaronjensen

All 9 comments

I think it was always like that and I don’t know how to fix it if that’s possible at all. Well be happy if someone could fix it and submit a pull request.

sapegin on 26 Aug 2016

👍1

I think the only way to fix this would be to have a file watcher, say nodemon or something watch directory for any new file additions, changes, etc and then restart the server for you. It wouldn't be that great of an experience though since the build time is kinda slow so you may want to only do it for new files only, if possible.

tizmagik on 16 Sep 2016

I'm not sure about that. I'm pretty sure that we pack require contexts can watch a directory tree. I'd have to look into how exactly.

On Sep 16, 2016, 8:48 AM -0700, Jeremy Gayed [email protected], wrote:

I think the only way to fix this would be to have a file watcher, say nodemon or something watch directory for any new file additions, changes, etc and then restart the server for you. It wouldn't be that great of an experience though since the build time is kinda slow so you may want to only do it for new files only, if possible.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub (https://github.com/sapegin/react-styleguidist/issues/172#issuecomment-247636024), or mute the thread (https://github.com/notifications/unsubscribe-auth/AAAhjDfylsrsAgonJaXRA0sm5us4Ydlaks5qqrpogaJpZM4Jtn5K).

aaronjensen on 16 Sep 2016

@tizmagik But that will require page reload in a browser?

sapegin on 17 Sep 2016

👍1

Ah yea, I think it would. Interested in the require contexts solution you mentioned @aaronjensen

tizmagik on 5 Oct 2016

I'd much rather have a page reload in the browser than having to manually restart the process, AND then reload the page.

Did someone try this with nodemon? A sample setup, at least as a workaround, would be interesting.