Frontend Vue (fe-vue)

Vue quickstarter project

For pull requests and discussion regarding direction, please pull in @akhilsoman, @m-apsolon

Purpose of this quickstarter

This quickstarter booststrap a Vue.js application with TypeScript support. It contains the basic setup for Docker, Jenkins, SonarQube and OpenShift.

What files / architecture is generated?

The boilerplate files are generated using the Vue CLI 3.4.0 Class based component defintion is follwed for this application with TypeScript Support. The generated file structure as follows,

.
├── Jenkinsfile - Contains Jenkins build configuration
├── README.md
├── babel.config.js
├── cypress.json
├── docker - Contains Dockerfile for the build
│   ├── Dockerfile
│   └── nginx.vh.default.conf.nginx
├── package-lock.json - Default package version lock.  Commit this file as well when you update your dependencies
├── package.json - This file contains all the npm dependencies and build commands for the project.
├── public - Static assets for the project
│   ├── favicon.ico
│   ├── img
│   │   └── icons
│   │       ├── android-chrome-192x192.png
│   │       ├── android-chrome-512x512.png
│   │       ├── apple-touch-icon-120x120.png
│   │       ├── apple-touch-icon-152x152.png
│   │       ├── apple-touch-icon-180x180.png
│   │       ├── apple-touch-icon-60x60.png
│   │       ├── apple-touch-icon-76x76.png
│   │       ├── apple-touch-icon.png
│   │       ├── favicon-16x16.png
│   │       ├── favicon-32x32.png
│   │       ├── msapplication-icon-144x144.png
│   │       ├── mstile-150x150.png
│   │       └── safari-pinned-tab.svg
│   ├── index.html
│   ├── manifest.json
│   └── robots.txt
├── sonar-project.properties
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue - Vue components are added here
│   ├── main.ts - Entrypoint, This runs first
│   ├── registerServiceWorker.ts
│   ├── router.ts - Router configurations
│   ├── shims-tsx.d.ts - The  file helps your IDE to understand .tsx
│   ├── shims-vue.d.ts The file helps your IDE to understand what a file ending in .vue is
│   └── views
│       ├── About.vue
│       └── Home.vue
├── tests - Unit Test as well as ene to end test files
│   ├── e2e
│   │   ├── plugins
│   │   │   └── index.js
│   │   ├── specs
│   │   │   └── test.js
│   │   └── support
│   │       ├── commands.js
│   │       └── index.js
│   └── unit
│       └── example.spec.ts
├── .gitignore
└── tsconfig.json -  TypeScript Configuration file



14 directories, 44 files

Frameworks used

  1. Vue (2.6,6)

  2. Mocha & Chai for Unit Testing

  3. Typescript

Usage - how do you start after you provisioned this quickstarter

  1. Install the dependencies

    npm install
  2. Compiles and hot-reloads for development

    npm run serve
  3. Run your tests

    npm run build

How this quickstarter is built through jenkins

The Jenkinsfile is provisioned with this quick starter to ease CI/CD process. In Jenkinsfile, there are various stages

  • stageBuild - Builds the application by running npm run install, npm run build command and copies output folder dist into docker/dist folder.

  • stageUnitTest - Runs unit test cases by executing command npm run test.

  • stageLint - Runs vue-cli-service lint profiler by running command npm run lint.

Builder Slave used

This quickstarter uses Nodejs8-Angular builder slave Jenkins builder slave.

Known limitations

The quickstarter is generated by copying the files genreated by Vue CLI. Once the CLI start supported template genration with out dependency installation (similar to --skip-insatll in Angular CLI) this can be modfied to CLI based generation.