This is a part of the series: LocalPen - code pens that run locally!
Now after a long series of posts describing LocalPen, let's actually do the submission, just before the deadline :)
LocalPen, a powerful frontend coding playground that runs totally on the client and can be hosted on any static file server.
Detailed description of the app, with the various features and how to use them are provided in the previous posts of this series.
Code pens that run locally!
A powerful frontend coding playground that runs totally on the client and can be hosted on any static file server.
TL;DR: Getting started
- Monaco editor (the beautiful code editor that powers VS Code)
- Prettier code formatting
- Emmet tab completion
- All code compiling/transpiling occurs on the fly on the client, so works on any static server.
- Immediate results with no server rounds
- Conditional loading of modules (only the features used are downloaded)
- Allows adding external stylesheets and/or scripts
- Allows importing npm modules that can be referenced directly without a build step (using the great skypack.dev)
- Allows importing strongly-typed local typescript modules with full code completion and intellisense.
- Can be embedded in regular web pages
I was building a visualization library based on D3 using typescript. I wanted to have a code playground for my library on the documentation website. The available options did not totally satisfy my needs/budget.
That coincided with the announcement of the Digital Ocean Hackathon. It was a strong motive to build something usable and as feature-rich as possible during the available time period.
Overall, it was such a great experience.
(How did you utilize DigitalOcean’s App Platform? Did you learn something new along the way? Pick up a new skill?)
Being a totally client-side app, adding more features would mean significantly increasing the app size with a significant delay in the initial render. We are talking here about adding transpilers for languages like typescript, pug, scss, etc. Also prettier parser for each language. So I heavily used dynamic imports which allowed to only download the features the user is currently actually using. Whenever the editor language changes, only then its requirements are downloaded. This made it a lot less expensive to add more languages.
When the project started, it seemed too small to need a state management strategy. Then as it grew larger, with more features, specially on loading a saved project instead of the currently loaded one, state started to become inconsistent. I believe it is still an overkill to add redux for such a relatively limited app, but applying principles from redux (like immutability with get and set functions fixed such problems).
I usually use Digital Ocean as the cloud provider, mainly because of the simplicity (not having a thousand option to choose from and a thousand new technology to learn just to deploy your code), in addition to the predictable pricing model (also not having to multiply the number of dollars by the number of minutes in the month to know how much I will pay every time I use a service). I had previous experience using their VMs (droplets). For this project I used the App platform and selected static site hosting, since my app is client-side only. It was actually quite easy to deploy. Code push triggers automatic deployment without having to setup a specific CI/CD workflow. I still use github actions for validating build and tests, but still, deployment was quite easy. Also the one-click deploy option makes it very easy to get started.
However, I have some inquiries. Please let me know in the comments if you have answers. I expect to be notified if the deployment fails because of build failure. That happened once and I was not notified. Is there a setting I need to make. Also, I do not want to add a client-side analytics solution. Is there a way to know from the server the number of requests, geographic distribution, bad requests, etc?
One final thought. Although, the app seems to be feature-rich, most of the features are provided by integrating great open-source projects. It feels like sitting on the shoulder of giants. I feel very grateful for the open-source community.
At last, it feels great to build apps that you and others actually use. I plan to continue building and adding features/fixes to LocalPen. It would be great to know your opinion, comments, advice, ideas and, even better, contribution.