gp vue boilerplate

Grabarz & Partner Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites with vuejs.

share me:

Grabarz & Partner - Boilerplate

GitHub package version
license
GitHub contributors
Renovate

dependencies Status
devDependencies Status
Known Vulnerabilities

Codacy Badge

Windows Build Status

Description

The Grabarz & Partner Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites with vuejs.
.

Demo

Sandbox

Edit gp-vue-boilerplate master

Reports


Quickstart

IDE

It is recommended to use VSCode Editor. https://code.visualstudio.com/

Open the workspace by config.code-workspace and the recommended extensions, to use the boilerplate, can be installed by a notification.

OSX - install

nvm install 12.1.0

git clone https://github.com/GrabarzUndPartner/gp-vue-boilerplate.git
cd gp-vue-boilerplate

npm i snyk -g
snyk auth

npm i

Linux - install

sudo apt-get install libjpeg-dev libpng-dev libgif-dev libgtk2.0-0 libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2

nvm install 12.1.0

git clone https://github.com/GrabarzUndPartner/gp-vue-boilerplate.git
cd gp-vue-boilerplate

npm i snyk -g
snyk auth

npm i

Windows - install

git clone -b msvc --recursive https://github.com/kornelski/pngquant.git
cd pngquant

cargo clean
set PNG_STATIC=1
cargo build --release

cd ..
git clone https://github.com/GrabarzUndPartner/gp-vue-boilerplate.git
cd gp-vue-boilerplate

nvm on
nvm install 12.1.0 64
nvm use 12.1.0
npm i snyk -g
# re-run command prompt as administrator
snyk auth
npm i

Run boilerplate in dev-mode

npm run dev

Run boilerplate production-build

npm run static

Run boilerplate production-build + server

npm run production

Open Page

http://localhost:8050

Features

  • browserslist support
    • [x] > 1% in DE
    • [x] Firefox ESR
    • [x] IE 11
  • images
    • jpg
      • [x] optimization
    • png
      • [x] optimization
    • webp
      • [x] generator (created by original source -> jpg, png)
      • [x] optimization
    • svg
      • [x] sprite generator
      • [x] optimization
  • breakpoint
    • [x] global definition
    • [x] accessible in js
    • [x] accessible in postcss
  • i18n
    • [x] global language files
    • [x] page files by language
    • [x] vue block support
      • [x] exclusive language reference loader “.lang”
  • PWA
    • [x] module embedded - configurable by nuxt.config.js
  • SEO
    • [x] sitemap generator
    • [x] robots.txt generator
  • babel
    • [x] embedded browserslist support
  • postcss
    • [x] embedded browserslist support
    • plugins
      • [x] postcss-preset-env
      • [x] postcss-normalize
      • [x] postcss-url
      • [x] postcss-object-fit-images
      • [x] @fullhuman/postcss-purgecss
      • [x] postcss-momentum-scrolling
      • [x] postcss-pseudo-content-insert
      • [x] rucksack-css
  • licenses
    • [x] license extraction from build
  • linter
    • [x] eslint
    • [x] stylelint
    • [x] branchlint
    • [x] commitlint
  • versioning
    • [x] semantic release
      • [x] git release version
      • [x] npm release version
    • [x] changelog generator
  • continous integration
    • [ ] appveyor
  • vulnerability scanner
    • [x] snyk
    • [x] greenkeeper
  • IDE
    • vscode workspace configuration
      • [x] recommended project extensions
      • [x] custom project settings
      • [x] disabled prettier config
      • [x] file association map
  • testing
    • [ ] cypress
  • [x] components
    • [x] load components lazy (vue-lazy-hydration)

ToDo


Checklist

All processes are working automatically. Nevertheless you should check before going live if all processes work correctly and the output is correct.

  • project start
    • [ ] browser matrix (IE11 support?)
    • [ ] multilanguage (i18n)
    • [ ] tracking concept
    • [ ] webfonts
  • prepare launch
    • NO launch on friday
    • deployment
      • [ ] setup pipeline
      • [ ] embed SonarQube
      • [ ] test pipeline
    • url/domain
      • [ ] configured
      • [ ] current ssl certificate
  • before launch
    • Build
      • [ ] deployment pipeline
      • [ ] no build errors
    • Content
      • [ ] favicon
      • [ ] multilanguage
      • [ ] complete
      • [ ] no lorem ipsum
      • [ ] disclaimer
      • [ ] terms of use
      • [ ] cookie notification
      • [ ] contact
      • [ ] 404-page
      • [ ] 500-page
    • Form validation
      • [ ] prevent XSS (escape strings)
      • [ ] input validation is configured
    • Server
      • [ ] language detection
      • [ ] encrypted keys & secrets as environment variables
      • [ ] prevent XSS by user inputs (escape strings)
    • Device testing
      • [ ] based on browser matrix
      • [ ] on actual devices, not simulations
      • [ ] in incognito mode
      • [ ] activated adblocker
    • SEO
      • [ ] page title
      • [ ] meta tags
      • [ ] social meta tags
      • [ ] added alt-texts to all images and links
      • [ ] sitemap.xml
      • [ ] robots.txt
      • [ ] disabled noindex, nofollow on normal pages
      • [ ] enabled noindex, nofollow on auth area pages
    • Lighthouse
      • [ ] a11y
      • [ ] image optimization
      • [ ] svg optimization
      • [ ] PWA support
      • [ ] cache durations on server
      • [ ] time to first byte (TTFB)
      • [ ] first meaningful paint (FMP)
    • Security
      • [ ] npm audit
      • [ ] no keys & secrets embedded in frontend code
      • [ ] different keys & secrets for test/prod environment
      • [ ] valid ssl certificate
    • Performance
      • [ ] google chrome performance measurement (60fps)
      • [ ] check js size
      • [ ] check css size
      • [ ] removed unused sources
    • Tracking
      • [ ] embedded
      • [ ] different project ids for test/prod environment
    • Licenses
      • [ ] check licences of used packages
      • [ ] send license list to the security department of your client (optional)
    • Documentation
      • [ ] technical concept
      • [ ] git changelog with reference to ticket numbers (if applicable)
      • [ ] deployment pipeline
  • launch
    • GOOD LUCK.