Gitpod is an online IDE for GitHub that helps you write/build/test/deploy with just a computer and internet connection. It runs on faster machines with pre-installed packages and VScode. Your workspace and development environment is saved to the cloud and ready to use with just clicking GITPOD button at your GitHub repository.

  • Chrome extension

Add the Gitpod chrome extension to your browser to get the GITPOD button directly on Github.

chrome.google.com/gitpod

1.PREPARE

If you don't have a .gitpod.yml file, create one using:

gp init

My gitpod.yml file has a single task named START that will open a terminal with the same name, to run the tasks types before, init and command.

Gitpod process:

Creates a Prebuilt that will run once, the task types:

before (installing what will be useful) and then

init (installing dependencies).

2. Creates a Workspace that will run every time the task types:

before (yes, again, installing what will be useful) and then

command (starting server).

tasks:

- name: START

before: |

echo "✅ BEFORE | PREBUILT & WORKSPACE: Define node version, install angular and firebase"

nvm install 12.20.2

nvm alias default 12.20.2

npx @angular/cli analytics off

npm install -g @angular/cli

npm install -g firebase-tools

init: |

echo "✅ INIT | PREBUILT: Installing dependencies…"

npm install

command: |

echo "✅ COMMAND | WORKSPACE: Serve project"

npm start

For deploy:

tasks:

- name: DEPLOY

openMode: split-right

before: |

echo "✅ BEFORE | PREBUILT & WORKSPACE: Define node version, install angular and firebase"

nvm install 12.20.2

nvm alias default 12.20.2

npx @angular/cli analytics off

npm install -g @angular/cli

npm install -g firebase-tools

command: |

echo "✅ COMMAND | WORKSPACE: Deploy project"

ng build --configuration production

firebase deploy --project default --only hosting && firestore:rules --token $FIREBASE_TOKEN

For functions:

tasks:

- init: |

echo "Installing Firebase tools..."

npm install -g firebase-tools

cd /workspace/my_project/functions

echo "Getting dependencies..."

npm install

command: |

cd /workspace/my_project/functions

echo "Make sure we are using the latest versions of Firebase tools and libraries..."

npm install [email protected] [email protected] --save

npm install -g firebase-tools

echo "Logging in..."

firebase login:ci --no-localhost

Note: remember to include .gitpod.yml in your project's Github repo.

2.EDIT

To prevent loop error at Console:

Add "disableHostCheck": true to angular.json in architect > serve > options:

"serve": {

"builder": "@angular-devkit/build-angular:dev-server",

"options": {

"disableHostCheck": true

},

If there is a conflict when pulling to Github type on terminal:

git config pull.rebase false

3.BUILD

To create the dist/browser folder files:

ng build --prod

4.DEPLOY

  • Manual

To successfully login to Firebase inside Gitpod:

firebase login --no-localhost

Sign-in using the url, select your google account, click allow

Copy the token code.

Paste token code into terminal and hit enter.

Now to select the default project, and deploy firestore rules and hosting using:

firebase --project default deploy --only firestore && hosting

  • Automatic

Open a terminal and write firebase login:ci

Sign-in using the url, select your google account, click allow

Copy the token code.

Paste token code into terminal and hit enter.

Now go back to Gitpod and add an environment variable. We can store the firebase token for future uses at gitpod.io/variables click add variable:

add name: FIREBASE_TOKEN

add value: pasteyourtoken

add scope: youraccountname/project_name

Click add variable. Now on terminal you can write:

some-service-that-needs-token $FIREBASE_TOKEN

or you can use the .gitpod.yml file to deploy your app on every workspace start.

5. DEPLOY USING GITHUB

You can deploy whenever you update your repo using Github Actions.

Add a Secret

On your repo go to Settings/Secrets/Actions and click on: New repository secret with name: FIREBASE_TOKEN and paste your token.

Create a .yml file

On .github/workflows/firebase.yml with:

name: Build and Deploy to Firebase

on:

push:

branches:

- master

jobs:

build:

name: Build

runs-on: ubuntu-latest

steps:

- name: Checkout Repo

uses: actions/[email protected]

- uses: actions/[email protected]er

with:

node-version: '10.x'

- name: Install Dependencies

run: npm install

- name: Build

run: npm run build

- name: Archive Production Artifact

uses: actions/[email protected]

with:

name: dist

path: dist

deploy:

name: Deploy

needs: build

runs-on: ubuntu-latest

steps:

- name: Checkout Repo

uses: actions/[email protected]

- name: Download Artifact

uses: actions/[email protected]

with:

name: dist

path: dist

- name: Deploy to Firebase

uses: w9jds/[email protected]

with:

args: deploy --project default --only hosting && firestore

env:

FIREBASETOKEN: ${{ secrets.FIREBASETOKEN }}

PROJECTID: yourfirebaseprojectid_optional

firestore:rules throw "not found" error.

.gitignore

# More info http://help.github.com/ignore-files/

/.firebase

/.vscode

/dist

/node_modules

.editorconfig

.firebaserc

*.log

/.firebase

/e2e

environment.prod.ts

environment.ts

# Others

/tmp

/out-tsc

# Only exists if Bazel was run

/bazel-out

# profiling files

chrome-profiler-events*.json

speed-measure-plugin*.json

# IDEs and editors

/.idea

.project

.classpath

.c9/

*.launch

.settings/

*.sublime-workspace

# IDE - VSCode

.vscode/*

!.vscode/settings.json

!.vscode/tasks.json

!.vscode/launch.json

!.vscode/extensions.json

.history/*

# misc

/.sass-cache

/connect.lock

/coverage

/libpeerconnection.log

npm-debug.log

yarn-error.log

testem.log

/typings

NOTES.md

# System Files

.DS_Store

Thumbs.db

---

GITPOD TROUBLE SHOOTING

When running a workspace, in case you get:

Workspace failed with message: 13 INTERNAL: cannot resolve workspace image: hostname required

You need to empty cache of the site.

On Chrome, just open gitpod.io on a new tab, open developer tools: View/Developer/Developer Tools , right-click on reload button, and then select Empty Cache and Hard Reload

---

If you need help let me know in the comments and I'll try my best 😊