What's best practice to quickly try out a React component?

Question

I created a React component with the following folder structure:

mycomponent git repo

+ dist
+ node_modules
- src
    mycomponent.js
  .env
  .gitignore
  README.md
  index.js
  package.json
  yarn.lock

My component can be used by other applications by simply importing it and then using it in JSX. Let's call the following my "demo application" which is hosted on a different git repo:

demo app git repo

import React from 'react';
import mycomponent from 'mycomponent';

function() {
  return (
    This is my component
    <mycomponent />
  );
}

During development of my component I need to continuously edit code and then test the result. Obviously, it is very cumbersome to push every change to Git and NPM, then pull it down in my demo app just to see the result. So I created a new folder called "example" within my component repository and added a new app (built with create-react-app) there, so the whole repo now looks like this:

mycomponent git repo with example dir

+ dist
- example
  + node_modules
  - src
      App.js
      index.js
      index.scss
    .env
    README.md
    package.json
    updateAndRun.sh
    yarn.lock
+ node_modules
- src
    mycomponent.js
  .env
  .gitignore
  README.md
  index.js
  package.json
  yarn.lock

This application within the example folder imports mycomponent and uses it in the same way as described above:

example/src/App.js

import React from 'react';
import mycomponent from 'mycomponent';

function() {
  return (
    This is my component
    <mycomponent />
  );
}

Now, during development I let this application from the example directory run by doing $ cd example && yarn start. When I change my component, e.g. /src/mycomponent.js then I go to my example folder and run the updateAndRun.sh script. This script looks like this:

example/updateAndRun.sh

#!/bin/bash

cd .. && yarn run dist && cd example
rm -Rf ./node_modules/mycomponent/dist
cp -r ../dist ./node_modules/mycomponent
cp ../index.js ./node_modules/mycomponent
yarn start

As you can see it creates a new build of my component, then copies it into the node_modules folder within the example directory. Then I restart the app using $ yarn start. This allows me to quickly try out if my component would work as expected within a real application. There are some downsides to this though:

1. Everytime I do a change to my component code I have to stop the running example app and then run the updateAndRun.sh script manually.
2. Manually copying files into node_modules just feels wrong.

Question

What is the best practice here to quickly try out a component written in React without having to push/pull to a different application?

Note – Storybooks

I am aware of Storybooks. Problem here is that I cannot control the surrounding area of where my component is embedded into. For example, Storybooks would create a navigation bar on the left, has an overall light theme (I need dark) and a lot of other stuff which I don't want. I want to be able to create a custom application and see how my component looks and behaves in there.

Answer 1

You can use yarn add to install a package from a folder on your disk.

From the yarn docs:

yarn add link:/path/to/local/folder installs a symlink to a package that is on your local file system. This is useful to develop related packages in monorepo environments.

This means you can keep the repos separate from each other, without copying files, and still use your component.