Getting Started

Project Structure

Inside of the project repository you will find a couple of directories:

• /src/**/* -> This is the web application (renderer, spa)
• /electron/**/* -> This is all the code for the main node process (electron)
• /server/**/* -> This is example code for a server that handles license activation, validation and automatic updates.
• /shared/**/* -> Resources shared between the different parts of the application
• /public/**/* -> public folder for the web application (renderer, spa)

You will also find a number of configuration files:

• electron-builder.yaml -> File to configure the release build for the electron application
• eslint.config.js -> Configuration file for the linter
• index.html -> entrypoint for the renderer (web app)
• components.json -> File used by shadcn to install and manage components
• vercel.json -> Ready-to-use deployment configuration file for Vercel for CI/CD

There are multiple tsconfig files:

• tsconfig.ts -> Entrypoint config file
• tsconfig.node.ts -> Used for electron's main process and the server
• tsconfig.app.ts -> Used by the web application / renderer

And a few vite files:

• vite.config.ts -> Vite configuration file for the web application / renderer
• vite.config.electron.ts -> Vite configuration file for electron's main process

Inside of your code you can use the following import aliases:

• @shared/**/* -> shared folder for anything shared between the main process and the renderer
• @web/**/* -> src folder for anything webb app related
• @electron/**/* -> electron folder for anything electron related