The Frontend Bible

Appearance

Wisemen Vue Project Template ​

This templated will help you to create great applications at Wisemen.

Repository ​

You can find the repository on Github

Demo ​

To see a demo of the project template, you can visit vue-project-template.wisemen.digital

Table of contents ​

Project setup ​

Fork repo and install dependencies ​

pnpm install

Compiles and hot-reloads for development ​

pnpm dev

Clean the project before pushing changes ​

This command will automatically run the linting, type checking, unit tests, e2e tests, and build the project.

pnpm clean

Code Style ​

The project template uses the Wisemen ESLint configuration for automatic code formatting and linting.

TODO add our preferences and examples

Structure ​

The application uses a module based structure with vertical slices (features).

Each vertical slice is a folder in the src/modules directory. Each module contains multiple features which group together related functionality.

  • components: contains the components used in the vertical slice.
  • api/services: services for fetching data from the backend.
  • api/queries: queries for handling server state cache
  • api/mutations: mutations for handling actions (create, update, delete) on the server
  • views: contains the pages used in the vertical slice.
  • services: contains the services used in the vertical slice.

Components ​

The project template uses the Wisemen component library. TODO @robbe

TODO @robbe add link to component docs and some explanation maybe?

Authentication ​

The project template uses the Wisemen authentication library. TODO @wouter

TODO @wouter add link to auth docs and env variables config explanation

Form validation ​

The project template uses the Formango validation library.

TODO @robbe add link to formango and zod docs and maybe some explanation?

Sentry ​

The project template uses Sentry for error tracking.

To use Sentry, you need to add some environment variable to your .env file or GitHub secrets.

VITE_SENTRY_DSN ​

The DSN for your Sentry project. This is the most important environment variable and is required for Sentry to work. You can ask your project manager, team lead or a Sysops Engineer for the DSN.

env
VITE_SENTRY_DSN='YOUR_SENTRY_DSN'

VITE_SENTRY_AUTH_TOKEN ​

The auth token for your Sentry project. This is required for Sentry to work. You can ask your project manager, team lead or a Sysops Engineer for the auth token.

env
VITE_SENTRY_AUTH_TOKEN='YOUR_SENTRY_AUTH_TOKEN'

VITE_SENTRY_SAMPLE_RATE ​

The sample rate for Sentry. This is a number between 0 and 1. It represents the percentage of errors that will be sent to Sentry.

env
VITE_SENTRY_SAMPLE_RATE=1

Other needed environment variables ​

Some other neccessary environment variables for Sentry.

env
VITE_SENTRY_ORG='wisemen'
VITE_SENTRY_PROJECT='YOUR_PROJECT_NAME'
VITE_SENTRY_URL='https://sentry.appwi.se'
VITE_ENVIRONMENT='development'
VITE_APP_VERSION=$npm_package_version

GitHub Actions ​

If you are using GitHub actions, make sure to included the following settings. Note that these secrets also have to be added to your GitHub secrets.

yaml
- uses: actions/checkout@v3
  with:
    fetch-depth: 0

- name: Create Sentry release
  uses: getsentry/action-release@v1
  env:
    SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
    SENTRY_ORG: ${{ vars.SENTRY_ORG }}
    SENTRY_PROJECT: ${{ vars.SENTRY_PROJECT }}
    SENTRY_URL: ${{ vars.SENTRY_URL }}

PWA (Progressive Web App) ​

The project template uses Vite PWA for PWA support.

You only need to update the vitest.config with your project name, description, and icons.

Testing your application ​

Unit Tests ​

Unit tests are written using Vitest. To run the unit tests, run:

pnpm test:unit

E2E Tests ​

E2E tests are written using Playwright. To run the e2e tests, run:

pnpm test:e2e

Debugging your application ​

Vue Devtools ​

The project template comes with Vue Devtools installed. To use it, install the Vue Devtools extension for Chrome.

A full reload happens instead of HMR ​

  • If HMR is not handled by Vite or a plugin, a full reload will happen as it's the only way to refresh the state.
  • If HMR is handled but it is within a circular dependency, a full reload will also happen to recover the execution order.

To solve this, try breaking the loop. You can run vite --debug hmr to log the circular dependency path if a file change triggered it.

Check the project bundle ​

We can use the vite-bundle-visualizer to check the project bundle.

npx vite-bundle-visualizer