{"id":15135040,"url":"https://github.com/julillermo/template-electron-forge-vite-react-ts","last_synced_at":"2026-02-24T02:03:25.269Z","repository":{"id":252431855,"uuid":"838691194","full_name":"julillermo/template-electron-forge-vite-react-ts","owner":"julillermo","description":"A simple and customizable Electron.js template with React, TypeScript, and Vite","archived":false,"fork":false,"pushed_at":"2024-09-27T13:21:04.000Z","size":284,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-05T23:29:00.706Z","etag":null,"topics":["electron","electron-forge","react","template","typescript","vite"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/julillermo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-06T06:44:07.000Z","updated_at":"2025-03-28T15:12:09.000Z","dependencies_parsed_at":"2024-08-09T18:58:38.732Z","dependency_job_id":"fd363d89-9fbc-40ca-aa87-1ea991d352d7","html_url":"https://github.com/julillermo/template-electron-forge-vite-react-ts","commit_stats":null,"previous_names":["julillermo/template-electron-forge-vite-react-ts"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/julillermo/template-electron-forge-vite-react-ts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/julillermo%2Ftemplate-electron-forge-vite-react-ts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/julillermo%2Ftemplate-electron-forge-vite-react-ts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/julillermo%2Ftemplate-electron-forge-vite-react-ts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/julillermo%2Ftemplate-electron-forge-vite-react-ts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/julillermo","download_url":"https://codeload.github.com/julillermo/template-electron-forge-vite-react-ts/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/julillermo%2Ftemplate-electron-forge-vite-react-ts/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266496399,"owners_count":23938711,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["electron","electron-forge","react","template","typescript","vite"],"created_at":"2024-09-26T05:42:14.051Z","updated_at":"2025-10-29T17:39:02.481Z","avatar_url":"https://github.com/julillermo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# About\nThis project was made primarily for learning purposes. It is my attempt at creating a React template for future Electron.js projects. The goal was to create a template without relying too much existing templates. Everyone is welcome to use it as a starting point for their own projects.\n\nAt it's core, this project is a combination of the following starting points:\n  * [Electron Forge](https://www.electronforge.io/) (Vite + TypeScript)\n  * [Vite](https://vitejs.dev/) (React + TypeScript)\n\n\n\n# Guide\nThe project is intended as a template to speed up the set up step for electron projects. Should you prefer to recreate the development process yourself, perhaps for learning or customization purposes, the following details have been provided for you.\n\n1. [Steps to manually recreate the template](#steps-to-manually-recreate-the-template)\n2. Recommended continuation:\n    * [Organize 'main' process functions directory](./guides/organize-main-function-directory.md) **(recommended)**\n    * Setting up Electron API as functions\n        1. Main process\n            * [dialog](./guides/electron-api-functions/main-process/dialog-guide.md) (Also serves as the **general guide** on **how to include APIs that require function arguments**)\n    * Setting up Node API as functions\n        * [file system (node:fs)](./guides/node-API-functinos/file-system-guide.md) (UNFINISHED BROKEN LINK) (**Serves as the general guide on how to include node API into the template**)\n    * Setting up custom utility functions\n      * [fileTypeValidation]() (UNFINISHED BROKEN LINK) **Serves as the general guide on how to include additional packages into the template**)\n      * [directoryValidation]() (UNFINISHED BROKEN LINK)\n    * [Global types for 'main' process IPC functions]() (UNFINISHED BROKEN LINK) **(recommended)**\n    * [Extract 'main' process IPC event listeners to an external file]() (UNFINISHED BROKEN LINK) **(recommended)**\n\n\nThe additions included in the \"Recommended continuation\" are part of the project by default, and they should follow after the steps to manually recreate the template. However, note that the latest template contains mode functions that what's covered in the guides.\n\nThe selection of functions are not extensive. They were selected based on my project needs. You're encouraged to modify add your own functions by following the same steps described in the guide.\n\n\n\n# Steps to manually recreate the template\n### 1. Generate an Electron Forge project as the template's base\nGenerate a new `Electorn Forge` project using the `vite-typescript` template with the following command.\n\n```bash\nnpm init electron-app@latest \u003cname-of-electron-forge-project\u003e -- --template=vite-typescript\n```\n\n*Be sure to change \u0026lt;name-of-the-project\u0026gt; with your intended project name.*\n\n\n\n### 2. Organize the Electron Forge project files\nMove the following files into the specified locations. Create the folders as necessary\n\n| Original file location  | New file location |\n|------------------------ | ----------------- |\n| `src/main.ts` | move to `src/main/main.ts` |\n| `src/preload.ts` | move to `src/preload/preload.ts` |\n| `src/renderer.ts` | move to `src/renderer/renderer.ts` or delete |\n| `src/index.css` | move to `src/renderer/index.css` or delete |\n\nThis step is primarily for organization purposes and separation of contexts. The usefulness of this distinction becomes more apparent once you start to create files that are exclusively used by one of the three contexts (`main`, `preload`, and `renderer`).\n\n\u003e [!NOTE]\n\u003e * Once we're already working with React, the `renderer.ts` and `index.css` files are no longer needed, and can be deleted. However, you may still retain these files if you wish to work with vanilla JavaScript/TypeScript instead of React.\n\u003e * Once React has been set up, you will see how the `main.tsx` and `App.tsx` serve the same purpose as what `renderer.ts` was intended for, rendering the UI.\n\nBecause we changed where files are located in our *electron-forge-project*, this must be reflected in `forge.config.ts`. Look for the part of the file that's similar to the following and update it to match accordingly:\n\n```TS\n  build: [\n    {\n      entry: \"src/main/main.ts\",\n      config: \"vite.main.config.ts\",\n    },\n    {\n      entry: \"src/preload/preload.ts\",\n      config: \"vite.preload.config.ts\",\n    },\n  ],\n  renderer: [\n    {\n      name: \"main_window\",\n      config: \"vite.renderer.config.ts\",\n    },\n  ],\n```\n\nAdditionally, update `vite.renderer.config.ts` to have the following `base`\n\n```TS\n  base: \"./renderer\",\n```\n\n\n\n### 3. Generate a React-TS project using Vite, and copy files from it\nIn a different folder, create a new instance of a `vite` project with the `react-ts` template using the following command:\n\n```bash\nnpm create vite@latest \u003cname-of-vite-project\u003e -- --template react-ts\n```\n\n*Be sure to change change \u0026lt;name-of-the-project\u0026gt; with your intended folder name. The name for this isn't important as we'll simply moves files out of this folder.*\n\n\n\n#### \u003cu\u003e**Copy `tsconfig.json` details**\u003c/u\u003e\n\nUpdate `tsconfig.json` in the *electron-forge-project* to include the following. These are taken from the `tsconfig.app.json` and `tsconfig.node.json` of the *vite-project*.\n\n```json\n  // added specifically for React\n  \"jsx\": \"react-jsx\",\n\n  // linting\n  \"strict\": true,\n  \"noUnusedLocals\": true,\n  \"noUnusedParameters\": true,\n  \"noFallthroughCasesInSwitch\": true\n```\n\nThe above specifications are those that don't conflict with the *electron-forge-project*'s set-up based on manual trial-and-error testing.\n\n\n\n#### \u003cu\u003e**Copy files, directories, and packages from the *vite-project* into the *electron-forge-project***\u003c/u\u003e\n\nDo the following actions for the specific files and directories from the `vite-project`:\n\n|File/Directory | Action |\n|---------------|--------|\n|`public/`| Copy to root directory of the *electron-forge-project*|\n|`.gitignore`| Copy the lines that aren't present inside the *electron-forge-project* `.gitignore` file. |\n| `src/` | Move the files into the `renderer/` folder of the *electron-forge-project* |\n| `index.html` | Replace the `index.html` of the *electron-forge-project*. \u003cbr\u003e\u003cbr\u003e Be sure to update the \u003cbr\u003e`\u003cscript type=\"module\" src=\"/src/main.tsx\"\u003e\u003c/script\u003e` \u003cbr\u003e to \u003cbr\u003e`\u003cscript type=\"module\" src=\"/src/renderer/main.tsx\"\u003e\u003c/script\u003e` \u003cbr\u003e so the HTML knows where to look for our `main.tsx` file|\n| `package.json` | Use the `npm install \u003cpackage-name\u003e` to install the listed `dependencies` and `devDependencies` packages from the *vite-project* `package.json`. This should automatically resolve potential dependency conflicts. \u003cbr\u003e\u003cbr\u003e Note that not all packages used by *electron-forge-project* will be used in the *vite-project*. You may run `npx depcheck` to list unused packages remove them. \u003cbr\u003e\u003cbr\u003e You may also use this opportunity to update the details of project specified in the *electron-forge-project* `package.json`.|\n\nAs of writing (**Aug 15, 2024**), a new `vite` project using the `react-ts` template includes the following packages:\n\n```JSON\n  \"dependencies\": {\n    \"react\": \"^18.3.1\",\n    \"react-dom\": \"^18.3.1\"\n  },\n  \"devDependencies\": {\n    \"@eslint/js\": \"^9.8.0\", // can be skipped (unused)\n    \"@types/react\": \"^18.3.3\",\n    \"@types/react-dom\": \"^18.3.0\",\n    \"@vitejs/plugin-react\": \"^4.3.1\", // can be skipped (unused)\n    \"eslint\": \"^9.8.0\",\n    \"eslint-plugin-react-hooks\": \"^5.1.0-rc.0\", // can be skipped (unused)\n    \"eslint-plugin-react-refresh\": \"^0.4.9\", // can be skipped (unused)\n    \"globals\": \"^15.9.0\", // can be skipped (unused)\n    \"typescript\": \"^5.5.3\",\n    \"typescript-eslint\": \"^8.0.0\",\n    \"vite\": \"^5.4.0\"\n  }\n```\n\n\n\n#### \u003cu\u003e**Make the *electron-forge-project* recognize our React changes**\u003c/u\u003e\n\nIn the *electron-forge-project*, update the `src/main/main.ts` to recognize the previously added React files.\n\nInclude the following code inside the `createWindow()` function. This allows the *electron-forge-project* to look for the vite live server and render it as the \"frontend\" of the project. Overwrite the part of the code that's similar to the following:\n\n```TS\n  // and load the index.html of the app.\n  if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {\n    // MAIN_WINDOW_VITE_DEV_SERVER_URL is the localhost\n    mainWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL);\n    console.log(\n      `🛜  Loaded through localhost ${MAIN_WINDOW_VITE_DEV_SERVER_URL}`\n    );\n  } else {\n    // MAIN_WINDOW_VITE_NAME is \"main_window\"\n    mainWindow.loadFile(\n      path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`)\n    );\n    console.log(\n      `📁  Loaded through a local file:  ${path.join(\n        __dirname,\n        `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`\n      )}`\n    );\n  }\n``` \n\nAlso include the following somewhere at the top of the `src/main/main.ts` file to remove the linting error in VS Code that underlines these variables\n\n```TS\ndeclare const MAIN_WINDOW_VITE_DEV_SERVER_URL: string;\ndeclare const MAIN_WINDOW_VITE_NAME: string;\n```\n\n\n\n### 4. Run the project\nYou should now be able to run the project using the following commands\n\n```bash\nnpm run start\n```\nor\n```bash\nnpm start\n```\n![Working template-electron-forge-vite-react-ts example screenshot](./public/Screenshot_working_sample.png \"Working example screenshot\")\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjulillermo%2Ftemplate-electron-forge-vite-react-ts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjulillermo%2Ftemplate-electron-forge-vite-react-ts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjulillermo%2Ftemplate-electron-forge-vite-react-ts/lists"}