VueJS boilerplate app

Features

• Vuex state management
• Vue router
• Unit tests with jest
• Integration tests (store tests) with jest
• Google OpenID authentication
• Vue18n added
• Mockable content
• Axios http client with mocks for test and dev
• Vuetify added
• Prerender plugin added
• Prettier format
• CI/CD

Requirements

• node
• npm
• git
• docker

Setup checklist

1. Setup app for local npm start

• rename app folder
• install dependencies
• rename project in package.json (+author, description)
• create content

mv tb-vue-boilerplate frontend
cd frontend
npm i
npm run cgen
npm run serve

-> App is ready to run locally

2. Setup git

• Setup an account at github
• (Shell github login is required)
• remove current .git folder
• git add, commit, create repo, push...

-> code is versioned locally and remote

3. Setup dev env - out-of-the-box working

• Run code format
• Run existing unit tests
• Run existing e2e tests
• Run demo

npm run format
npm run format-check
npm run test:unit
npm run test:integration
npm run demo

4. Setup dev env - sonar config

• Setup an account at sonarcloud
• Connect to your github account
• Add your project from github: [+] -> Analyze new project -> Github app configuration -> Sonarcloud [Configure] -> Select repositories -> Save
• Edit @/CI/sonar/config.json
• sonar.organization is your username
• sonar.projectKey is user_github-project-name
• sonar.login: [Avatar] -> My account -> Security -> Generate
• gitignore if needed (and use private sonar as well, if sensitive)

npm sonar-check

# and all quality checks together
npm run ci

5. Setup githook

• create githook for before push - .git/hooks folder
• delete the file extension for pre-push.sample (".sample")
• in the pre-push file (only this, delete what is currently there):

#!/bin/sh
npm run ci

-> Before all remote save the quality of the code is checked

6. Setup docker

• Setup an account at dockerhub
• (Shell docker login is required)
• Edit @/CD/config.json
• user is your dockerhub username
• repo is the name of the project (whatever you choose)
• tag is latest by default, automated versioning the images is not implemented here

npm run cd

-> Releases are kept as images on docker hub

7. Setup host - sloppy.io

• Setup an account at sloppy.io
• Create a project, name it, name the service, and add to app
• Then with [Add app], select the image, set url...

-> App is on the internet

8. Setup openID connect with google

• Select project -> New project
• Oauth consent screen -> external
• Application name, authorized domains (.sloppy.zone)
• Credentials -[+ Create credentials] (Oauth2) -> Web app, set name & redirect uri (localhost or authorized domain) -> client_ID & client_secret
• update client_ID, client_secret and redirect_uri (can be anything for now) in google.json
• Full guide(https://developers.google.com/identity/protocols/OpenIDConnect)

__-> OpenID works on the frontend