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

Sandbox

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

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

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.

superstar1205/boliler-Vue