Last Friday I received some very good news in my inbox — an invitation to try GitHub Codespaces beta!
I immediately took one of my example Flutter projects (Fluttersaurus) and created a codespace for it. I was able to install VS Code extensions in my browser, customize my theme (dark mode ftw!), and proceed to use VS Code. It even has integrated terminal support so I could execute commands like I normally would. It’s literally the same coding experience — just in my browser.
About Codespaces
For some background, GitHub Codespaces allows you to edit, run, and debug your project using VS Code directly in a web browser. I can imagine this will unlock the possibility of coding on the fly using chromebooks, tablets, etc. without having to invest in an expensive, high-spec machine.
It’s super easy to set up and feels cool to be able to do all of the things I normally do on my desktop, but from anywhere! I was so impressed, I even messaged our team slack:
Running Flutter in Codespaces
The only caveat with Dart and Flutter is that you need to add a devcontainer.json with a reference to a custom docker image that includes the Flutter and Dart SDK. Shoutout to Rody Davis and Abhilash Chandran for pointing me in the right direction for how to set this up! The mobile simulator/emulator is not currently supported, so you may have to use Flutter web to run the code from the comfort of your browser.
How to configure devcontainer.json
In order to run a Flutter app within GitHub Codespaces, a devcontainer.json file must be included as part of the project within a devcontainer directory. In the devcontainer.json, specify either an existing docker image or a path to a docker file, which includes the Flutter SDK. In addition, this configures a forward port to allow you to run the app in your browser.
How to Run Flutter App from Codespace
In order to run the Flutter app from your codespace, run the below command. Remember to set the web hostname to 0.0.0.0 and ensure the web port matches the forwarded port in the previous step.
Pricing
In beta, Codespaces is currently free. Based on the pricing model, you should be able to rely on this new offering for development for a couple hundred dollars a year once it goes public.
Final Thoughts
In its early stages, Codespaces in your browser won’t solve all of your needs. But there’s still the option to open your codespace locally in VS Code and continue working as you normally would.
Currently I plan on using Codespaces beta for quick development on the go and I’m excited to see what lies ahead!
Click here to check out the example used above.* If you have access to Codespaces, you can select "Open with Codespaces" from the code dropdown.
*You can request early access to GitHub Codespaces beta here.
.png)
.png)