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 →