vue-app-example

PoC app to test Vue.js framework

How to dev

Use docker-compose to boot up dockerized environment for development:

docker-compose up

# or with Yarn
yarn start

To resolve all project dependencies use docker-wrapped command from Makefile.

make deps

# or with Yarn
yarn install

To build both client and server bundles use docker-wrapped command from Makefile:

make build

# or specify concrete target
make build target=client
make build target=server

# or produce production-ready bundles with minified assets
make build env=production

# or with Yarn
yarn build:client
yarn build:server
yarn build:all
yarn build:all --production

To lint TypeScript/JavaScript sources you should use docker-wrapped command from Makefile:

make lint

# or with Yarn
yarn lint

To run tests or generate project documentation use docker-wrapped commands from Makefile:

make test
make docs

# or concrete tests
make test.unit
make test.e2e start-app=yes
make test.docker

# or with Yarn
yarn test:unit
yarn test:e2e
yarn test
yarn docs

To make docker image (from project distribution) use docker-wrapped commands from Makefile:

make dist && make docker.image

To open http://vue-app-example.localhost application in browser add lines to your hosts file:

127.0.0.1	vue-app-example.localhost
127.0.0.1	api.vue-app-example.localhost

To test Server-Side Rendering, you can emulate search bot request:

curl --header "User-Agent: Googlebot" http://vue-app-example.localhost/

or directly do request to Express server:

curl http://vue-app-example.localhost:8080/

Notable moments

• If you change project files layout, make sure that project builds as expected via make build and project distribution is formed correctly via make dist.
• All project dependencies should be declared with Yarn. In other words, using NPM or Bower is not allowed.
• All project TypeScript and JavaScript sources must be written accordingly with ECMAScript 2016 language specifications. You can easily configure WebStorm to support it by following this guide.
• If you don't use docker-wrapped commands, make sure that tools you use have the same version as in docker-wrapped commands. It's latest version, mainly.

Useful Resources for Beginners

• Core documentation: Vue, vue-router, Vuex
• Vue components style guide
• Vue + TS: vue-class-component, vue-property-decorator, vuex-class
• TypeScript modules: http://www.typescriptlang.org/docs/handbook/modules.html
• Yarn: https://yarnpkg.com/en/docs/usage
• Pug: https://pugjs.org/language/attributes.html
• Chai BDD: http://chaijs.com/api/bdd/
• VeeValidate plugin: http://vee-validate.logaretm.com/
• vue-i18n plugin: https://kazupon.github.io/vue-i18n/en/
• All Vue plugins catalog: https://github.com/vuejs/awesome-vue
• Vue dev tools Chrome extension: https://github.com/vuejs/vue-devtools

TODO

• Stylus (#2)
• Pug (#3)
• Improve SSR by new guidelines from https://ssr.vuejs.org/en/ (#4)
• ESLint for .js files and improve TSLint settings (#5)
• Improve TypeScript typings (#6)
• Change npm to Yarn, remove Bower (#7)
• Docker + Makefile + Travis CI (#8)
• Improve E2E specs (#9)
• Fix eslint hanging with v4.0 (#10)
• Test remove json-server from hosts (#11)

Future Roadmap

• GraphQL (#12)
• vue-kindergarten
• av-ts: https://herringtondarkholme.github.io/2016/10/03/vue2-ts2/
• https://github.com/rowanwins/vue-dropzone
• Keep an eye on Nuxt.js and HackerNews app
• Mobile:
  • https://habrahabr.ru/post/327494/
  • https://github.com/quasarframework/quasar
  • https://github.com/nolimits4web/Framework7
  • https://github.com/weexteam/weex-vue-framework

Known Issues

• Rolling back HMR updates (temporarily postponed)