The Grabarz & Partner Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites with vuejs. .
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.
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
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
- 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
npm run dev
npm run static
npm run production
http://localhost:8050
- 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
- jpg
- 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
- semantic release
- continous integration
- appveyor
- vulnerability scanner
- snyk
- greenkeeper
- IDE
- vscode workspace configuration
- recommended project extensions
- custom project settings
- disabled prettier config
- file association map
- vscode workspace configuration
- testing
- cypress
- components
- load components lazy (vue-lazy-hydration)
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
- Build
- launch
- GOOD LUCK.