May 02, 2022
4 mins read
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]
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 😊
