Frontend Architecture

• .vuepress
• docs
  • ADR
• public
  • index.html
• src
  • assets
  • components
  • design
  • i18n
  • router
  • state
  • utils
  • services
  • app.config.json
  • app.vue
  • main.ts
• tests

Note that some frontend logic is shared among projects in <root>/shared-frontend package.

.vuepress

Contains the configuration for generating docs. The docs are deployed automatically to https://japanrabbit-docs.netlify.app when pushing to master.

docs

Contains general documentation about the project such as how CSS, linting or routing works.

adr

Contains specific architectural decision records.

public

Where you'll keep any static assets, to be added to the dist directory without processing from our build system.

index.html

This one file actually does get processed by our build system, allowing us to inject some information from Webpack with EJS, such as the title, then add our JS and CSS.

src

Where we keep all our source files for the frontend.

assets

This project manages assets via Vue CLI. Learn more about its asset handling here.

components

Where all the common components in our app will live. Components that are used by at least other 2 components should be placed here.

design

Where we keep our design variables and tooling.

i18n

Everything related to setting up i18n and translations. vue-i18n package is used to handle translations.

router

Where the router, routes, and any routing-related components live. See the routing doc for more.

state

Where all our global state management lives. See the state management doc for more.

utils

These are utility functions you may want to share between many files in your application. They will always be pure and never have side effects, meaning if you provide a function the same arguments, it will always return the same result. These should also never directly affect the DOM or interface with our global state.

services

A different form of utils that provide installable plugins to Vue.

app.config.json

Contains app-specific metadata.

app.vue

The root Vue component that simply delegates to the router view. This is typically the only component to contain global CSS.

main.ts

The entry point to our app, were we create our Vue instance and mount it to the DOM.

tests

Where all our frontend test setup go. See the tests doc for more.