Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
December 17, 2021 12:04 am GMT

The quickest way to test changes in your forked React library

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 [email protected]: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:

Sandbox usage source code

And this is what I see in the browser:

Sandbox output

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

Forked project changes reflected in real-time

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.


Original Link: https://dev.to/zaguiini/the-quickest-way-to-test-changes-in-your-forked-react-library-4f9b

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To