Desktop app
App Screenshot
Codebase
- Electron: A framework for building cross-platform desktop apps using HTML, JS, and CSS
- Vite: A fast build tool
- React: A library for building UI
- TypeScript: A typed JavaScript
- CodeMirror 6: An extensible code editor for the web
- Remark: An extensible Markdown processor
- React-Markdown: React component to render markdown.
- react-syntax-highlighter: Syntax highlighting component for react with
prismjsorhighlightjsusing inline styles
npm i
npm run watchThe structure of this template is very similar to the structure of a monorepo.
packages/main: Electron main script.
packages/preload: Used in BrowserWindow.webPreferences.preload.
packages/renderer: Electron web page.
The main and preload packages are built in library mode as it is
simple javascript.
The renderer package builds as a regular web app.
The next step is to package a ready to distribute Electron app for macOS, Windows and Linux with "auto update" support out of the box.
- Using the npm script
compile: This script is configured to compile the application as quickly as possible. It is not ready for distribution, it is compiled only for the current platform and is used for debugging. - Using GitHub Actions: The application is compiled for any platform and ready-to-distribute files are automatically added as a draft to the GitHub releases page.
npm run compile
# for mac user:
open dist/mac/your-app-name.appAll environment variables are set as part of the import.meta, so you can access them vie the following
way: import.meta.env.
If you are using TypeScript and want to get code completion you must add all the environment variables to
the ImportMetaEnv in types/env.d.ts.
The mode option is used to specify the value of import.meta.env.MODE and the corresponding environment variables files
that need to be loaded.
By default, there are two modes:
productionis used by defaultdevelopmentis used bynpm run watchscript
When running the build script, the environment variables are loaded from the following files in your project root:
.env # loaded in all cases
.env.local # loaded in all cases, ignored by git
.env.[mode] # only loaded in specified env mode
.env.[mode].local # only loaded in specified env mode, ignored by git
To prevent accidentally leaking env variables to the client, only variables prefixed with VITE_ are exposed to your
Vite-processed code.
For example let's take the following .env file:
DB_PASSWORD=foobar
VITE_SOME_KEY=123
Only VITE_SOME_KEY will be exposed as import.meta.env.VITE_SOME_KEY to your client source code, but DB_PASSWORD
will not.