Skip to content

Files

Latest commit

ada07be · Feb 21, 2024

History

History
This branch is 1 commit ahead of, 3572 commits behind frappe/press:master.

dashboard

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
May 6, 2021
Feb 21, 2024
Feb 21, 2024
Apr 28, 2021
Feb 24, 2020
Apr 13, 2022
May 18, 2022
Oct 7, 2023
Apr 28, 2021
Dec 14, 2023
Jan 31, 2024
Feb 3, 2024
Feb 1, 2024
May 18, 2022
Feb 4, 2024
Feb 3, 2024
Feb 3, 2024
Jan 31, 2024
Feb 4, 2024

Dashboard

Dashboard is a VueJS application that is the face of Frappe Cloud. This is what the end users (tenants) see and manage their FC stuff in. The tenants does not have access to the desk, so, this is their dashboard for managing sites, apps, updates etc.

Technologies at the heart of dashboard:

  1. VueJS 3: The JavaScript framework of our choice.

  2. TailwindCSS 3: We love it.

  3. ViteJS: Build tooling for dev server and build command.

  4. Feather Icons: Those Shiny & Crisp Open Source icons.

Development

We use the vite's development server, gives us super-fast hot reload and more.

Running the development server

Run:

yarn run dev

Note: If you are getting CSRFTokenError in your local development machine, please add the following key value pair in your site_cofig.json

"ignore_csrf": 1

Proxy

While running the vite dev server, the requests to paths like /app, /files and /api are redirected to the actual site inside the bench. This makes sure these paths and other backend API keep working properly. You can check the proxyOptions.js files to check how the proxying happens. These options are then loaded and used in the vite config file.

Testing

There is a separate setup for testing the frontend.

The Stack

  1. MSW

  2. Vitest

Running the tests

yarn run test

The tests run in CI too.

Learning More

You can start by taking a look at the main.js file. This is where the VueJS app is initialzed and the below things are attached (registered) to the instance:

  1. Vue Router
  2. Plugins
  3. Controllers
  4. Global Components

The logic to register each of the above is in its own separate file, you can take a look at the imports as required. Till we have a more docs, you have to dig into some js and vue files. If you find something that you can add here, feel free to raise a PR!