This content originally appeared on DEV Community and was authored by Luis Felipe Zaguini
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.
This content originally appeared on DEV Community and was authored by Luis Felipe Zaguini
Luis Felipe Zaguini | Sciencx (2021-12-17T00:04:13+00:00) The quickest way to test changes in your forked React library. Retrieved from https://www.scien.cx/2021/12/17/the-quickest-way-to-test-changes-in-your-forked-react-library/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.