joshwcomeau/react-retro-hit-counter

Improve build process for working with demo

Open

#4 opened on Jan 28, 2018

 (0 comments) (0 reactions) (0 assignees)JavaScript (5 forks)github user discovery
enhancementhelp wanted

Repository metrics

Stars
 (165 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

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?

Contributor guide