Cloud Dev Environments

My daughter recently become interested in web development but her school Chromebook was locked down so she couldn’t install an app locally to edit HTML files. She needed a development solution that would allow her to write markup so she could learn all the tags versus a graphical editor (I.e., Wix, Canva, or WordPress page builders). It seemed silly to get a her another laptop just to edit some HTML files so I started looking at cloud-based development options.

There are a couple solutions for working with snippets like CodePen and JSFiddle but I wanted something a bit more like a local dev experience. At the other end of the spectrum are full virtual desktop infrastructure (VDI) solutions like Azure Virtual Desktop, Citrix, Amazon Workspace, and others. Those seemed too heavy weight for just editing some HTML files. I was looking for something in the middle and inexpensive for an hobbyist web builder.

Here are the options I looked at:

  • Visual Studio Code for the web – If you can access local files at least, and view local files in a browser this looks like a nice, lightweight option. It’s still in preview but it doesn’t look like there is any cost at this time.
  • Replit – Replit provides an in-browser IDE that allows you to write and view your code. They offer a free trial so I gave it a try using their HTML, CSS, JS template. The editor seemed pretty nice and I could easily view my page output in the right-hand preview pane. I also noticed there were quite a few tools in the lower-left pane. I.e., The Replit AI pair programmer. This looks like a good option.
  • CodeSandbox.io – CodeSandbox looks very similar to Replit but it just worked. I click the free trial, chose the Vanilla Codesandbox and I could just start editing HTML files and see the output in the right pane. Another good option.
  • Gitpod – Gitpod looks interesting but it assumes you are starting your project from a repo. I couldn’t figure out how to simply start a new project and start building some web pages. My daughter is pretty smart for her age but she doesn’t know anything about code repos yet.
  • Github Codespaces – Codespaces is nice for building a service and saving it right to your repo but I couldn’t find a way to quickly preview a web page without running a server of some kind. I wanted something quick and easy for kid to write web pages on.
  • Google’s IDX – This project looks interesting but I could only sign up for the waitlist so not an option at this time.

We landed on Visual Studio Code for the web. My daughter was able to use it on Chromebook and I could even “install” it and put a shortcut on her taskbar. She is editing the text in the browser but still still loading from and saving to local files. This is nice because if Visual Studio Code for the cloud ever goes away she would still have her files.

I think Replit or CodeSandbox would have been good solutions as well. They are easy to use and beginner friendly and provide templates for more advanced development projects with React, Next,js, Angular, etc. Judging by the templates and tool sets available I would say Replit has a larger feature set while CodeSandbox has a more narrow focus on web development.

Let me know if there are other options you don’t see on my list. Thanks!