{"id":14968176,"url":"https://github.com/alexdevero/electron-react-webpack-boilerplate","last_synced_at":"2025-04-12T22:37:18.203Z","repository":{"id":27896781,"uuid":"115498286","full_name":"alexdevero/electron-react-webpack-boilerplate","owner":"alexdevero","description":"Minimal Electron, React, PostCSS and Webpack boilerplate to help you get started with building your next app.","archived":false,"fork":false,"pushed_at":"2024-03-28T04:34:01.000Z","size":3338,"stargazers_count":410,"open_issues_count":19,"forks_count":88,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-04-04T08:08:15.574Z","etag":null,"topics":["boilerplate","boilerplate-application","boilerplate-template","electron","electron-app","postcss","react","reactjs","webpack"],"latest_commit_sha":null,"homepage":null,"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/alexdevero.png","metadata":{"funding":{"patreon":"alexdevero","github":null,"open_collective":null,"ko_fi":"alexdevero","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["https://paypal.me/alexdevero","https://buymeacoffee.com/alexdevero"]},"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"code-of-conduct.md","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":"2017-12-27T08:15:49.000Z","updated_at":"2025-01-27T19:03:51.000Z","dependencies_parsed_at":"2024-01-09T09:46:29.480Z","dependency_job_id":"1e1c63ea-e4b7-4285-8b1f-38f36b786557","html_url":"https://github.com/alexdevero/electron-react-webpack-boilerplate","commit_stats":{"total_commits":213,"total_committers":5,"mean_commits":42.6,"dds":"0.17840375586854462","last_synced_commit":"fde7998c14f8fa19020b36f46e2fad04a82ebc70"},"previous_names":[],"tags_count":54,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexdevero%2Felectron-react-webpack-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexdevero%2Felectron-react-webpack-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexdevero%2Felectron-react-webpack-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexdevero%2Felectron-react-webpack-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexdevero","download_url":"https://codeload.github.com/alexdevero/electron-react-webpack-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248643007,"owners_count":21138353,"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":["boilerplate","boilerplate-application","boilerplate-template","electron","electron-app","postcss","react","reactjs","webpack"],"created_at":"2024-09-24T13:39:28.003Z","updated_at":"2025-04-12T22:37:18.179Z","avatar_url":"https://github.com/alexdevero.png","language":"JavaScript","funding_links":["https://patreon.com/alexdevero","https://ko-fi.com/alexdevero","https://paypal.me/alexdevero","https://buymeacoffee.com/alexdevero","https://www.buymeacoffee.com/alexdevero"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://cdn.rawgit.com/alexdevero/electron-react-webpack-boilerplate/master/docs/images/electron-react-webpack-boilerplate.png\" width=\"135\" align=\"center\"\u003e\n  \u003cbr\u003e\n  \u003cbr\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://david-dm.org/alexdevero/electron-react-webpack-boilerplate\"\u003e\u003cimg alt=\"Dependency Status\" src=\"https://david-dm.org/alexdevero/electron-react-webpack-boilerplate.svg?style=flat\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://david-dm.org/alexdevero/electron-react-webpack-boilerplate?type=dev\"\u003e\u003cimg alt=\"devDependency Status\" src=\"https://david-dm.org/alexdevero/electron-react-webpack-boilerplate/dev-status.svg?style=flat\"\u003e\u003c/a\u003e\n  \u003ca href=\"http://opensource.org/licenses/MIT\"\u003e\u003cimg alt=\"MIT License\" src=\"https://img.shields.io/npm/l/express.svg\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/alexdevero/electron-react-webpack-boilerplate/releases\"\u003e\u003cimg alt=\"Current release\" src=\"https://img.shields.io/github/release/alexdevero/electron-react-webpack-boilerplate.svg\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://paypal.me/alexdevero\" rel=\"nofollow\"\u003e\u003cimg src=\"https://img.shields.io/badge/Paypal-Donate-%2300457C.svg?logo=paypal\u0026style=flat\" alt=\"Paypal\" data-canonical-src=\"https://img.shields.io/badge/Paypal-Donate-%2300457C.svg?logo=buy-me-a-coffee\u0026style=flat\" style=\"max-width:100%;\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://patreon.com/alexdevero\" rel=\"nofollow\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/c1eeb70a15e52f44437076a15999bb53101157f0/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f50617472656f6e2d537570706f7274212d2532334639363835342e7376673f6c6f676f3d70617472656f6e267374796c653d666c6174\" alt=\"Patreon\" data-canonical-src=\"https://img.shields.io/badge/Patreon-Support!-%23F96854.svg?logo=patreon\u0026amp;style=flat\" style=\"max-width:100%;\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://buymeacoffee.com/alexdevero\" rel=\"nofollow\"\u003e\u003cimg src=\"https://img.shields.io/badge/Coffee-Donate-%23FF813F.svg?logo=buy-me-a-coffee\u0026style=flat\" alt=\"buymeacoffee\" data-canonical-src=\"https://img.shields.io/badge/Coffee-Donate-%23FF813F.svg?logo=buy-me-a-coffee\u0026style=flat\" style=\"max-width:100%;\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Minimal Electron, React and Webpack boilerplate\n\nMinimal Electron, React, PostCSS and Webpack boilerplate to help you get started with building your next app.\n\n### Table of contents\n\n* [Install](#install)\n* [Usage](#usage)\n* [Add Sass](#add-sass)\n* [Add TailwindcSS](#add-tailwindcss)\n* [Change app title](#change-app-title)\n* [Contact and Support](#contact-and-support)\n* [Code of Conduct](#code-of-conduct)\n* [License](#license)\n\n### Install\n\n#### Clone this repo\n\n```\ngit clone https://github.com/alexdevero/electron-react-webpack-boilerplate.git\n```\n\n#### Install dependencies\n\n```\nnpm install\n```\nor\n```\nyarn\n```\n\n### Usage\n\n#### Run the app\n\n```\nnpm run start\n```\nor\n```\nyarn start\n```\n\n#### Build the app (automatic)\n\n```\nnpm run package\n```\nor\n```\nyarn package\n```\n\n#### Build the app (manual)\n\n```\nnpm run build\n```\nor\n```\nyarn build\n```\n\n#### Test the app (after `npm run build` || `yarn run build`)\n```\nnpm run prod\n```\n```\nyarn prod\n```\n\n### Add Sass\n\nAdding Sass to boilerplate requires updating webpack configs and adding necessary loaders.\n\n1) To `webpack.build.config.js` and `webpack.dev.config.js` add new object to `rules`:\n\n```JavaScript\n{\n  test: /\\.scss$/,\n  use: [\n    { loader: 'style-loader' },\n    { loader: 'css-loader' },\n    { loader: 'sass-loader' }],\n  include: defaultInclude\n}\n```\n\n2) Install additional loaders for sass, `sass-loader` and `node-sass`.\n\n3) Rename all CSS file to `.scss`.\n\n\n### Add TailwindCSS\n\nIf you don't want to do all these steps, you can clone [This Repository](https://github.com/Sanan4li/React-Electron-TailwindCSS-Boilerplate) and you are good to go.\n\nAdding TainwindCSS to boilerplate requires adding all the dependencies listed on the tailwindcss website for `create react app` [Official Guide](https://tailwindcss.com/docs/guides/create-react-app). OR follow these steps\n\n1) install `tailwindcss`, `postcss` and `autoprefixer`.\n\n```\nnpm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9\n```\n\n2) Install `craco`.\n\n```\nnpm install @craco/craco\n```\n\n\n3) Open `package.json` file, find `start` and `build` scripts under `scripts`.\n\n4) Add `\u0026\u0026 craco start` at the end  in `start` and `build` scripts. You also have to add `build-css` script to build the CSS styles using tailwindCSS. `\"build-css\": \"npx tailwindcss build  -o src/styles/main.css\",`. You can choose output folder of your own choice. Here are the three scripts after changing/adding. \n\n```json\n\"start\": \"cross-env NODE_ENV=development webpack serve --hot --host 0.0.0.0 --config=./webpack.dev.config.js --mode development \u0026\u0026 craco start\",\n    \"build\": \"cross-env NODE_ENV=production webpack --config webpack.build.config.js --mode production \u0026\u0026 craco build\",\n\"build-css\": \"npx tailwindcss build  -o src/styles/main.css\",\n```\n\n5) Now, create `craco.config.js` file in your project at root of your project and add the following.\n\n```JavaScript\nmodule.exports = {\n  style: {\n    postcss: {\n      plugins: [\n        require('tailwindcss'),\n        require('autoprefixer'),\n      ],\n    },\n  },\n}\n```\n\n6) Next, generate your tailwind.config.js file:\n\n```\nnpx tailwindcss-cli@latest init\n```\nThis will create a minimal tailwind.config.js file at the root of your project.\n\n7) (Optional) Configure Tailwind to remove unused styles in production\nIn your `tailwind.config.js` file, configure the purge option with the paths to all of your components so Tailwind can tree-shake unused styles in production builds:\n\n```JavaScript\n  // tailwind.config.js\n  module.exports = {\n   purge: [],\n   purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],\n    darkMode: false, // or 'media' or 'class'\n    theme: {\n      extend: {},\n    },\n    variants: {\n      extend: {},\n    },\n    plugins: [],\n  }\n```\n\n8) Add `main.css` file in `app.js`. Make sure you choose correct path for CSS file.\n\n```\nimport '../styles/main.css' \n``` \n\n9) You may have to run `npm install tailwindcss@latest postcss@latest autoprefixer@latest` if you face different version issues. \n10) You can also check [JIT Mode In TailwindCSS](https://tailwindcss.com/docs/just-in-time-mode#enabling-jit-mode) if you want to use Just In Time Mode.\n\n\n### Change app title\n\nThis boilerplate uses [HTML Webpack Plugin](https://github.com/jantimon/html-webpack-plugin#options) to generate the HTML file of the app. Changing app title is possible only through webpack configs, `webpack.build.config.js` and `webpack.dev.config.js`. App title can be changed by adding objects of options.\n\nIn `webpack.build.config.js`:\n\n```JavaScript\nplugins: [\n  new HtmlWebpackPlugin({title: 'New app title '}),// Add this (line 41)\n  new MiniCssExtractPlugin({\n    // Options similar to the same options in webpackOptions.output\n    // both options are optional\n    filename: 'bundle.css',\n    chunkFilename: '[id].css'\n  }),\n  new webpack.DefinePlugin({\n    'process.env.NODE_ENV': JSON.stringify('production')\n  }),\n  new BabiliPlugin()\n],\n```\n\nIn `webpack.dev.config.js`:\n\n```JavaScript\nplugins: [\n  new HtmlWebpackPlugin({title: 'New app title '}),// Add this (line 36)\n  new webpack.DefinePlugin({\n    'process.env.NODE_ENV': JSON.stringify('development')\n  })\n],\n```\n\n## Contact and Support\n\nI want your feedback! Here's a list of different ways to me and request help:\n* Report bugs and submit feature requests to [GitHub issues](https://github.com/alexdevero/electron-react-webpack-boilerplate/issues).\n\u003c!-- * For private communications email me at foo@mail.com. --\u003e\n* And do not forget to follow [@alexdevero](https://twitter.com/alexdevero) on Twitter!\n\nIf you feel generous and want to show some extra appreciation:\n\n[![Buy me a coffee][buymeacoffee-shield]][buymeacoffee]\n\n[buymeacoffee]: https://www.buymeacoffee.com/alexdevero\n[buymeacoffee-shield]: https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png\n\n### Code of Conduct\n\n[Contributor Code of Conduct](code-of-conduct.md). By participating in this project you agree to abide by its terms.\n\n### License\n\nMIT © [Alex Devero](https://alexdevero.com).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexdevero%2Felectron-react-webpack-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexdevero%2Felectron-react-webpack-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexdevero%2Felectron-react-webpack-boilerplate/lists"}