Build with Gitpod

A step-by-step tutorial for getting started and learning how to configure Gitpod. By the end of this tutorial, you will learn everything you need to Gitpodify™ your own projects and start using Gitpod as your development environment.

Prerequisites

1. Create a Gitpod Account - Use GitLab, GitHub or Bitbucket to authenticate.
   • Use our free plan for 50 hours per month for free.
   • For more hours you can choose a plan.
2. A basic understanding of React, Node.js (Express) and PostgreSQL.

What are we building?

For this tutorial, we will Gitpodify the EventHub project. An example application where you can submit new events. It uses React for the front-end, Node.js with Express for the back-end, and PostgreSQL for the database.

Here’s the final .gitpod.yml configuration that we’ll build together:

image: gitpod/workspace-postgres

tasks:
    - name: run back-end
      openMode: split-left
      command: |
          npm install pg dotenv
          npm install
          npm start

    - name: run front-end
      openMode: split-right
      command: |
          cd client
          npm install
          echo "REACT_APP_API_URL=$(gp url 3001)" > .env
          npm start

   - name: create tables in db
     command: './init-db.sh'

ports:
    - name: front-end
      port: 3000
      onOpen: open-preview

    - name: back-end
      port: 3001
      onOpen: ignore
      visibility: public

    - name: database
      port: 5432
      onOpen: ignore

For this tutorial, we’ll focus on VS Code in the Browser as a simple way to get started. However, Gitpod supports many editors like VS Code Desktop, JetBrains, SSH, to suit your needs. You can change editors when you create workspaces.

Next Steps

Start your workspace →