Grabarz & Partner Boilerplate is a professional front-end template with vuejs

Grabarz & Partner Boilerplate is a professional front-end template with vuejs

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

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

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
  • 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
      • living styleguide (storybook)
      • git changelog with reference to ticket numbers (if applicable)
      • deployment pipeline
  • launch
    • GOOD LUCK.

Download Details:

Author: GrabarzUndPartner

Live Demo: https://grabarzundpartner.de/

GitHub: https://github.com/GrabarzUndPartner/gp-vue-boilerplate

vuejs vue javascript vue-js

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.

A Vue.js wrapper component for Grid.js

A Vue wrapper component for Grid.js. Grid.js is a Free and open-source HTML table plugin written in TypeScript. It works with most JavaScript frameworks.

Vue.js image clipping Components using Vue-Rx

vuejs-clipper .Vue.js image clipping components using Vue-Rx. Add image clipping components to your Vue application in nothing flat. Touch devices supported and fully responsive.

Vue.js JWT Authentication with Vuex and Vue Router

Build a Vue.js JWT Authentication application using Vuex, Vue Router, VeeValidate - JWT authentication with Vue, Vuex, Vue Router that supports VeeValidate

Vue.js JWT Authentication with Vuex and Vue Router

Vue Vuex JWT Auth .Vue.js JWT Authentication with Vuex and Vue Router