{"id":19696533,"url":"https://github.com/romankurnovskii/electron-react-template","last_synced_at":"2025-04-29T11:32:08.753Z","repository":{"id":228019358,"uuid":"630534882","full_name":"romankurnovskii/electron-react-template","owner":"romankurnovskii","description":null,"archived":false,"fork":false,"pushed_at":"2024-07-29T00:27:10.000Z","size":150,"stargazers_count":32,"open_issues_count":8,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-05T15:11:22.749Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/romankurnovskii.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":"2023-04-20T15:31:11.000Z","updated_at":"2025-03-12T13:33:46.000Z","dependencies_parsed_at":"2024-05-06T01:43:34.789Z","dependency_job_id":"c20accbe-4238-4d55-bb0e-07000bf8518c","html_url":"https://github.com/romankurnovskii/electron-react-template","commit_stats":null,"previous_names":["romankurnovskii/electron-react-template"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romankurnovskii%2Felectron-react-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romankurnovskii%2Felectron-react-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romankurnovskii%2Felectron-react-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romankurnovskii%2Felectron-react-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/romankurnovskii","download_url":"https://codeload.github.com/romankurnovskii/electron-react-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251494021,"owners_count":21598218,"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","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":[],"created_at":"2024-11-11T19:35:28.868Z","updated_at":"2025-04-29T11:32:08.385Z","avatar_url":"https://github.com/romankurnovskii.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\u003cimg alt=\"Electron React Crossover Banner\" src=\"./assets/logo.png\" width=\"500\" /\u003e\n\u003c/div\u003e\n\u003cbr /\u003e\nThe boilerplate typescript template to get started creating Cross-platform Desktop Apps with Electron and React.\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## TLDR\n\nClick **Use this template** to create a new repo and start coding.\n\n## Prerequisites\n\nBefore starting this tutorial, make sure you have the following tools installed on your system:\n\n1. Node.js (version 12 or newer)\n1. npm or yarn (npm is bundled with Node.js, and yarn can be installed separately)\n1. A code editor (e.g., Visual Studio Code)\n\n## Step 1: Set up the project structure\n\nCreate a new directory for your project and navigate to it in your terminal:\n\n```bash\nmkdir react-electron-app\ncd react-electron-app\n```\n\nNext, create the following directories and files to set up the project structure:\n\n```bash\nmkdir -p src electron public\ntouch src/App.tsx src/index.tsx electron/main.ts\ntouch public/index.html\n```\n\nYour project should now have the following structure:\n\n```\nreact-electron-app\n├── electron\n│   └── main.ts\n├── public\n│   └── index.html\n└── src\n    ├── App.tsx\n    └── index.tsx\n```\n\n## Step 2: Initialize the project\n\nRun the following command in the terminal to initialize the project with a `package.json` file:\n\n```sh\nnpm init -y\n```\n\n## Step 3: Install dependencies\n\nInstall the necessary dependencies for the project:\n\n```sh\nnpm install --save react react-dom typescript electron\nnpm install --save-dev concurrently electron-builder electron-is-dev wait-on cross-env\n```\n\n## Step 4: Configure TypeScript\n\nCreate a `tsconfig.json` file in the root of the project:\n\n```bash\ntouch tsconfig.json\n```\n\nAdd the following content to the `tsconfig.json` file:\n\n```json\n{\n  \"compilerOptions\": {\n    \"target\": \"ES2023\",\n    \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"allowSyntheticDefaultImports\": true,\n    \"strict\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"noEmit\": true,\n    \"jsx\": \"react-jsx\"\n  },\n  \"include\": [\"src\"]\n}\n```\n\n## Step 5: Set up the React app\n\nReplace the contents of `src/App.tsx` with the following code:\n\n```tsx\nfunction App() {\n  return (\n    \u003cdiv className='App'\u003e\n      \u003cp\u003e\n        Hello World!\n      \u003c/p\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\nReplace the contents of `src/index.tsx` with the following code:\n\n```tsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\n\nReactDOM.render(\n  \u003cReact.StrictMode\u003e\n    \u003cApp /\u003e\n  \u003c/React.StrictMode\u003e,\n  document.getElementById('root')\n);\n```\n\nReplace the contents of `public/index.html` with the following code:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003ctitle\u003eReact-Electron App\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Step 6: Set up the Electron main process\n\nReplace the contents of electron/main.ts with the following code:\n\n```ts\nimport { app, BrowserWindow } from 'electron';\nimport * as path from 'path';\nimport * as isDev from 'electron-is-dev';\n\nfunction createWindow() {\n  const win = new BrowserWindow({\n    width: 800,\n    height: 600,\n    webPreferences: {\n      nodeIntegration: true,\n    },\n  });\n\n  win.loadURL(\n    isDev\n      ? 'http://localhost:3000'\n      : `file://${path.join(__dirname, '../build/index.html')}`\n  );\n\n  win.webContents.openDevTools();\n}\n\napp.whenReady().then(createWindow);\n\napp.on('window-all-closed', () =\u003e {\n  if (process.platform !== 'darwin') {\n    app.quit();\n  }\n});\n\napp.on('activate', () =\u003e {\n  if (BrowserWindow.getAllWindows().length === 0) {\n    createWindow();\n  }\n});\n```\n\n## Step 7: Configure scripts in package.json\n\nOpen your `package.json` file and update the scripts section to include the following:\n\n```json\n\"scripts\": {\n  \"start\": \"react-scripts start\",\n  \"build\": \"react-scripts build\",\n  \"eject\": \"react-scripts eject\",\n  \"electron:dev\": \"concurrently \\\"cross-env BROWSER=none yarn start\\\" \\\"wait-on http://127.0.0.1:3000 \u0026\u0026 tsc -p electron -w\\\" \\\"wait-on http://127.0.0.1:3000 \u0026\u0026 tsc -p electron \u0026\u0026 electron .\\\"\",\n  \"electron:build\": \"yarn build \u0026\u0026 tsc -p electron \u0026\u0026 electron-builder\",\n  \"electron:dist\": \"yarn build \u0026\u0026 tsc -p electron \u0026\u0026 electron-builder --mac --dir\"\n}\n```\n\nThese scripts will allow you to run the React app in development mode, build the app for production, and package the Electron app for distribution.\n\n## Step 8: Run the application\n\nYou're now ready to run your React-Electron application in development mode. In the terminal, run:\n\n```\nnpm run electron:dev\n```\n\nThis command will start the React development server, compile the Electron main process, and launch the Electron app. You should see a new window with your \"Hello World!\" message displayed.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fromankurnovskii%2Felectron-react-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fromankurnovskii%2Felectron-react-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fromankurnovskii%2Felectron-react-template/lists"}