Category: Vue

Use Github Action to deploy Vue app to Netlify

Reading Time: 2 minutes

 126 total views

  • 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 netlify.yml under .github/workflow
  • Paste the follow code in the yaml file
# .github/workflows/netlify.yml
name: Build and Deploy to Netlify
on:
  push:
  pull_request:
    types: [opened, synchronize]
jobs:
  build:
    name: Deploying to Netlify
    runs-on: ubuntu-latest
    steps:
      - name: Setup Node.js for use with actions
        uses: actions/setup-node@v1.1.0
        with:
           version:  12.x

      - name: Check out branch
        uses: actions/checkout@v2

      # ( Build to ./dist or other directory... )
      - name: Clean install dependencies
        run: npm ci

      - name: Build app
        run: npm run build-netlify

      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@v1.1
        with:
          publish-dir: './dist'
          production-branch: master
          github-token: ${{ secrets.ACCESS_SECRET }}
          deploy-message: "Deploy from GitHub Actions"
          enable-pull-request-comment: false
          enable-commit-comment: true
          overwrites-pull-request-comment: true
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
        timeout-minutes: 1

I deploy the Tic Tac Toe game to both github page and Netlify; therefore, I use NODE_ENV variable to configure the public path in vue.config.js.

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "/vue-tic-tac-toe/" : "/",
  outputDir: "dist",
  lintOnSave: process.env.NODE_ENV !== "production",
  devServer: {
    overlay: {
      warnings: true,
      errors: true
    }
  }
};

The NODE_ENV variable of github page is “production” by default and the full URL becomes https://<username>.github.io/vue-tic-tac-toe/. For Netlify deployment, I set the NODE_ENV variable to “netlify” and the game is hosted on https://<netlify app>/ .

Open package.json and add a task that builds the project to dist directory and publishes it to Netlify. 

{
  ...
  "scripts": {
    ...
    "build-netlify": "NODE_ENV=netlify vue-cli-service build"
  },
  ...
}

Login to Netlify to look up NETIFY_SITE_ID and NETIFY_AUTH_TOKEN.

Go to Team > Site > Settings > Site Information > API ID to copy down the NETLIFY_SITE_ID

Go to User Settings > Applications > Personal access token and clicks New Access Token button to generate a token. The token is your NETLIFY_AUTH_TOKEN and it should be kept in a safe location.

Now, you are ready to create NETLIFY_SITE_ID and NETLIFY_AUTH_TOKEN variables under Settings -> Secrets in Github.

We are done! There is no need to write custom deployment script and travis configuration file to automate the CI/CD process. Github notifies Netlify to automate the build process and publish the site when latest changes are committed.

References:

Use github action to deploy vue app to github page

Reading Time: < 1 minutes

 152 total views

  • 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
 name: Deploy to github pages
 on:
   push:
    branches:
     - master
 jobs:
    build:
      name: Deploying to gh-pages
      runs-on: ubuntu-latest
      steps:
        - name: Setup Node.js for use with actions
          uses: actions/setup-node@v1.1.0
          with:
            version:  12.x
        - name: Checkout branch
          uses: actions/checkout@v2

        - name: Clean install dependencies
          run: npm ci

        - name: Build app
          run: npm run build
        
        - name: deploy
          uses: peaceiris/actions-gh-pages@v3
          with:
           github_token: ${{ secrets.ACCESS_TOKEN }}
           publish_dir: ./dist

There is no need to write custom deployment script and travis configuration file to automate the CI/CD process. Github does it for you when latest changes are pushed to master to start the build process and copy the contents of output folder to gh-pages branch.

References:

Add code coverage in Jest in Vue project

Reading Time: < 1 minutes

 177 total views

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",
  "!src/App.vue"
 ],
 "coverageDirectory": "coverage/",
 "coverageReporters": [
   "lcov"
 ]

Set collectionCoverage to true to enable code coverage.
coverageDirectory indicates code coverage outputs are generated in coverage/ directory.

"collectCoverageFrom": [
  "src/**/*.vue",
  "!src/App.vue"
 ]

Collect code coverage data from all Vue components except src/App.vue

"coverageReporters": [
   "lcov"
 ]

Use lcov code coverage reporter. Default value is [“json”, “lcov”, “text”] array and any istanbul reporter is accepted.

4) Run all unit tests and gather code coverage data automatically. 

npm run test:unit

5) Install http-server and use local development server to serve code coverage files in browser

with npm
npm install http-server --save-dev o

with yarn 
yarn add http-server -D

6) Add npm script command to start http server with base directory coverage/

"scripts": {
 "serve:coverage": "http-server coverage/lcov-report -p 8888",
}

Type the following command in the terminal

yarn serve:coverage

and navigate to http://localhost:8888/

Reference:
https://jestjs.io/docs/en/configuration#collectcoverage-boolean

Import bootstrap-sass in vuejs

Reading Time: < 1 minutes

 130 total views

1) yarn add bootstrap bootstrap-sass node-sass sass-loader 

yarn add boostrap bootstrap-sass node-sass sass-loader

2) Set $icon-font-path to find font files and import variable.scss and _bootstrap.scss

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/variables";
@import "~bootstrap-sass/assets/stylesheets/_bootstrap.scss";

3) In main.js, require(‘./assets/sass/main.scss’);
4) type yarn serve to launch application in development mode. Index page should open at url http://localhost:8080.

yarn serve

https://github.com/vuejs-templates/webpack/issues/166

// add any variables you want to override here
// ———
// BOOTSTRAP
// ———
$icon-font-path: ‘~bootstrap-sass/assets/fonts/bootstrap/’;
@import ‘~bootstrap-sass/assets/stylesheets/bootstrap’;