github.com/DarkGuy10/NextJS-Electron-Boilerplate @v3.1.0

「NextJS + Electron Boilerplate」

Features · Setting Up · Documentation · License

<a href="https://github.com/darkguy10/NextJS-Electron-Boilerplate/stargazers">
    <img alt="Stargazers" src="https://img.shields.io/github/stars/darkguy10/NextJS-Electron-Boilerplate?style=for-the-badge&logo=starship&color=C9CBFF&logoColor=D9E0EE&labelColor=302D41"></a>
<a href="https://github.com/DarkGuy10/NextJS-Electron-Boilerplate/issues">
    <img src="https://img.shields.io/github/issues/DarkGuy10/NextJS-Electron-Boilerplate?colorA=1e1e28&colorB=bee4ed&logoColor=D9E0EE&logo=gitbook&style=for-the-badge"></a>

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, 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!

🚀 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.

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 <SCRIPT_NAME>

start

lint

lint:fix

storybook

build

frontend:dev

frontend:lint

frontend:build

backend:lint

backend:build

📜 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.

📖 References

Inspirations taken from the famous React+Electron Boilerplate repo.