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

    This website collects cookies to deliver better user experience

    Gitpod: Firebase & Angular online development