Skip to content

Latest commit

 

History

History
77 lines (61 loc) · 2.8 KB

development.md

File metadata and controls

77 lines (61 loc) · 2.8 KB

Click N Track

This application is written as a web app that is built into a complete HTML, which means it can be run from the local file system without getting CORS errors or needing a server.

The main technologies used in this application are:

  • npm (Package Management)
  • TypeScript (The language used for development)
  • Vite (The build tool)
  • Vue 3 (The application framework)
  • Pinia (The recommended data store for Vue 3)
  • PrimeVue (The component library used)
  • ESLint (For code linting)
  • Prettier (For code formatting)

Project Setup

Prerequisites

Before you start you will need to install the correct Node and npm versions (currently v18.12.0 and 8.19.2 respectively). The easiest way to ensure you have the right versions installed and enabled is to use Node Version Manager (nvm). With nvm installed, you can use the .nvmrc file in this directory to install the correct versions.

nvm use

Installation

With Node and npm configured, you can install the required packages by running this command:

npm install

You will need to re-run this command whenever the packages are updated in the package.json file.


Running the project

Compile and Hot-Reload for Development

To run a development server with hot-reloading, run the following command:

npm run dev

This will start a development server at http://localhost:5173 and will automatically reload the page whenever you make changes to the source code.


Type-Check, Compile and Minify for Production

To create a static build that can be run in the browser:

npm run build

This will build the files to the dist directory. You can then run the build by opening the index.html file in your browser.


Validation checks

Lint with ESLint

You can run ESLint to check for errors by running the following command:

npm run lint

Format the code with Prettier

You can run prettier to format the code:

npm run format

Troubleshooting

Because data is stored in the browser's local storage, you may run into issues if you change any of the pinia stores without clearing your local storage. To clear your local storage (These steps are for Chrome but they're all similar):

  1. Open the developer tools in your browser
  2. Go to the Application tab
  3. On the left, under 'Local Storage', select http://localhost:5173 (or file:// if running via index.html).
  4. On the right should be a set of key/value pairs. Delete those starting with clickntrack-pinia.
  5. Refresh the page