Github Codespaces Vs. Gitpod: Choosing the Best Online Code Editor

and are both based online code editors, with attached Linux dev environment servers, for running terminal tasks; in simple terms, both are cloud-based code editors, and are free* to use. Gitpod Github Codespaces Visual Studio Code : Github Codespaces is only free for personal use during its beta period, which might change in the future, for Github Teams and Organizations there is a pay-as-you-go pricing setup. To get access to personal Github Codespaces you will need to sign up for the . Note beta If you have trouble signing up for Codespaces as a team or organisation the process is to email codespaces@github.com This article details my personal experiences with Gitpod and Github Codespaces, these are my opinions and not definitive facts, your experiences may differ from mine. Why online IDEs? I have more experience with , as it's been around for quite a bit longer than , however, my experience with online code editors and IDEs is longer than that. Gitpod Github Codespaces My first experience with an online code editor was in 2016 (this was before Cloud9 was bought by Amazon and became AWS Cloud9). At the time Cloud9 was a free service and was readily available for personal use, I loved the convenience of the service, so much so, that I fully switched from programming locally to programming online for a short period. All good things come to an end, by December 2019, Cloud9 announced that they were shutting down their standalone service, and instead, Cloud9 would be offered as part of AWS, so, just before I lost access to Cloud9, I started searching for alternatives, ranging from , , to , out of all the alternatives the most competent of them was . Cloud9 Eclipse Che Red Hat CodeReady Workspaces Codeanywhere StackBlitz Gitpod The online vscode revolution The main reason I searched for alternatives was that at that point in time I was attempting to use a Chromebook for all my work. When I found Gitpod I liked the general user experience it was similar to vscode but had some extra additions that made more sense in an online environment, such as the ability to open small previews of websites while developing, etc... Plus, online editors were the only way to code on a Chromebook (this has now changed. Chrome OS now supports Linux as a subsystem), so, 🤷♂️. Gitpod vs. Codespaces Gitpod themselves already made an article about their benefits over Github Codespaces, you can find it here . I will give a brief overview of the differences between the two, note where they overstate their differences and benefits, explain how to make the most of the each service, and then give my personal take on both services. gitpod.io/gitpod-vs-github-codespaces The first point Gitpod makes is that it's "Ready in a flash" Gitpod removes long init and build times by continuously pre-building workspaces for your project. Thereby it allows you to start coding or debugging immediately, from any context, at any time. This is technically correct, at least to a certain point. Gitpod's actual building process takes longer than that of Github Codespaces or at the very least it feels that way, I haven't, nor do I plan to give any exact empirical performance data, as both services are constantly changing things, in fact, the week before I wrote this article, Github introduced . slightly github.dev For your information: is an online vscode based web editor, the difference between this and Github Codespaces, is that Codespaces comes with a terminal, and this doesn't. github.dev In the defense of Gitpod, it can prebuild a workspace unlike Github Codespaces, so you can start coding immediately, without having to wait for the long build process to finish. Another point that Gitpod makes is that it has , "3x more power" By leveraging cloud technologies like containers and Kubernetes, Gitpod achieves best-in-class resource efficiency with scalable workspaces running on shared high-powered cloud servers. This is probably the iffiest points they make, since I can't verify their server configs, nor can I verify that the plans they used for testing, end up being cheaper in actual use, especially, since Github has only released the pricing scheme for Github Teams and Enterprise, and not personal use. Note: After a discussion with from I have confirmed that . Gitpod is working on sharing more information on their server side config in the coming months. @GeoffreyHuntley @gitpod “[they] currently provision machines with 64gb of memory and 16vCPUs and workspaces timeshare the resources in a burstable manner. There are upper limitations to resource consumption on a per workspace basis” As of August 30, 2021, Gitpod has 8 plans*, 2 of which are self-hosted options. They are, Plan Price (Per User/Month) Features Open Source Free 50 hours/month + Private & Public Repos Professional Open Source Free No Time Limit + Private & Public Repos Personal $9 100 hours/month + 4 Parallel Workspaces + 30min Timeout Professional $25 All in Personal + 8 Parallel Workspaces + Unlimited Hours + Teams Unleashed $39 All in Professional + 16 Parallel Workspaces + 1hr Timeout + 3hr Timeout boost Student $9 All in Unleashed, but for “For those still learning the ropes” Self Hosted Open Source Free 10 Registered Users + Public & Private Repos + GitLab, GitHub and Bitbucket + Unlimited Prebuilds + Shared Workspaces + Snapshots + Admin Dashboard Self Hosted Professional Free Everything in + Starts with the 11th user Self Hosted Open Source For Github Codespaces, the pricing* is, Product SKU Unit of measure Price Codespaces Compute 2 core 1 hour $0.18 4 core 1 hour $0.36 8 core 1 hour $0.72 16 core 1 hour $1.44 32 core 1 hour $2.88 Codespaces Storage Storage 1 GB-month $0.07 *Both services have more details included in their pricing scheme, I recommend going through those for detailed and up-to-date information. Note: You have to pay for your Codespaces storage for the time while said workspace exists, this includes while you are not actively using the workspace. Gitpod to my knowledge doesn't require paying for storage. Sources: , . Gitpod GitHub Codespaces In the Gitpod makes, they list some of the benefits they offer in a table-like format, I will be blatantly honest, they are leaving out quite a lot of details, so, I will answer in kind but in a more detailed manner. final point Gitpod Github Codespaces Details PRICING (HOSTED) Free for Open-Source $$$ Again, this is iffy, as it makes conclusions about Gitpod's prices being cheaper, that isn't quite accurate, and is rather misleading LICENSE Open Source Proprietary This is where Gitpod gets a win, their code is actually , in-fact their extensions store uses the open-source , however, the OpenVSX store ends up being both a benefit and a detriment. open source OpenVSX extension store GITHUB INTEGRATION Yes Yes Gitpod has good support for Github, but Codespaces has better integration. Gitpod requires an , the , or the , but Github Codespaces just works right out of the gate, click on any green code dropdown on Github and it will just open Codespaces. Open in Gitpod link Gitpod extension bookmarklet GITLAB INTEGRATION Yes No Accurate. Gitpod is natively integrated into GitLab and gives each user an “Open in Gitpod” button, similar to what Codespaces does for Github. BITBUCKET INTEGRATION Yes No Accurate SELF-HOST ON GCP Yes No Accurate SELF-HOST ON AWS Yes No Accurate SELF-HOST ON KUBERNETES Yes No Accurate PREBUILDS Yes No Accurate SNAPSHOTS Yes No As far as I know it's Accurate. In the Github Codespaces beta, you can't share snapshots of workspaces, essentially, each user is forced to build each repo from scratch, for their use case. At least to my knowledge, I am not sure whether this limitation applies to Github Teams and/or Organizations. VS CODE EXTENSIONS Yes* Yes Gitpod uses the OpenVSX store, the problem is that the OpenVSX store ends up being both a benefit and detriment to Gitpod. VS Code is open-source, but its store is closed source, so, Gitpod (back when it was incubated within TypeFox) created the (including the ) and gifted it to the , an open-source alternative, the problem is that a bunch of extensions are missing from the OpenVSX store, ranging from to and even some open-source extensions that you would expect to be available, however, devs can now automatically with little effort. In this case, I think Github Codespaces has the better extension store, as it directly uses the same proprietary extension store that the local installation of VS Code would use. Open VSX store Theia IDE Eclipse Foundation Github Copilot Live Share deploy their extensions to the OpenVSX IPAD SUPPORT Yes Yes Accurate VIRTUAL DESKTOP (VNC) Yes Yes Accurate MULTI-IDE SUPPORT Yes* No This is accurate. Gitpod allows you to change the base of their service from VS Code to (a deprecated fully open-source variant of VS Code), , and . Personally I have only used the VS Code IDE, so I can’t speak of the experience using the other IDE’s but the option is available for use. Theia JetBrains E-macs Workspace Setup Both Gitpod and Github Codespaces have config files based on Docker that configures your whole env. On Gitpod their config system uses a file which stores your workspace config info and a file which sets up a docker image that you can use to run your workspace. By default, Gitpod uses a as the foundation for workspaces, the standard image has most of the default tools and programs devs require, plus you can also build on top of it to add small additions to it. .gitpod.yml .gitpod.Dockerfile standard docker image The files store basic configuration information, ranging from open ports to post-install scripts. Your basic files look like this: .gitpod.yml .gitpod.yml # Commands to start on workspace startup tasks: - init: yarn install command: yarn build # Ports to expose on workspace startup ports: - port: 8000 onOpen: open-preview For most of the projects I use Gitpod for, I set up a file like this, .gitpod.yml # .gitpod.yml image: file: .gitpod.Dockerfile # List the ports you want to expose and what to do when they are served. See https://www.gitpod.io/docs/43_config_ports/ ports: - port: 3000 onOpen: open-preview - port: 3001 onOpen: ignore github: prebuilds: # enable for the master/default branch (defaults to true) master: true # enable for all branches in this repo (defaults to false) branches: true # enable for pull requests coming from this repo (defaults to true) pullRequests: true # enable for pull requests coming from forks (defaults to false) pullRequestsFromForks: true # add a "Review in Gitpod" button as a comment to pull requests (defaults to true) addComment: true # add a "Review in Gitpod" button to pull requests (defaults to false) addBadge: false # add a label once the prebuild is ready to pull requests (defaults to false) addLabel: prebuilt-in-gitpod # List the start up tasks. You can start them in parallel in multiple terminals. See https://www.gitpod.io/docs/44_config_start_tasks/ tasks: - init: > npm install -g pnpm && pnpm install -g ultra-runner && pnpm install command: > npm install -g pnpm && pnpm install -g ultra-runner && pnpm build The Gitpod prebuilds section sets up a prebuild for each branch, and pull request, and leaves a comment with a link to the prebuild, check out the to learn more. docs for Gitpod prebuilds However, where things get interesting is in the tasks section. The task is run once on workspace startup, and the task is run on workspace startup, and then on every workspace restart. init command The real problem is that the task even though it runs on startup, doesn't store the environmental variable of nor does it link globally installed packages, and from what I can tell this comes from the fact that every terminal environment is based on the Gitpod docker image that is supplied. If no docker image is specified in the gitpod.yml file then the standard "workspace-full" image is used instead. I recommend reading through on the matter. init Gitpod's docs : From what I have been told by from .* Note @GeoffreyHuntley @gitpod “[It’s] recommend [that] you build your own docker image and install any software you need as part of building your docker image once your project complexity merits it. In addition to this [they] are also making changes to implement full-workspace backups which will snapshot the entire environment removing this friction” The , is the file that directly gives you admin access, and enables you to install/do anything you want to your workspace. From my experience, you most likely won't need to change anything here, except for, maybe purposes, and even then, the are very clear. .gitpod.Dockerfile VNC docs # .gitpod.Dockerfile FROM gitpod/workspace-full:latest # Install custom tools, runtime, etc. using apt-get # For example, the command below would install "bastet" - a command-line tetris clone: # # RUN sudo apt-get -q update && # sudo apt-get install -yq bastet && # sudo rm -rf /var/lib/apt/lists/* # # More information: https://www.gitpod.io/docs/config-docker/ On the other hand, setting up a workspace for Github Codespaces is hands-on. Picking a default container is easy enough*, you just follow the , the real problem is that the setup for Github Codespaces is very overwhelming. docs on VS Code For Codespaces you need to create a file and store it in the folder. The file is a json file that contains the information needed to set up your workspace. The file looks like this: .devcontainer.json .devcontainer/ .devcontainer.json .devcontainer.json // For format details, see https://aka.ms/devcontainer.json. For config options, see the README at: // https://github.com/microsoft/vscode-dev-containers/tree/v0.162.0/containers/typescript-node { "name": "Node.js & TypeScript", "build": { "dockerfile": "Dockerfile", // Update 'VARIANT' to pick a Node version: 10, 12, 14 "args": { "VARIANT": "16" } }, // Set *default* container specific settings.json values on container create. "settings": { "npm.packageManager": "pnpm" }, // Add the IDs of extensions you want to be installed when the container is created. "extensions": [ "bierner.jsdoc-markdown-highlighting", "yzhang.markdown-all-in-one", "shd101wyy.markdown-preview-enhanced", "visualstudioexptteam.vscodeintellicode" ], // Use 'forwardPorts' to make a list of ports inside the container available locally. "forwardPorts": [3000], // Use 'postCreateCommand' to run commands after the container is created. "postCreateCommand": "pnpm install", // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root. "remoteUser": "node" } You also need to create a stored inside the folder. The contains docker info, so any configs, you require for your workspace can be set here, like this: Dockerfile .devcontainer/ Dockerfile # See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.187.0/containers/typescript-node/.devcontainer/base.Dockerfile # [Choice] Node.js version: 16, 14, 12 ARG VARIANT="16-buster" FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:0-${VARIANT} # [Optional] Uncomment this section to install additional OS packages. # RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \ # && apt-get -y install --no-install-recommends # [Optional] Uncomment if you want to install an additional version of node using nvm # ARG EXTRA_NODE_VERSION=10 # RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}" # [Optional] Uncomment if you want to install more global node packages # RUN su node -c "npm install -g " RUN su node -c "npm install -g pnpm" This example is based on one of my Github projects , it's a good starting point for setting up a workspace for your own project. okikio/native : The major thing that can throw you off with the Github Codespaces config is that you can't install local packages (I'm talking about ) inside the docker config. Of course, this could be my lack of experience with Docker, but thus far I've been unable to get it to work properly. Note node_modules format, so, in the future, you might be able to easily switch between both Github Codespaces and Gitpod without breaking a sweat. For your information: The Gitpod team is planning to add support for the Github Codespaces devcontainer.json Collaboration I personally haven't collaborated with anyone on Gitpod or Github Codespaces, but each service does offer a way to collaborate with others. For one, Gitpod allows you to share both running workspaces and snapshots (copies of workspaces) with others, and for the other, Github Codespaces allows you to use Live Share to collaborate on the same project. I feel Live Share is a better collaboration tool, sure with Gitpod you can share workspaces with others, but with Codespaces you can both be working on the same project, without skipping a beat, and technically it would be very similar to sharing workspaces with other devs, so...I'll leave the final judgment of this to you. Documentation Github Codespaces has highly detailed documentation, but it's very content dense and a tad bit overwhelming. Gitpod's documentation on the other hand is simpler and more focused on the basics and includes docs and short screencasts. It's a great way to get started with a cloud based dev environment. Github Codespaces basically assumes you're already very experienced, while Gitpod assumes you're new to the world of online dev environments and slowly builds on top. VNC Gitpod and Github Codespaces both have support. From my experiences, both are about equal in terms of how VNC works, however, Gitpod is easier to set up with VNC. VNC is a graphical desktop-sharing system that uses the Remote Frame Buffer protocol (RFB) to remotely control another computer. It transmits the keyboard and mouse input from one computer to another, relaying the graphical-screen updates, over a network. Read more on Virtual Network Computing (VNC) Wikipedia A little while back I tried experimenting to see if I could set up (Safari's browser engine) on my Windows laptop...I failed, I couldn't figure out how to build the Webkit source code on Windows (it was painfully difficult), so, I tried the next best thing, the , it too failed, but interestingly enough, for a vastly different reason. Webkit "cloud" For this experiment, I used Github Codespaces (for a previous experiment I had already tried using Gitpod with VNC, so, I thought I would try Github Codespaces this time). I was able to get VNC functional but couldn't set up Webkit, since, Docker has problems with some of the libraries that Webkit uses. I tried for a good ~16 hours before I gave up. I eventually found another alternative, . Playwright is an end-to-end framework for testing web apps on multiple browsers, it's a great tool for testing web apps. Playwright While trying out Playwright, I found it would only work on Windows (this was because of Webkit & Docker's library issue). Let's get back to the original topic, VNC. In my experiments, I found setting up VNC on Github Codespaces difficult and the build process for said workspace long, I actually timed it, the build process for Github Codespaces with VNC was ~6 minutes, while, on Gitpod it was much faster (I can't remember exactly how long it took, but what I do remember is that it was less than 5 minutes), also, Gitpod's documentation is much easier to digest and just get started with. For check out . VNC on Gitpod gitpod.io/blog/native-ui-with-vnc For check out . VNC on Github Codespaces github.com/microsoft/vscode-dev-containers/blob/main/script-library/docs/desktop-lite.md Annoyances In Gitpod workspaces every terminal is built from the Gitpod docker image given or if non can be found the Gitpod standard image " ", in theory, this sounds awesome, however, from my experience, it ends up being a huge pain to work around. For example, I have found that if you, use nvm (node version manager) to install a new version of node, let's say v16 to replace the Gitpod standard images node, v14, every new terminal you create will use the version of node set up in the standard image, this seems like a very minor issue, but it can cause a bunch of issues and just make you very annoyed over time, plus it just slows down your development velocity. As stated in , this issue can be mitigated by building your own docker image or by typing into your file, workspace-full workspace-setup section .gitpod.yml tasks: # Replace version with version you want installed - init: > nvm install v16 && 'nvm alias default v16' >> /home/gitpod/.bashrc nvm list See more on Stackoverflow The Internet Problem By using Gitpod and Github Codespaces, you become reliant on the internet, and if you don't have access to the internet, you can't use either service. For most devs, this isn't really a problem, since, in most cases, they need access to the internet to commit changes to Github, Bitbucket, etc... For cases where you don't have access to the internet, let's say your ISP messed up somewhere and you lose access for a couple days (I am speaking from personal experience here), then you become unable to do any programming at all. For those who are worried about internet connections the best thing you can do is, to make sure you always have a local copy with all the tools and dependencies already installed, so, you can at least make some progress when you lose access. For small instances where you lose connection for maybe a minute or two, Github Codespaces and Gitpod keep local copies of all open files, and merge them into the online copy when the connection is re-established, so, no worries there. : One thing you should pay attention to is, if you lose internet access for a long time while using Gitpod, you have to pin your workspace in their dashboard, otherwise you may lose your workspace after 14 days, and have to start over. This doesn't really apply to Github Codespaces, since you must actively delete a workspace, Codespaces will shut down a workspace, but it won't delete it for you. If you can't find a workspace, and the last time said workspace was used was less than 14 days, you will have click the button Warning View All Workspaces Miscellaneous A minor difference between Gitpod and Github Codespaces is that Github Codespaces supports using your locally installed version of VS Code to continue development using the VS Code you know and love, as well as forwarding remote ports to localhost ports and much more, all together Github Codespaces allows devs to develop in an environment very similar to local developments except with less resource use (as most of the processing is happening on the remote server), and slightly greater dependence on the internet, read through to learn more. Github's docs Gitpod supports something similar, if you install the Gitpod app as a PWA (from what I know, only Edge allows you to forcefully ), you can then forward the remote ports on the server to your computer's localhost ports, read more about this on . install websites as apps Gitpod's docs For your information: Gitpod is working on support for , so, by the time you are reading this article it might already be live. local VS Code I don't know how important this is to devs, but Github Codespaces automatically syncs settings between VS Code and itself. To use this feature with Gitpod, you need to do some setup with your VS Code installation, read through the to learn more. issue opened by Gitpod When to use Github Codespaces? Github Codespaces is an easy to use and reliable VS Code service, its integration with Github is quite convenient and is hard to properly quantify, its extension support is top tier, its a coding experience that is hard to pass on, especially for devs who already use Github's other services. Github Codespaces is great for devs who need high-resource workspaces and are ok without self-hosting on other platforms. Github Codespaces is good, but it's not the perfect solution for everyone. Github's billing model is a bit strenuous, as workspace storage is not free, so, if you want to use Github Codespaces professionally, you might end up paying quite a bit unintentionally, plus, depending on how many hours you use each Github Codespace, your monthly bill can be a rather painful pill to swallow. When to use Gitpod? Gitpod is an easy-to-use and very reliable VS Code service, and its open-source design allows you to get involved, maybe even fix issues as they arise. Gitpod is great for open-source projects, for those that want a reliable and consistent monthly pricing scheme, for devs looking for non-proprietary VS Code workspaces, or devs that want to use Bitbucket, Gitlab, etc.. and/or to use a self-hosted option on AWS, GCP, etc... Really Gitpod is great for the same reasons as Github Codespaces, it’s just that Gitpod has a little less Github integration which makes Github Codespaces a nicer experience to use with Github. Conclusion Both services are amazing, as they bring a consistent and reliable VS Code experience to devs via the web. However, they are not the perfect solution for everyone, as they each have their ups and downs. I have stated my personal experience with both services, and I would recommend using the one that you feel is best for you. Personally, I switch between both services rather often, however, I prefer Github Codespaces. I find it to be the best option for me as it syncs my settings, supports local VS Code, and has great integration with Github and VS Code extensions (I am even able to use in Github Codespaces). Github Copilot Note: I actually used Github Codespaces together with to write this article. Trust me when I say it's an excellent writing companion, it's almost like the Gmail autocomplete, but better, since it also recognizes code syntax, and can apply them rather effectively. Github Copilot An alternative to is . I haven’t actually used it, but I feel it’s worth mentioning as an alternative, since it works on Gitpod. Github Copilot Tabnine For a more neutral and objective comparison between both services, I suggest reading through on FreeCodeCamp comparing the two. Nader Dabit's article Add missing selfhost and opensource Gitpod plans; get quotes from from concerning server config; add Tabnine as an alternative to Github Copilot; add possible Docker or `.gitpod.yml` fix to Gitpod’s terminal node version issue; fix spelling and grammar issues Update Sept. 09, 2021: @GeoffreyHuntley @gitpod The idea for this article came from a by and . tweet Nik Molnar @nikmd23 Stephan Meijer @meijer_s Photo by , you can find the image on . Okiki Ojo Dropbox Originally published on . https://blog.okikio.dev/github-codespaces-vs-gitpod-an-in-depth-look

Github Codespaces Vs. Gitpod: Choosing the Best Online Code Editor

Too Long; Didn't Read

People Mentioned

Companies Mentioned

@okikio

RELATED STORIES