{"id":13694981,"url":"https://github.com/shadowwalker/next-electron","last_synced_at":"2025-10-14T19:07:49.638Z","repository":{"id":66127174,"uuid":"152905732","full_name":"shadowwalker/next-electron","owner":"shadowwalker","description":"Next.js + Electron.js Boilerplate","archived":false,"fork":false,"pushed_at":"2018-10-18T17:41:30.000Z","size":1490,"stargazers_count":10,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-14T19:04:38.947Z","etag":null,"topics":[],"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/shadowwalker.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}},"created_at":"2018-10-13T19:10:46.000Z","updated_at":"2024-04-21T04:32:06.000Z","dependencies_parsed_at":null,"dependency_job_id":"14889fb0-3df8-4203-993c-6a263ceaadbe","html_url":"https://github.com/shadowwalker/next-electron","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/shadowwalker/next-electron","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shadowwalker%2Fnext-electron","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shadowwalker%2Fnext-electron/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shadowwalker%2Fnext-electron/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shadowwalker%2Fnext-electron/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shadowwalker","download_url":"https://codeload.github.com/shadowwalker/next-electron/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shadowwalker%2Fnext-electron/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279020642,"owners_count":26086895,"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-10-14T02:00:06.444Z","response_time":60,"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":[],"created_at":"2024-08-02T17:01:54.659Z","updated_at":"2025-10-14T19:07:49.622Z","avatar_url":"https://github.com/shadowwalker.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Next.js + Electron.js Boilerplate\n\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n[TOC]\n\n*Create apps, the morden way*\n\n## Overview\n\n[Next.js](https://nextjs.org/) is a popular framework to create web applications by using the power of [React.js](https://reactjs.org/).\n\n[Electron.js](https://electronjs.org/) is a popular framework to create cross-platform desktop applications.\n\nThis project is a spark between Next.js and Electron.js to leverage the power of both great frameworks to help you create cross-platform desktop applications with a breeze.\n\n**Features**\n\n- Zero runtime-dependency\n  - Next.js will packup only neccessary codes\n  - No more huge `node_modules`\n- Robust dev dependencies\n  - All dependencies are well maintained and used by thousands of projects\n  - Means this boilerplate is production ready\n- Hot reloading during development\n- Secure file protocol enforced in production\n- Release installer/package/bundle using [electron-builder](https://www.electron.build/)\n- [Standard](https://standardjs.com) js linter\n- Clean script help you clean generated files\n\n## Boilerplate with Material-UI\n\nFor boilerplate with material-ui, please go to [material-ui branch](https://github.com/shadowwalker/next-electron/tree/material-ui).\n\n## Getting Started\n\n### Install nvm and node.js\n\n**Windows**\n\nDownload [nvm-setup.zip](https://github.com/coreybutler/nvm-windows/releases) and install with installer, then\n\n```cmd\n:: in powershell, install node latest version\nnvm install latest\n\n:: check installation\nnode -v\n\n:: basic usages\nnvm list\nnvm use 10.12.0\n```\n\n\u003e Ref: [nvm-windows](https://github.com/coreybutler/nvm-windows)\n\u003e\n\u003e (Note this is a totally different project from nvm, the latter supports only Mac OS/Linux)\n\n**Mac OS/Linux**\n\nRun following in bash shell\n\n```bash\n# install nvm\ncurl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash\n# install node\nnvm install node\n# check installation\nnode -v\n# basic usages\nnvm ls\nnvm use 10.12.0\n```\n\n\u003e Ref: [nvm](https://github.com/creationix/nvm)\n\n### Install yarn\n\nFollow the [**installation guide**](https://yarnpkg.com/en/docs/install) to install yarn.\n\n## Usage\n\n### Clone/Fork Repository\n\n``` bash\ngit clone https://github.com/shadowwalker/next-electron\ncd next-electron/src\nyarn install\n```\n\n### Understand file tree\n\n``` bash\nsrc\n├── app                    # next.js based app source folder\n│   ├── components         # shared components\n│   │   └── Layout.js      # layout component\n│   ├── next.config.js     # next.js configuration file\n│   ├── pages              # file system path based router (next.js feature)\n│   │   └── index.js\n│   ├── static             # static resources\n│   │   └── img\n│   └── utils              # utilitis\n│       └── static-url.js  # used to generate path for static resources\n├── main                   # used for electron\n│   └── main.js            # start point for electron\n├── package.json           # !change meta data to your own\n├── res                    # resources used when package apps\n│   └── icons\n├── script\n│   └── clean.js           # maintain scripts\n├── test\n└── yarn.lock\n```\n\n### Develop\n\n``` bash\nyarn start\n```\n\nThis will start a next server on [http://localhost:3000](http://localhost:3000), and open the main window in `main/main.js`.\n\nNow every change made within `app` folder will be rendered in the main window immediately, that's because Next.js packed with hot reloading feature for you.\n\nJust build Next.js application as usual under `app` folder, it will hot reload for you.\n\nIf you need to change anything related to Electron, such as changing window size, do it in `main` folder and do a `yarn start` again.\n\n**In case you are**\n\n- new to JavaScript: [The Modern JavaScript Tutorial](https://javascript.info/)\n- new to Node.js: [Node School](https://nodeschool.io/)\n- new to React.js: [React Tutorial](https://reactjs.org/tutorial/tutorial.html)\n- new to Next.js: [Learn Next.js](https://nextjs.org/learn/)\n- new to Electron.js: [Electron API Demos](https://github.com/electron/electron-api-demos)\n- still confused: there are bunch of good materials out there waiting for you to explore\n\n\u003e All the materials listed above is **highly recommended**, at least they helped me a lot to learn those things quickly and easily.\n\n### Release\n\n``` bash\nyarn release-mac\nyarn release-windows\nyarn release-linux\n```\n\nThis will first export app into `public` folder then build the packages in `dist` folder based on the platform you choose. Each command above should be run under their own environment.\n\nI know it would be charming to have a `yarn release` to build every platform at once. But the result is not idea even it could. See\n\n\u003e  [*Don’t expect that you can build app for all platforms on one platform*](https://www.electron.build/multi-platform-build)\n\nBasically, if you don't have a windows machine (or VM), don't assume the package built on mac would have proper behaviour on a customer windows enviroment. You always want to test it on windows before shipping out.\n\n### Clean\n\n``` bash\nyarn clean\n```\n\n## Bonus\n\n### Add .gitignore\n\nUse [add-gitnore](https://github.com/TejasQ/add-gitignore) to generate `.gitignore` file, which use [gitignore.io](https://www.gitignore.io/) web service\n\n``` bash\nnpx add-gitignore\n```\n\n### Atom ignored names\n\nAppend following to `Atom Settings -\u003e Ignored Names ` for better searching\n\n```bash\nnode_modules, .next, _next\n```\n\n### Avoid using global jsx for style\n\n``` JavaScript\n\u003cstyle global jsx\u003e{`\n    body {\n        margin: 0;\n        overflow: hidden;\n    }\n`}\u003c/style\u003e\n```\n\nThis global style jsx should be rarely used, I found this will cause inconsistent behaviour in hot reloading.\n\n## Reference\n\n- [The Modern JavaScript Tutorial](https://javascript.info/)\n\n## License\n\n[MIT](https://choosealicense.com/licenses/mit/)\n\n## Thanks\n\nThis project is inspired by the following works\n\n- [Building Electron Apps with Next.js](https://leo.im/2017/electron-next)\n\nApp icons borrowed from\n\n- [electron/electron-api-demos](https://github.com/electron/electron-api-demos/tree/master/assets/app-icon)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshadowwalker%2Fnext-electron","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshadowwalker%2Fnext-electron","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshadowwalker%2Fnext-electron/lists"}