quasar-enterprise-monorepo

Quasar Enterprise Monorepo Boilerplate - Yarn, Vue, Vuex, Vue-Router, Axios, GraphQL

Stars
5

Quasar Enterprise Monorepo Boilerplate


Monorepo Structure


Base Monorepo Structure

 applications/                               # Full Web Applications
    webapp                                  # Quasar Web Application
 clients/                                    # Web Communication Clients
    axios                                   # Axios HTTP Client Wrapper
    graphql                                 # GraphQL Client Wrapper
 packages-boilerplate-copy-and-paste/        # Boilerplate for the monorepo packages, Applications, services, adapters, components
    quasar-app-extension-ui-component       # New Quasar UI Extension or App Extension
    quasar-webapp                           # New Web Application With TS
    service-plugin                          # New Service/Adapter/Plugin Example
    vue-ts-component-plugin                 # New Vue Web Component With TS
    vue-ts-component-quasar                 # New Vue Web Component With TS and Quasar
 packages/                                   # Common Packages used on the monorepo
    eslint                                  # Base eslint rules
    eslint-import                           # Import-plugin eslint rules
    eslint-typescript                       # Typescript eslint rules
    eslint-vue                              # Vue eslint rules
    eslint-vue-i18n                         # Vue-i18n eslint rulesents
    quasar-testing                          # Quasar Testing Mocks and Factories
 utils/                                      # Utils and tools for packages and applications
    text-utils                              # Text Utils for Applications
    vue-router-utils                        # Vue-Router-Utils for Vue-Router Vue Plugin
    vuelidate-utils                         # Vuelidate Utils for Vuelidate Vue plugin
    vuex-utils                              # Vuex Utils for Vuex Vue plugin
 vuex-common-stores/                         # Common Vuex Stores used on applications and components
    base-store                              # TS Decorators for Vue

Required

Global lerna installation

$ npm install -g lerna

Global yarn installation

$ npm install -g yarn

Usage

Root Commands

Use this commands on the root of the repository

# Install dependencies
$ yarn
# Link local packages together and install remaining package dependencies.
$ yarn bootstrap
# Runs commands in a scope
# $ yarn exec:in [scope] [command]
# Example
$ yarn exec:in @quasar-enterprise-monorepo/webapp serve
# Runs [majestic](https://github.com/Raathigesh/majestic) GUI
$ yarn test:unit:ui
# Runs Lint in every package.
$ yarn lint
# Runs Lint in every package and applies possibles fixes.
$ yarn lint:fix
# Check for updates on your packages.
$ yarn update:check
# WARNING THIS WILL UPDATE TO LATEST! EVEN MAJOR RELEASE!
# Check for updates on your packages and install the latest.
$ yarn update:update
# Commit your changes using [commitizen](https://github.com/commitizen/cz-cli).
$ git-cz

Releasing

# Bump version of packages changed since the last release and generate changelog.
$ yarn new-version

Lerna

# Clean the node_modules on the packages.
$ lerna clean
# Show which packages have changed.
$ lerna changed
# Show specifically what files have cause the packages to change.
$ lerna diff
# A CLI tool to help with lerna tasks
$ lerna-wizard

Local Commands

Use this commands on the folder of the packaged you are developing

# Start development
$ yarn serve
# Build the package
$ yarn build
# Run the unit tests
$ yarn test:unit
# Run the e2e tests
$ yarn test:e2e
# Open the Cypress
$ yarn test:e2e:CI
# Runs [majestic](https://github.com/Raathigesh/majestic) GUI
$ yarn test:unit:ui
# Runs Lint in every package.
$ yarn lint
# Runs Lint in every package and applies possibles fixes.
$ yarn lint:fix

Commit message format

feat(elements-table): add hat wobble
^--^ ^------------^   ^------------^
|    |                |
|    |                +-> Summary in present tense.
|    +------------------> Scope: folder name of package in kebab-case (e.g. elements-table)
|
+-----------------------> Type: chore, docs, feat, fix, refactor, style, or test.

Commit without validation

Use this command only when there are an error on Husky or Pre-Commits.

$ git commit -m "..." --no-verify

Linking

When linking inside of the Monorepo, everything works as expected. If you are trying to consume packages from this Monorepo in a different application locally, using npm link or yarn link does not work as expected. However, we have a workaround for the time being.

  1. Run yarn build
  2. Change the package.json of the consumer from $YOUR_PACKAGE_NAME (which lives inside the monorepo) to file:./../monorepo/packages/$YOUR_PACKAGE_NAME
  3. Run rm -rf node_modules && yarn in the consumer