Frontend Vue (fe-vue)
Vue quickstarter project
For pull requests and discussion regarding direction, please pull in @akhilsoman, @m-apsolon
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
Usage - how do you start after you provisioned this quickstarter
-
Install the dependencies
npm install
-
Compiles and hot-reloads for development
npm run serve
-
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 folderdist
intodocker/dist
folder. -
stageUnitTest - Runs unit test cases by executing command
npm run test
. -
stageLint - Runs
vue-cli-service lint
profiler by running commandnpm run lint
.
Builder Slave used
This quickstarter uses Nodejs8-Angular builder slave Jenkins builder slave.