「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, 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	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.

 

📖 References

Inspirations taken from the famous React+Electron Boilerplate repo.