share me:

Grabarz & Partner - Boilerplate

Description

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

Demo

• website
• source code

Sandbox

Reports

• webpack client
• webpack modern
• webpack server
• packtracker modern

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

• install nvm https://medium.com/@isaacjoe/best-way-to-install-and-use-nvm-on-mac-e3a3f6bc494d

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

• install nvm https://github.com/nvm-sh/nvm#install--update-script

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

• install nvm https://github.com/coreybutler/nvm/releases
• install git client https://git-scm.com/download/win
• install Visual C++ 2015 Build Tools https://go.microsoft.com/fwlink/?LinkId=615460
• install Rust https://static.rust-lang.org/dist/rust-beta-x86_64-pc-windows-gnu.msi
• restart Windows
• run command prompt as administrator

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