How to use Gitpod in your create-react-app based project

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:

1. npm install when we create the work space
2. npm start every time we start the work space
3. See preview every time we update the code

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