react-retro-hit-counter
react-retro-hit-counter copied to clipboard
Improve build process for working with demo
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?