https://github.com/akoidan/vue-webpack-typescript
Project starter for Vue Typescript and Webpack
https://github.com/akoidan/vue-webpack-typescript
Last synced: 17 days ago
JSON representation
Project starter for Vue Typescript and Webpack
- Host: GitHub
- URL: https://github.com/akoidan/vue-webpack-typescript
- Owner: akoidan
- License: mit
- Created: 2018-06-09T22:37:39.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-02-16T00:14:42.000Z (about 2 years ago)
- Last Synced: 2025-04-12T00:42:22.910Z (17 days ago)
- Language: TypeScript
- Homepage:
- Size: 1.39 MB
- Stars: 22
- Watchers: 3
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](http://hits.dwyl.io/akoidan/vue-webpack-typescript) [](https://travis-ci.org/akoidan/vue-webpack-typescript) [](https://codecov.io/gh/akoidan/vue-webpack-typescript) [](https://github.com/akoidan/vue-webpack-typescript/actions)
# Vue3
Please use [vue3-vite-vue-class-component](https://github.com/akoidan/vue3-vite-vue-class-component) for vue3 vite setup.
# Vue-webpack-typescript project starter
This project is generated via [vue-webpack-minimal](https://github.com/akoidan/vue-webpack-typescript) and features:
- Base example of CRUD pages with written api classes, tests and predefined [vue.pychat.org](https://vue.pychat.org)
- Typescript loading with babel with typechecking in a parallel thread. Everything (vuex, cypress, vue-data) is type safe!
- Vue with vuetify, vuex, router, sass, vuex-module-decorators, vue-property-decorator support typescript
- Cypress with code-coverage support, unit test support, screenshot assert and typescript support.
- Lint: a compilation of very strict lint rules for everything: vue, styles (sass), typescript that don't conflict with each other.
## Get started
### Install dependencies:
- `yarn install --frozen-lockfile`. You can fall back to `npm` if you still use it.
- [OPTIONAL] If compilation above crashes on binaries, do `nvm use`. In total you need [yarn](https://classic.yarnpkg.com/en/docs/install/) and [nvm](https://github.com/nvm-sh/nvm)
### Run development server
This runs the development server w/o a linter on.
```bash
yarn start
```
### Tests
There're multiple things you can do with test:
- Build into static files and run headless cypress against it
- Run development server and run headfull cypress against it
- Check coverage and generate reports for test
#### Headless cypress upon static server
The command bellow builds static files with coverage babel plugin information, creates a http server and runs cypress (e2e) tests located in the [integrationFolder](cypress/integration) against that server in headless mode.
```bash
yarn test
```
You can check reports in `nyc` directory, including coverage information.
#### Headful cypress upon webpack-dev-server
This command is useful during development. You can click and inspect in live mode in cypress, and just develop while your tests are being ran automatically on file save. I usually have cypress test on one display, IDE on another one, and browser on 3rd one. So I instantly see which changes my code introduces.
1. Start dev-server in test mode. `yarn start` won't work, cause of missing coverage info and some other polyfills and tweaks required.
```bash
yarn start:test
```
2. Open cypress in debug mode. This mode means you can inspect the cypress UI directly in the browser and your test could automatically run upon file save.
```bash
yarn run test:cypress:debug
```
### Lint
To check the styleguide use:
```bash
yarn lint
```
### Build for productions to static files:
```bash
yarn run build:prod
```
## Configurations
### Environment variables
- `APP_TEST` - `true`/`false`, adds required code for testing to output files when set to True (istanbul coverage, XHR polyfill for cypress)
- `APP_API_URL` - url e.g. `https://jsonplaceholder.typicode.com`, public http API url
- `APP_PUBLIC_PATH` - string, e.g. `https://s3.amazonaws.com/`, url for images/js/css/fonts instead of relative path like './main.js. Can be used if you're using CDN that's on a different domain than `index.html`
- `APP_VERSION` - string, e.g. `build-v378`, some unique string which identifies your souce code. I usually pass git version or git tag to this variable in Continuous Integration.
- `APP_FILE_MODE` - `true`/`false`, sets whether static files should be built for file mode (dragging index.html to browser) or not. By setting to true, this turns off [history mode](https://router.vuejs.org/guide/essentials/history-mode.html#html5-history-mode) in browser and removes crossOriginLoading links.
### Configuration files
- Every vue component has injected `.$logger` object, to log something to console use `this.logger.log('Hello {}', {1:'world'})();` Note calling function again in the end. Logger is disabled for production. For more info visit [lines-logger](https://github.com/akoidan/lines-logger)
- Every component has injected `$.api` object. You should do http calls with `$this.$api`. If you prefer redux style you can call http in vuex actions.
- If you're using git as your version control tool `window.APP_VERSION` will be exported to global scope.
- [.nycrc.json](.nycrc.json) is a [configuration](https://github.com/istanbuljs/nyc#configuration-files) for istanbul code coverage. It can customize reports formats, coverage percentage and other build related things.
- [.stylelintrc](.stylelintrc) is a [configuration](https://stylelint.io/user-guide/rules) for css linting
- [.drone.yml](.drone.yml) is a [configuration](https://docker-runner.docs.drone.io/configuration/overview/) file for Drone CI.
- [.github/workflows/main.yml](.github/workflows/main.yml) is a [configuration](https://docs.github.com/en/free-pro-team@latest/actions/quickstart) file for Github Actions.
- [.eslintrc.json](.eslintrc.json) is a [configuration](https://eslint.org/docs/user-guide/configuring) for ts linting
- [.mocharc.json](.mocharc.json) is a [configuration](https://mochajs.org/#configuring-mocha-nodejs) for testing library mocha (deprecated mocha.opts)
- [cypress.json](cypress.json) is a [configuration](https://docs.cypress.io/guides/references/configuration.html#Global) for cypress e2e testing
- [package.json](package.json) is a [configuration](https://docs.npmjs.com/files/package.json) for yarn (npm), since it doesn't have versions of sublibs they are stored in [yarn.lock](yarn.lock)
- [tsconfig.json](tsconfig.json) is a [configuration](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) for typescript. While this files is used to build static files for FE, [cypress/tsconfig](cypress/tsconfig.json) is used to build files that would run test in cypress.
- [webpack](build) is a directory with webpack [configurations](https://webpack.js.org/configuration/)
- [mocha.opts](test/mocha.opts) is a [configuration](https://mochajs.org/api/mocha) for unit test (mocha).
### WebStorm IDE
#### Indentation
Set indentation to `2` `2` `4`for html, sass, js, ts in settings -> editor -> code style
#### Set template
1. New
1. Edit files templates...
1. Vue single file component
```vue
#[[$END$]]#
import {Component, Prop, Vue, Watch, Ref} from "vue-property-decorator";
@Component
export default class ${COMPONENT_NAME} extends Vue {
}
```
#### Disable tslint
Tslint is not used for files, since it's deprecated. Use eslint instead and disable tslint
1. Settings
1. Typescript
1. Tslint
1. Disable tslint
#### Disable inspections [Optional]
To avoid mixing warnings from eslint and jetbrains, you can turn them off by default
1. project preferences
1. editor
1. inspection
1. javascript
1. turn off everything, but leave: Code quality tools -> eslint
#### Max line length
1. Editor
1. Code style
1. Hard wrap at 120
#### Exclude directories from indexing
Mark `nyc` and `dist` directories ex excluded. Mouse 2 on the directory in the project explorer tree -> mark directory as -> excluded
## Style guide and how to
### Code samples with libs it belongs to
#### [typescript](http://www.typescriptlang.org/docs/home.html)
Typescript (or ts shortly) allows to write typesafe code:
```typescript
const a: number = 3;
```
- To get started with ts I would recommend watching [this](https://www.youtube.com/watch?v=ahCwqrYpIuM) 10 minute video
- To get started with decorators I recommend [this video](https://www.youtube.com/watch?v=O6A-u_FoEX8)
- For advanced learning I recommend checking [what's new](https://www.typescriptlang.org/docs/handbook/release-notes/overview.html) in every version of typescript. You may find a lot of interesting things.
#### [vue](https://vuejs.org/v2/guide/)
Vue allows to write [SFC](https://vuejs.org/v2/guide/single-file-components.html) that would generate html to the page. Vue is only responsible for UI layer, this is not an MVC framework. The only thing that it does is creates `
{
it('should print', () => {
console.log('Hello world')
})
})
```
#### [chai](https://www.chaijs.com/api/bdd/) and [chai-as-promised](https://www.chaijs.com/plugins/chai-as-promised/)
Those are assertion libraries that adds bdd assertions:
```javascript
expect([1, 2]).to.be.an('array').that.does.not.include(3);
```
#### [sinon](https://sinonjs.org/releases/v7.5.0/)
This is mocking library that allows you to write:
```javascript
const myAPI = { method: function () {} };
const spy = sinon.spy();
const mock = sinon.mock(myAPI);
mock.expects("method").once().throws();
```
#### [sinon-chai](https://github.com/domenic/sinon-chai)
To to write tests in BDD-like:
```javascript
expect(mySpy).to.have.been.calledWith("foo");
```
#### [lines-logger](https://github.com/akoidan/lines-logger)
This wrapper provides a single interface to console.log and displays the origin source file location:
```typescript
logger.log('Hello world')(); // pay attention to () in the end.
```
#### [cypress](https://docs.cypress.io/guides/getting-started/writing-your-first-test.html#Add-a-test-file)
A testing framework that allows running test-cases directly in chrome (alternative to Selenium, that runs it on server) That part you've already seen on mocha above can be appended with cypress assertions and helpers:
```typescript
it("should contain 5 elements", (): void => {
cy.get("[data-cy=filtered-users-container]").children().should("have.length", 1);
});
```
### Build process libraries
- [webpack](https://webpack.js.org/) allows to combine (bundle) multiple input javascript files into a single output file. Provides plugins and loaders api that allows transformation like typescript or sass. All configs are located under [webpack](build) directory, take a look at it to understand how source files are being processed. Its start point is `entry: ['./src/user.ts']`. Since webpack can only handle `.js` files, to let webpack know about everything else we should pass the code through a corresponding loader. Everything is imported in this files are being processed by section `loaders`.
- node-sass allows to compile sass into css, it doesn't know anything about webpack and loaders
- node-sass-utils - allow to access json via css, thus sharing variables across js and css
- hard-source-webpack-plugin (increases dev server speed compilation by caching)
- optimize-css-assets-webpack-plugin (minimizes css)
- clean-webpack-plugin (deletes the dist before build)
- compression-webpack-plugin (generates .tar.gz files in dist directories)
- mini-css-extract-plugin (gets all css files from .vue components and creates a single .css file in production build)
- [webpack-subresource-integrity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) ( generates integrity attribute on scripts tag)
- stylelint-webpack-plugin (during webpack build find all the css and lints it via stylelint)
- speed-measure-webpack-plugin shows information about compilation speed. Helps to find out why compilation goes slow.
- html-webpack-plugin ( compiles html from index.ejs)
- webpack-dev-server is used for development purposes with hot reloading, every time you save the file it will automatically apply. This doesn't affect node running files, only watching files. So files like webpack/base.config.js. To build project for production set `APP_PUBLIC_PATH` and run `yarn run buiild:prod`. This generates static files in `./dist` directory.
- webpack-cli allows to run webpack from the command line
- Loaders: sass-loader (pipes sass into css), css-loader - resolves import css files inside js modules, ' vue-loader (resolves vue sfc), vue-template-compiler (compiles run
- @types/XXX are types declaration for 3rd party libraries. Ts only knows about specific types like dom and etc. Everything custom should be installed separately.
- babel - global loader and transpiler that allows ts compilation into es and allowing additional babel plugins for use. [here's why you need babel with ts](https://iamturns.com/typescript-babel/)
### Test libraries
- ts-loader - load test with typescript
- start-server-and-test - allows to simultaneously start 2 processes during testing: cypress and frotnend
- servor allows to serve static files for cypress test.
- [istanbul](https://istanbul.js.org/) - code coverage with cli interface, generates html cov report
- [nyc](https://github.com/istanbuljs/nyc) - cli interface to istanbul
- @cypress/code-coverage - allows to add istanbul coverage to cypress
- @cypress/webpack-preprocessor allows to transpile cypress test via typescript
- @istanbuljs/nyc-config-typescript - allows to coverage .ts files during test
- @testing-library/cypress - adds cypress test
- istanbul-lib-coverage the source code that allow direct cypress coverage integration - alpha version fixes mocha ts-node cannot read start
### Lint libraries
- @typescript-eslint/eslint-plugin": "2.7.1-alpha.17", -
- [eslint](https://eslint.org/) javascript set of linting rules.
- eslint-loader - allows webpack to pass js via eslint
- [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue) lints your `