{"id":22563645,"url":"https://github.com/deadislove/electron-react-tailwind-startup-app-template","last_synced_at":"2026-04-15T05:31:42.085Z","repository":{"id":266866417,"uuid":"899594490","full_name":"deadislove/electron-react-tailwind-startup-app-template","owner":"deadislove","description":"Electron app with React, Tailwind CSS and Redux by Javascript","archived":false,"fork":false,"pushed_at":"2024-12-06T16:45:50.000Z","size":20,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-26T19:47:33.994Z","etag":null,"topics":["babel","electron","javascript","react","redux","redux-toolkit","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/deadislove.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,"zenodo":null}},"created_at":"2024-12-06T15:36:45.000Z","updated_at":"2025-03-27T14:49:52.000Z","dependencies_parsed_at":"2024-12-06T16:41:54.397Z","dependency_job_id":"22188b59-3c37-4fa6-92c4-ae6ac055f5b8","html_url":"https://github.com/deadislove/electron-react-tailwind-startup-app-template","commit_stats":null,"previous_names":["deadislove/electron-react-tailwind-startup-app-template"],"tags_count":1,"template":true,"template_full_name":null,"purl":"pkg:github/deadislove/electron-react-tailwind-startup-app-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deadislove%2Felectron-react-tailwind-startup-app-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deadislove%2Felectron-react-tailwind-startup-app-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deadislove%2Felectron-react-tailwind-startup-app-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deadislove%2Felectron-react-tailwind-startup-app-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/deadislove","download_url":"https://codeload.github.com/deadislove/electron-react-tailwind-startup-app-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deadislove%2Felectron-react-tailwind-startup-app-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31828530,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T18:05:02.291Z","status":"online","status_checked_at":"2026-04-15T02:00:06.175Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","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":["babel","electron","javascript","react","redux","redux-toolkit","tailwindcss"],"created_at":"2024-12-07T23:12:16.549Z","updated_at":"2026-04-15T05:31:42.066Z","avatar_url":"https://github.com/deadislove.png","language":"JavaScript","funding_links":["https://ko-fi.com/F1F82YR41"],"categories":[],"sub_categories":[],"readme":"# Electron + Rreact + TailwindCSS\n\n![License](https://img.shields.io/badge/License-MIT-blue.svg)\n\n\u003e This project is based on the official implementation Electron tutorial. I also added the popular React and Redux packages. You will find out the react entry point is based on the index.html to implement it, and I use the dotenv library and the @redux/toolkit library to improve the redux ecology when the state is complex. In the security part, the project turns on the CSP, so you will find out the .env file has API URL and other values, but it has passed the ipcRender and through ipcMain to return the related value. When the electron app runs on the product environment, the ipcMain return value won't directly call or watch in the dev tool's console dashboard.\n\n#### Project related version information\n\nElectron version: 33+\n\nReact version: 18+\n\n[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/F1F82YR41)\n\n# How to use it\n\nStep 1 Install npm packages\n```\nnpm install\n```\n\nStep 2 Run the project.\n```\nnpm start\n```\n\n# Setup \n\n- Step 1 Setup Electron app (Official Tutorial)\n- Step 2 Adding React in the Electron app proejct\n\n### Electron part:\n```\n// main.js\nconst { app, BrowserWindow } = require('electron');\nconst path = require('path');\n\nfunction createWindow() {\n    const mainWindow = new BrowserWindow({\n        width: 800,\n        height: 600,\n        webPreferences: {\n            nodeIntegration: true,\n            contextIsolation: false,\n            devTools: true, // Enable DevTools\n        }\n    });\n\n    mainWindow.loadFile('index.html'); // Load the React entry point\n}\n\napp.whenReady().then(createWindow);\n\napp.on('window-all-closed', () =\u003e {\n    if (process.platform !== 'darwin') app.quit();\n});\n```\n\n```\n\u003c!--index.html--\u003e\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\u003eElectron React App\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cdiv id=\"root\"\u003e\u003c/div\u003e \u003c!-- React will mount here --\u003e\n    \u003cscript src=\"./dist/bundle.js\"\u003e\u003c/script\u003e \u003c!-- Will be created by Webpack/Vite --\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### React part:\n\nStep 2.1 Install React and ReactDOM\n```\nnpm install react react-dom\n```\nStep 2.2 Install development tools:\n```\nnpm install --save-dev @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server babel-loader\n```\nStep 2.3 Create ```src``` folder and React entry poing:\n```\n// src/index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nfunction App() {\n    return \u003ch1\u003eHello, Electron with React!\u003c/h1\u003e;\n}\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById('root'));\n\n```\n- Step 3 Configure Webpack part:\n\nStep 3.1 Create ```webpack.config.js``` under the root folder.\n```\nconst path = require('path');\n\nmodule.exports = {\n    entry: './src/index.js',\n    output: {\n        path: path.resolve(__dirname, 'dist'),\n        filename: 'bundle.js',\n    },\n    module: {\n        rules: [\n            {\n                test: /\\.(js|jsx)$/,\n                exclude: /node_modules/,\n                use: {\n                    loader: 'babel-loader',\n                },\n            },\n        ],\n    },\n    resolve: {\n        extensions: ['.js', '.jsx'],\n    },\n    mode: 'development',\n};\n```\nStep 3.2 Configure Babel - Create ```.babelrc```:\n```\n{\n    \"presets\": [\"@babel/preset-env\", \"@babel/preset-react\"]\n}\n```\n- Step 4 Adding scripts to ```package.json```\n```\n\"scripts\": {\n   \"start\": \"webpack \u0026\u0026 electron .\",\n   \"dev\": \"webpack --watch \u0026 electron .\"\n}\n\n```\n\n- Step 5 Adding the Tailwind CSS in the Electron app wtih React\nStep 5.1 Install Tailwind CSS\n```\nnpm install tailwindcss postcss autoprefixer --save-dev\nnpm install style-loader css-loader postcss-loader --save-dev\n```\nStep 5.2 Initialize Tailwind Configuartion which will create two files: ```tailwind.config.js``` (Tailwind's configuration) and ```postcss.config.js``` (for PostCSS processing)\n```\nnpx tailwindcss init -p\n```\nStep 5.3 Configurae ```tailwind.config.js```:\n```\n// tailwind.config.js\nmodule.exports = {\n  content: [\n    \"./index.html\",\n    \"./src/**/*.{js,jsx,ts,tsx}\",  // Scan all JS/JSX files in src\n  ],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n}\n```\nStep 5.4 Adding the Tailwind Directives to the project CSS file:\n\n5.4.1 Create the ```src/styles.csss```\n```\n/* src/styles.css */\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n5.4.2 Import this CSS into your React entry point(```src/index.js```)\n```\nimport React from \"react\";\nimport ReactDOM from 'react-dom/client'\nimport App from \"./components/App\";\nimport './styles.css'\n\n// Create a root container\nconst root = ReactDOM.createRoot(document.getElementById('root'));\n\n// Render the App component\nroot.render(\n  \u003cReact.StrictMode\u003e\n    \u003cApp /\u003e    \n  \u003c/React.StrictMode\u003e\n);\n```\n5.4.3 Update Wepack Configuration (if needed)\n\nEnsure Webpack processes CSS files using PostCSS. Update your webpack.config.js to include a rule for CSS:\n```\nconst path = require('path');\n\nmodule.exports = {\n    entry: './src/index.js',\n    output: {\n        path: path.resolve(__dirname, 'dist'),\n        filename: 'bundle.js',\n    },\n    module: {\n        rules: [\n            {\n                test: /\\.(js|jsx)$/,\n                exclude: /node_modules/,\n                use: {\n                    loader: 'babel-loader',\n                },\n            },\n            {\n                test: /\\.css$/,  // Add this rule\n                use: ['style-loader', 'css-loader', 'postcss-loader'],\n            },\n        ],\n    },\n    resolve: {\n        extensions: ['.js', '.jsx'],\n    },\n    mode: 'development',\n};\n```\n5.4.4 Verify PostCSS Configuration\n\nEnsure postcss.config.js is set up correctly:\n```\n// postcss.config.js\nmodule.exports = {\n  plugins: {\n    tailwindcss: {},\n    autoprefixer: {},\n  }\n}\n```\n\n- Step 6 Solve Content Security Policy(CSP) issues\n\n6.1 Define CSP in ```index.html```\n```\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003cmeta http-equiv=\"Content-Security-Policy\" content=\"\n    default-src 'self'; \n    script-src 'self'; \n    style-src 'self' 'unsafe-inline'; \n    font-src 'self'; \n    img-src 'self' data:;\n    connect-src 'self';\"\u003e\n  \u003ctitle\u003eElectron App\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n  \u003cscript src=\"./bundle.js\"\u003e\u003c/script\u003e \u003c!-- Your compiled React/Electron bundle --\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n6.2 Set CSP via Electron's ```main.js```\n\nYou can also set CSP headers programmatically in your Electron main.js by modifying the webPreferences when creating the browser window:\n\n```\nconst { app, BrowserWindow } = require('electron');\n\nfunction createWindow() {\n  const mainWindow = new BrowserWindow({\n    width: 800,\n    height: 600,\n    webPreferences: {\n      nodeIntegration: false,\n      contextIsolation: true,\n      enableRemoteModule: false,\n      preload: path.join(__dirname, 'preload.js'),  // Optional\n      // Set CSP for all loaded pages\n      webSecurity: true,\n    }\n  });\n\n  mainWindow.loadFile('index.html');\n}\n\napp.on('ready', createWindow);\n```\n\n6.3 Setup ```devtool``` value in `webpack.config.js`:\n```\n...\ndevtool: source-map' // devtool can set source-map in the dev env. If the prod env, devtool value only false\n...\n```\n\n\u003e [!TIP]\n\u003e You also can edit script in package.json\n\u003e\n\u003e ```\"start\": \"webpack \u0026\u0026 electron . --devtool soruce-map\"```\n\n- Step 5 Runs your app\n```\nnpm start\n```\n\n\u003e [!TIP]\n\u003e You can run webpack to bundle your react code\n\u003e\n\u003e ``` npx webpack```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeadislove%2Felectron-react-tailwind-startup-app-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeadislove%2Felectron-react-tailwind-startup-app-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeadislove%2Felectron-react-tailwind-startup-app-template/lists"}