Japanese Version (translated by Ryuichi Tanabe): https://qiita.com/baby-degu/items/bacf20f657625ae8747b

Gitpod is a great online IDE and here is how you can use in your create-react-app based project.

Why Gitpod?

Sometimes we just don’t want to spend time to prepare the development environment and start coding as soon as possible. Gitpod is a Github-integrated and 100 hours per month free use online IDE, it provides flexibility to customize your work space with .gitpod.yml .

A powerful environment on-the-fly (16 cores + 59 GB RAM)

In this story, we will talk about how to leverage Gitpod when you have a project based on create-react-app (or any react project).

Basic Configuration

In the basic configuration, we want to achieve following items:

npm install when we create the work space npm start every time we start the work space See preview every time we update the code

To achieve all the features, you just need to add a .gitpod.yml with following content:

It is pretty self-explained and you can use it most of the projects easily.

More options in official docs

Advanced Configuration

An advanced scenario is to use puppeteer for end-to-end testing in your create-react-app, by default some dependencies used by puppeteer is not installed in Gitpod default work space image (gitpod/workspace-full). So we need to extend the Docker image to make it work.

Add .gitpod.Dockerfile in your repository:

And update .gitpod.yml to use our .gitpod.Dockerfile

Also you need to use --no-sandbox in jest-puppeteer, the full setup can be found here:

Repository: https://github.com/jeromewu/create-react-app-gitpod

Gitpod: https://gitpod.io/#https://github.com/jeromewu/create-react-app-gitpod

With full configuration, now you can have a working environment like below:

One more thing

If you are a VIM user like me, here is a small trick (maybe not the best) to use your VIM configuration in Gitpod with least effort.

The concept here is to zip an existing VIM configuration, download and unzip to container, it saves lots of time to install but may not be a good option if you need to update your VIM configuration very often.