The quickest way to test changes in your forked React library

Luis Felipe Zaguini — Fri, 17 Dec 2021 00:04:13 +0000

I found that I was repeating myself in a fairly easy-to-automate task: create a React sandbox so I could easily test my projects in an isolated environment.

Then, I rolled up my sleeves and end up creating my first command-line application! It's called create-sandbox ✨

The first thing that might come to mind is "how is it different from codesandbox.io?"

Well -- codesandbox.io, despite being a great project that I do use extensively, only allows the installation of published packages. Not only that, it does not let you browse node_modules, making it impossible to change the source code.

It also does not support linking, therefore you cannot iterate changes in your library in real-time.

You can run it like that:

npx create-sandbox <source>

Where source is either a Git repository URL (it doesn't matter if it's SSH or HTTPS) or an existing folder in your file system.

For testing, I'll pick my own use-data-structures library. As one can guess, it exposes a few hooks that enables powerful data structures inside React. Let's go!

➜  npx create-sandbox git@github.com:zaguiini/use-data-structures.git

✔ Cloned successfully
✔ React sandbox created successfully
✔ Project dependencies installed
✔ Dependencies linked

  Done!

  Now enter the `use-data-structures-sandbox` directory,
  run `yarn start` and enjoy your development sandbox!

And 💥! My sandbox is created!

When running yarn start in my sandbox folder, along with yarn start in my forked project, I can test my changes in real-time!

This is my usage in the sandbox:

And this is what I see in the browser:

Now look what happens when I change the peek method return value in my forked project to blue da ba dee da ba di:

Pretty cool, right?! It only took me a single command to clone the repository, create a sandbox, link the forked project and start iterating over it. A cool thing is that create-sandbox uses whatever project manager the forked package uses, be it NPM or Yarn.

This is just the beginning. Right now, create-sandbox only works on simple React projects. In the future, monorepos will be supported.

Not only that -- I'm planning to support other JavaScript frameworks, such as Vue, Angular and even Svelte, if possible!

The future looks bright, indeed. If you're wondering how I did that, here's the repository. It has the full roadmap, along with documentation! Come join us!

Thanks for reading! Let me know if there are any questions.

DEV Community: Luis Felipe Zaguini

The quickest way to test changes in your forked React library