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.
Top comments (0)