Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/darkguy10/nextjs-electron-boilerplate
A boilerplate for building desktop apps with Electron and NextJS.
https://github.com/darkguy10/nextjs-electron-boilerplate
boilerplate electron electron-app electron-boilerplate electron-builder electron-next electron-next-boilerplate electronjs nextjs nextjs14 template typescript
Last synced: 4 days ago
JSON representation
A boilerplate for building desktop apps with Electron and NextJS.
- Host: GitHub
- URL: https://github.com/darkguy10/nextjs-electron-boilerplate
- Owner: DarkGuy10
- License: mit
- Created: 2023-06-05T09:10:27.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-12T16:44:49.000Z (4 months ago)
- Last Synced: 2024-12-18T06:06:43.339Z (4 days ago)
- Topics: boilerplate, electron, electron-app, electron-boilerplate, electron-builder, electron-next, electron-next-boilerplate, electronjs, nextjs, nextjs14, template, typescript
- Language: TypeScript
- Homepage:
- Size: 4.31 MB
- Stars: 60
- Watchers: 2
- Forks: 15
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
「NextJS + Electron Boilerplate」
Features
·
Setting Up
·
Documentation
·
License
A neat and highly flexible boilerplate for building cross-platform apps with Electron at the core and NextJS serving as the frontend. The template is pre-configured with a bunch of handy tools to ease out development process. Plus, Typescript is supported from the get-go!
### ✨ Features
- Pre-configured with [Storybook](https://storybook.js.org/), Eslint, [Prettier](https://prettier.io/) and [Electron Builder](https://www.electron.build)
- [SVGR](https://react-svgr.com/) pre-installed and configred for easily using SVGs as React components
- Pre-configured CI/CD workflows through github actions
- Binaries support auto-updates by default
- Typescript and ESModules supported by default
- Import aliases supported for both main and renderer processes
- Completely flexible, transparent and customizable structure
- Intuitive structure to avoid messy codebase
- Documented npm scripts
> [!TIP]
> [Nextron](https://github.com/saltyshiomix/nextron) has been around for long, and has developed quite the userbase (2.8k stars as of writing). Therefore, its a very valid question: why not just use Nextron?
> And the only valid answer is: _flexibiliy_.
> With Nextron, there's a limit to how much you can tweak your code, and it might actually be a plus point if you want to focus on getting a basic app done.
> However, if you're like me, and you like having full control of your project, and not being at the mercy of a third-party project mantainer, then welcome aboard mate—this is just the thing you were searching for!
### 🚀 Setting Up
This repo is a public template and you can easily use it create a new repo. A bit about that in [this article](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-repository-from-a-template).
Once you're done, just clone _your_ repo (not this template) and install the dependencies (with `yarn install`) to get started
### 📚 Documentation
#### 📂 Structure
```
.
├── assets
│ ├── icon.icns
│ ├── icon.ico
│ └── icon.png
├── backend
│ ├── main.ts
│ ├── preload.ts
│ ├── README.md
│ ├── tsconfig.json
│ └── .eslintrc.json
├── frontend
│ ├── app
│ │ ├── assets
│ | │ ├── edit.svg
│ | │ └── menhera.png
│ │ ├── favicon.ico
│ │ ├── globals.css
│ │ ├── layout.tsx
│ │ ├── page.module.css
│ │ └── page.tsx
│ ├── context.d.ts
│ ├── .eslintrc.json
│ └── tsconfig.json
├── next.config.js
├── electron-builder.yml
├── package.json
├── README.md
└── yarn.lock
```
- `assets/`: Contains app icons used during run and build times.
- `backend/`: This is where your electron main processes reside.
- `frontend/`: This is where your NextJS app lives.
- `next.config.js`: NextJS config file.
- `electron-builder.yml`: Electron builder config file.
There's more information about `frontend` and `backend` parts in the README files in their respective directories.
#### 💻 Scripts
You can run these scripts from your terminal using
```
yarn
```
start
Starts the app in development mode
lint
Checks for code styling issues with prettier, also runs eslint on backend and frontend
lint:fix
Formats code with prettier (write mode)
storybook
Starts the Storybook dev server
build
Builds the electron app (the `lint` script is auto-executed before building)
frontend:dev
Starts the NextJS development server
frontend:lint
Runs eslint only on the `frontend/` directory
frontend:build
Builds only the frontend NextJS app to `frontend/build/` directory
backend:lint
Runs eslint only on the `backend/` directory
backend:build
Transpiles the backend code to `backend/build/` directory
### 📜 License
This repository is released under the MIT license, which grants the following permissions:
- Commercial use
- Distribution
- Modification
- Private use
For more convoluted language, see the [LICENSE](https://github.com/darkguy10/NextJS-Electron-Boilerplate/blob/main/LICENSE.md).
### 📖 References
Inspirations taken from the famous [React+Electron Boilerplate](https://github.com/electron-react-boilerplate/electron-react-boilerplate) repo.