One click environment setup directly from your github repo [Nodejs example]

I don't know how much time I spent browsing, cloning and running other people's code on GitHub but one thing for sure - it took a lot of my time setting up the environment and making sure it works on my local machine before I could even start interacting with the code. Thankfully I have been introduced with an amazing tool that eliminates the setup hassle and helps me to work directly with my code. The magic tool is called gitpod.io and in this article, I will show you how to set it up with an example of a nodejs project.

First, let's start with what is gitpod? It's a VSCode looking like cloud IDE which lets you describe your dev environment as code and get fully prebuilt, ready-to-code development environments for any GitLab, GitHub, and Bitbucket project. Might sound confusing at first so let's go through these 5 simple steps to understand how it works. 

Prerequisites before we get started: 

  1. Chrome browser
  2. An account on gitpod.io (it's totally free and the free plan gives you 50 hours per month) 

Step 1. Install gitpod chrome extension (Gitpod - Dev Environments in a Browser Tab). 

Step 2. Create or navigate to any of your public repos in GitHub and you should see the gitpod button. In this example, I will use my repo from the previous tutorial which I posted on webdevs.se earlier. Once in the repo, click that gitpod button.

Step 3. Once the project loads, you can see the editor really feels and looks like VSCode and supports many of its extensions. Gitpod will also automatically suggest setting up some configs for you so click on Setup Project.

Once in there, start by creating .gitpod.yml file. In short, this file helps your run all the commands related to dependency installations and running the starting scripts. My project was a small Nodejs/Express server so the tasks looked the .yml file looked the following way: 

Step 4. Go through project setup stages and adjust them based on your project needs. I recommend adding both .gitpod.Dockerfile ** and updating the base readme file.  In the final step, it will create a pull request on your repo from the gitpod-setup branch. Browse through it if you wish and once you are ready, merge it. 

Step 5. Navigate back to your repo. You can notice that the readme file has added a gitpod ready-to-code button which allows anyone to view and play with your code anytime. Now to test that, use another browser, go into your repo, and click on ready-to-code button. When loaded, you will notice that server.js has started on your chosen port (3000 in my case) and all the dependencies have been installed without you having to do that manually. Now all that's left is to actually start to code, no more worries about setting up dev environment.

I have been using gitpod for almost 5 months now and have not switched back to using VSCode locally ever since. If you found this tool and tutorial useful don't hesitate to let me know.

**By default some dependencies used by puppeteer are not installed in Gitpod so we need to extend the Docker image to make it work. 

Cheers
/Ildana