Focus Loop Web Client

Table of Contents

1. Setup
   1. Installation
   2. Development Server
   3. Production
   4. Deployment
   5. Formatting & Linting

Setup

Installation

Make sure to install dependencies:

npm install

Development Server

Start the development server on http://localhost:3037:

npm run dev

Production

Build the application for production:

# SSR
npm run build

# SPA
npm run generate

Locally preview production build:

npm run preview

Deployment

This project uses GitHub Actions (docs) for automated deployment. The workflow is defined in the .github/workflows/deploy.yml file.

When code is pushed to the main branch, the workflow is triggered, and it performs the following steps:

1. Installs dependencies
2. Builds the application for production
3. Deploys the built files to the hosting platform

You can view the deployment status and history in the GitHub Actions tab.

Formatting & Linting

This project adheres to a specific coding style and formatting guidelines. To ensure consistency, we use ESLint and Prettier.

To format your code, run:

npm run format

To lint your code, run:

npm run lint

Additionally, we use Git hooks to enforce formatting and linting rules on commit. This is configured using Husky and lint-staged, as specified in the .husky and .lintstagedrc files.

When you commit code, the following checks are performed:

• Code is formatted using Prettier
• Code is linted & fixed using ESLint

If any issues are found, the commit will be rejected, and you will need to fix the issues before committing again.

By following these guidelines, we maintain a clean and readable codebase.