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!
- Pre-configured with Storybook, Eslint, Prettier and Electron Builder
- SVGR 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 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!
This repo is a public template and you can easily use it create a new repo. A bit about that in this article.
Once you're done, just clone your repo (not this template) and install the dependencies (with yarn install) to get started
.
├── 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.
You can run these scripts from your terminal using
yarn <SCRIPT_NAME>
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 |
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.
Inspirations taken from the famous React+Electron Boilerplate repo.