Use github action to deploy vue app to github page

by

Loading

Reading Time: < 1 minute Generate a personal access token and create ACCESS_TOKEN variable under Settings -> Secrets. Keep the personal access token in a safe place and do not lose it Go to Actions tab of the github repo Create main.yml under .github/workflow There is no need to write custom deployment script and travis configuration file to automate the … Read more

Use Github Action to deploy Angular app to github page

by

Loading

Reading Time: < 1 minute Generate a personal access token and create ACCESS_TOKEN variable in Settings -> Secrets. Keep the personal access token in a safe place and do not lose it Go to Actions tab of the github repo Create main.yml under .github/workflow References: https://github.com/marketplace/actions/deploy-to-github-pages Create access token for the command line

ng-deploy to github pages

by

Loading

Reading Time: < 1 minute ng add angular-cli-ghpages ng deploy –base-href=”$GITHUB_PAGE/$REPO_NAME/” –repo=”$GITHUB_ORG/$GITHUB_NAME/$REPO_NAME.git” –name=”$GITHUB_NAME” –email=”$GITHUB_EMAIL” –no-silent

Deploy angular app to Github Page by Travis CI

by

Loading

Reading Time: 2 minutes 1) Install npm dependencies angular-cli-ghpages is a plugin that pushes angular application to gh-pages branch. npm install angular-cli-ghpages –save-dev Add prettier schematic to Angular project npm install -g @schuchard/prettier ng g @schuchard/prettier:add 2) Create a .travis.yml file that details the deployment steps 3) Specify language is node_js and node version is 8 language: node_js node_js: … Read more

2019 iT 邦幫忙鐵人賽 – Angular 大師之路

by

Loading

Reading Time: < 1 minute Stackbliz demos [Angular 大師之路] Day 17 – 使用 HTTP_INTERCEPTORS 攔截 Http Request Demo of Day 17 [Angular 大師之路] Day 18 – 使用 ErrorHandler 集中處理錯誤 Demo of Day 18 [Angular 大師之路] Day 19 – 使用 APP_INITIALIZER 在程式運行早期處理資料 Demo of Day 19 [Angular 大師之路] Day 20 – 在 @NgModule 的 providers: [] 自由更換注入內容 (1) Demo of Day … Read more

Add code coverage in Jest in Vue project

by

Loading

Reading Time: < 1 minute Github: https://github.com/railsstudent/vue-2048 1) Assume Vue project is created by vue-cli 3 and unit testing is enabled 2) Add code coverage in jest configuration in package.json “jest”: { “moduleFileExtensions”: [ “js”, “jsx”, “json”, “vue” ] … // Delete the rest for brevity } 3) Append the following configurations in jest configuration “collectCoverage”: true, “collectCoverageFrom”: [ “src/**/*.vue”, … Read more

Use Karma, Mocha, Chai and Coverage to run headless unit tests and generate lcov code coverage

by

Loading

Reading Time: 3 minutes Github: https://github.com/railsstudent/image-gallery-native-js 1) Install gulp, mocha, chai, puppeteer, http-server as dev-dependencies yarn add gulp mocha chai puppeteer http-server -D 2) Install all karma dependencies as dev-dependencies. yarn add karma karma-chai karma-mocha karma-chrome-launcher mocha chai -D 3) Create test/bootstrap.karma.js file to share global variables among unit test cases. ‘use strict’; const expect = chai.expect; const assert … Read more

Workaround for angular production build stuck at 92%

by

Loading

Reading Time: < 1 minute 1) Add –build-optimizer false to turn off optimizer to sacrifice bundle size for space ng build –prod –build-optimizer false 2) Add script to package.json “scripts”: { “build-prod”: “ng build –prod –build-optimizer false”, } With npm, npm run build-prod or with yarn, yarn build-prod Build artifacts can be found in dist/ directory