Skip to content
Grabarz & Partner Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites with vuejs.
JavaScript Vue HTML
Branch: master
Clone or download
StephanGerbeth Merge pull request #188 from GrabarzUndPartner/greenkeeper/monorepo.s…
…torybook-20190813020653

Greenkeeper/monorepo.storybook 20190813020653
Latest commit 2df47b9 Aug 13, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.cypress fix(cypress): generalize first test Feb 4, 2019
.github fix(pull_request_template): changed project name Aug 6, 2019
.storybook
env fix(express): start static server Jun 30, 2019
src Update index.vue [skip ci] Jul 7, 2019
stories fix(eslint): added plugins & fixed code Jul 6, 2019
.appveyor.yml fix(appveyor): corrected snyk auth command Jun 26, 2019
.branchlintrc feat(branch-name-lint): added branch-name-lint and config Aug 18, 2018
.browserslistrc fix(test): selenium test removed, cypress test added Feb 3, 2019
.commitlintrc.json feat(semantic-release): removed standard-version Aug 15, 2018
.editorconfig
.eslintignore fix(cleanup): added files and extensions Jun 23, 2018
.eslintrc fix(codacy): cleaned eslint config Jul 7, 2019
.eslintrc.js fix(init): init project Mar 12, 2018
.gitattributes fix(init): init project Mar 12, 2018
.gitignore fix(travis): rearranged build flow Jun 30, 2019
.huskyrc fix(husky): updated version Oct 24, 2018
.npmignore fix(cleanup): added files and extensions Jun 23, 2018
.npmrc fix(versioning): added npmrc config + removed valid commit msg Aug 15, 2018
.nvmrc fix(package): update node version and added yarn lock Jul 7, 2019
.releaserc fix(release): update version number in package.json Aug 15, 2018
.snyk fix: .snyk, package.json & package-lock.json to reduce vulnerabilities Jul 6, 2019
.stylelintignore fix(stylelint): ignore js at validation Jun 24, 2018
.stylelintrc fix(test): selenium test removed, cypress test added Feb 3, 2019
.svgorc.yml feat(virtual): images and languages Oct 23, 2018
.travis.yml fix(install): updated installation guide for linux Jul 27, 2019
CHANGELOG.md chore(release): 1.29.8 [skip ci] Aug 7, 2019
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Aug 3, 2019
CONTRIBUTING.md Update CONTRIBUTING.md Aug 3, 2019
LICENSE fix(init): init project Mar 12, 2018
README.md Update README.md Aug 12, 2019
config.code-workspace fix(vscode): cleanup extension-list in config Jun 16, 2019
cypress.json fix(cypress): refactored mochawesome config Jun 27, 2019
now.json feat(lazy-hydrate): optimized loading of components May 30, 2019
nuxt.config.js
package-lock.json chore(package): update lockfile package-lock.json Aug 13, 2019
package.json chore(package): update @storybook/vue to version 5.1.11 Aug 13, 2019
sandbox.config.json Update sandbox.config.js [skip ci] Jul 7, 2019

README.md

share me:

Grabarz & Partner - Boilerplate

GitHub package version license GitHub contributors Greenkeeper badge

dependencies Status devDependencies Status Known Vulnerabilities

Codacy Badge Cypress.io tests

OSX/Linux Build Status Windows Build Status

Storybook badge

Description

G&P Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites by vuejs.

Demo

Sandbox

Edit gp-vue-boilerplate master

Reports

Component Overview


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

Cypress

Run local test instance

npm run cypress:open

Storybook

Run storybook in dev-mode

npm run storybook:dev

Run storybook production-build

npm run storybook:prod

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
    • travis
    • appveyor
  • vulnerability scanner
    • snyk
    • greenkeeper
  • IDE
    • vscode workspace configuration
      • recommended project extensions
      • custom project settings
      • disabled prettier config
      • file association map
  • documentation
    • storybook
  • testing
    • cypress

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
      • living styleguide (storybook)
      • git changelog with reference to ticket numbers (if applicable)
      • deployment pipeline
  • launch
    • GOOD LUCK.
You can’t perform that action at this time.