Gitpod: Firebase & Angular online development

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 using:

gp init

.gitpod.yml

tasks:
  - name: STARTING 
    before: |
      echo "Updating npm"
      npm install -g npm@latest
      echo "Installing tools…"
      npm install -g firebase-tools && @angular/cli
    init: |
      echo "Installing dependencies…"
      npm install
    command: |
      echo "Serve project"
      npm start

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 firebase-functions@latest firebase-admin@latest --save
      npm install -g firebase-tools
      echo "Logging in..."
      firebase login:ci --no-localhost

Note: remember to include .gitpod.yml in our 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
  },

3.BUILD

ng build

4.DEPLOY

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 write in terminal:

firebase deploy

or for hosting only

firebase deploy —-only hosting

Maybe you need to select a project alias if it ask so:

firebase use default

then:

firebase deploy

ENVIRONMENT VARIABLES

We can store the firebase token for future uses at gitpod.io/variables click add variable:

add name: TOKEN_NAME

add value:

add scope: your_account_name/project_name Click add variable

Now on terminal you can write:

some-service-that-needs-token $TOKEN_NAME

.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

112