react-retro-hit-counter icon indicating copy to clipboard operation
react-retro-hit-counter copied to clipboard

Improve build process for working with demo

Open joshwcomeau opened this issue 7 years ago • 0 comments

When working on this component, you can either use the React Storybook stories, or the demo.

The demo is a much nicer dev experience, since you have full access to all the props. However, the demo is its own project, nested within the parent project, and the dependency is a little weird.

The demo installs react-retro-hit-counter from NPM. Then, when building the parent project (the component itself), a separate script copies the dist files into the demo's node_modules directory:

"scripts": {
    "build": "rollup -c && npm run copy-to-demo",
    "copy-to-demo": "rm -rf ./demo/node_modules/react-retro-hit-counter/dist && cp -r ./dist ./demo/node_modules/react-retro-hit-counter/dist",

This is not the "right" way to do this. The only other way that I've seen is to use npm link to create a symlink between the project's dist directory and your global NPM installs, and then another from that global file to the child project's node_modules directory.

When I tried this, though, the demo wasn't rebuilding whenever the files changed. This means I'd have to build the component, wait 3 seconds, make some sort of trivial change to the demo, and wait for the demo to auto-rebuild.

My current solution takes about 3 seconds, and the demo auto-rebuilds. So really, it's not bad... but I feel like there has to be a better way?

joshwcomeau avatar Jan 28 '18 12:01 joshwcomeau