Skip to content

Development ‐ Frontend

Jump to bottom
Thomas Shaw edited this page Apr 16, 2024 · 1 revision

Griddle's frontend is an Electron (+ Vite) application with React and TypeScript.

Development

Recommended IDE Setup

Initial setup

npm install

You'll have to run this any time dependencies are changed as well.

Running a development server

npm run dev

Syncing OpenAPI types

You'll want to do this if any backend routes are updated. First, make sure to have the backend running. Then:

npm run backend:sync

This populates src/types/schema.d.ts.

Build

# For windows
npm run build:win

# For macOS
npm run build:mac

# For Linux
npm run build:linux

Contributing

We use the following libraries to streamline this app:

  • OpenAPI TS to generate .d.ts files based off backend routes for typesafety.

    • OpenAPI Fetch for making requests to said backend routes. You'll find a fetchClient export defined.

  • SWR for clean data fetching logic.

  • react-hook-form for performant, powerful, uncontrolled forms

  • zustand for global state management (i.e. asset search parameters)

The project structure may seem strange if you're not used to Electron. Here you can find a complete explanation of why src has main, preload, and renderer folders underneath. Essentially, there is a normal Node process with access to system calls in main, separated from a sandboxed browser runtime in renderer in which the UI is actually created. To communicate between these, we use Inter-Process Communications (IPC).

Some key files:

  • src/types/ipc.d.ts — here is where we define all inter-process communications, specifically requests the renderer can make with some response from the main process.

  • src/renderer/src/main.tsx — this is where client-side routes are defined. If you're looking for a specific component, this is a good place to start to traverse the tree.

  • src/renderer/src/hooks — this folder contains hooks for real-time state management logic. Our hooks use a combination of Zustand, SWR, and the fetchClient from OpenAPI TS. Take a look at some existing ones for an idea of how this should work.

Clone this wiki locally