GitVub

GitHub + Vue.js = GitVub

A Vue.js Progressive Web App (PWA) based on GitHub API.

icon on desktop, splash screen and screen shot taken from this application

A demo is available here: https://gitvub.azurewebsites.net.

What's inside?

• Vue.js: an awesome JS Framework
• Vuex: A state management library for VueJs
• vue-router: a routing library
• Axios: a well known library for XMLHttpRequests
• Facebook/Jest: a test library
• Material Design Lite: CSS Framework
• Material Icons: a set of icons
• Workbox (v3): JavaScript libraries for Progressive Web Apps (PWA)

... using the GitHub Api (doc).

Based on vue-cli 3 and follow his file structure/conventions.

Notes

• Code style follow:
  • StandarJS
  • VueJS reccomended rules (thanks to eslint-plugin-vue)
• API tests use dynamic import (Stage 3)

Testing service workers

$ npm install -g serve
$ npm run build && serve dist

Working with HTTPS

# first install ngrok (https://ngrok.com/)
$ npm install -g ngrok

# Terminal 1: (will run app on port 8080)
$ npm run dev

# Then on a 2nd terminal:
$ ngrok http 8080

ngrok by @inconshreveable                                                                                                                                                                                                   (Ctrl+C to quit)

Session Status                online
Version                       2.2.8
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://ada5c26b.ngrok.io -> localhost:8080
Forwarding                    https://ada5c26b.ngrok.io -> localhost:8080

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

You can now work with the HTTPS url given (in the example above: https://ada5c26b.ngrok.io)

Commands

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run serve

# build for production with minification
npm run build

# Run tests
npm test

# Run tests + generate coverage (available under /tests/unit/coverage)
npm test -- --coverage

# Run tests in watch node
npm test -- --watchAll

# Run tests + update snapshots if needed
npm test -- -u

For a detailed explanation on how things work, check out the guide and docs for vue-loader.