From Zero to Ciroue: Introducing an Online Code Sandbox for PHP
TL; DR: How I ended up making an Online Code Sandbox made for PHP called Ciroue. If you want to try it out you can try it here
For every tool out there, there probably exists a majority who wants to try it out as newbies or starters. At some point, everyone who can stand now started that way. Having a place to see other people’s works and request for help from our friends or a community when we get stuck generally reduces the barrier of entry when newcomers have a way to get help to their problems as well as learn from other people’s work.
One of the very important things I learnt from the JavaScript community is the ease that comes in sharing what you’re working on or what you’ve done for everyone to see, both to learn from or to just see the wonder in what has been made. I noticed these little things makes learning JavaScript pretty easy.
As a person who writes JavaScript, this helped my career a lot, as I can look around to see other people’s works and learn a lot from them. For anyone in the frontend community, you will have heard of CodeSandbox, CodePen, BootSnip, RunKit.
The combination of these tools is the answer to the question that “Can you get started in a frontend skill without setting up a local environment?“. They make the answer to this question YES.
Combining these tools not only make learning easy but also makes prototyping and sharing an Idea easy. If you’re a developer who makes Packages for NodeJS, Runkit is a good place for you to make people test it without them having to install it on a real machine — All is done in the convenience of their browser.
Or you write frontend React or Vue packages, CodeSandbox will be a good place to host so your users can play with a demo.
Looking at The Problem
Being in a Love relationship with PHP ❤️ (Technically Speaking), I see a great way this can help the PHP community too when we have tools like this. In some ways I can see some immediate problems this can solve both for people in the community and new people who want to learn the PHP Language.
In recent times when I mentor people learning PHP or was their instructor, I can tell that, being in Nigeria, we don’t have PC evenly distributed to people who wants to code or probably when you even have it, it cannot do some tasks or you probably run into problems while setting it up. This is a major problem I do go through while taking tutorials or taking a Workshop. I do like teaching people but there’s discouragement when the time meant to be spent on Teaching people are seen trying to help them figure out why a piece of software can’t install on their laptop. Thinking about it, having a Tool like CodeSandbox for PHP can let the Student focus on learning and not bother about setting the machine up initially. But there was None — Something dedicated to PHP in this Area.
Another problem related to the previous area is around debugging and asking for help. Most of my students or people who reach out to me don’t have an easy way of sharing the problem they’re having. Most will probably give screenshots or a dead Code snippet that requires me to run on my PC in some ways. This doesn’t make them getting help easy. Just compare this to having a problem with HTML and CSS, you can just copy your code snippet to CodePen and share the link with whoever wants to help, and the helper can also do the same when the problem is solved. I want newbies coming in to Learn PHP find this barrier of finding solutions to their problem as low as possible.
Moving on, earlier this year I wrote 2 PHP Packages for the payment Processor giant in my country — Paystack, It was more like Re-inventing the Wheel, but I have a goal — to make it the best, to make sure it covers all Exposed Paystack API as documented. And you know what? I did. I made one for PHP and one dedicated for Laravel. After writing the documentation for this 2 Packages, I asked myself how the people I want to share it with will test it and the answer was that they’d probably create a sample project and just install it there. When I think about this, Its a nightmare, at least for people who are still like I used to be. I wrote those packages about half a year after getting my first MacBook and I can still understand what it means to wait for a Composer package to install on a 4gb-RAM-powered PC. At this point, I want a faster way that people who want to use my packages can test them in no time and have a feel of how awesome it is.
Then I remembered that button I use to see on NPM Packages (at npmjs.org) that says “Test with RunKit”. I realised nothing like this existed on Packagist.org and at this point, I have an idea on what is possible even though I have no idea how I need to go about this.
Looking at other packages on Packages, I realised how good this can be for PHP Developers if we can TEST a package and play with it without having to install it in a Project. So, I told myself I won’t publicise the packages I wrote until I’m able to come up with this Idea working and seen in my documentation for these Packages.
Building the Solution
Initially, I called the project PHPKit and getting to make the initial version was quite hard for me, the first version was built on Async PHP and I tweeted about it here:
Here is the preview:
After the tweet, I got feedback from people that also believes the tool will help in certain ways and this was motivating enough to get me back to strategising how the Stable app will look like. It was then I figured out how it should go, at this point I started thinking of how good it will be if you don’t need a PC set up for you to learn PHP and any framework you want to, all you need is Safari, Chrome or Firefox. I also looked at how tons of packages out there can easily be tested with ease making Documentation for these packages come alive.
By the time I did the second version, I already got a name I want to call the project, and I tweeted about the new update as well. Here:
And here’s the preview too.
I got greater feedback from this tweet than before and still reinforces the fact that there are developers out there who find this useful and will like to try it out.
Moving forward, here is the new Look and of course not a video this time, the app is now live here:
Some Features
With the initial release of Ciroue coming, you’ll be able to:
- Sandboxing a Laravel App
- Sandbox a Vanilla PHP App
- Sandbox an interactive PHP App (More like a CLI Application with a better Editor)
- Install composer packages
- Configure environments
- Embed your sandboxed project on webpages
Not all features above ships with V1 of Ciroue. Some are coming after V1
A Little bit about The workings of Ciroue
Ciroue is built with Laravel, and the real-time part, which includes running of processes and keeping them alive, is built with React PHP, every project created on Ciroue runs inside a tiny Docker container that is Provisioned when you create it. All projects on Ciroue are called Notebooks.
Once a Notebook has been provisioned, Ciroue will create an NGROK Tunnel (Only for Non-CLI projects that require preview) through the container so you can have a Vanity URL to preview your Notebook while working on it.
I’m currently still on active work to get important things I want Ciroue to ship with ready and can’t wait to let people use this. That is why I will like you to give it a try.
Finances
Even though this project is resource-intensive, the truth is I don’t know HOW I will finance this project yet, because, even as of the time I’m writing this I’m still a student and not even working (fully) yet to even think of raising some funds from a salary. One thing I do know is that I will like to make this work and I’m ready to do whatever it takes at length for the people it’s going to help — including me.
Conclusion
I cannot write this without appreciating some folks who helped in one way or the other while making this and those people include: Mercy Ikpe, Trojan Okoh, Nedy, Wisdom
I’m looking forward to where this will go and looking forward to more feedback from people — I want to know your thoughts about it. In case you think something will be good to add, you can contact me on Twitter and let’s talk about it.
