Skip to content

Latest commit

 

History

History
180 lines (146 loc) · 6.33 KB

README.md

File metadata and controls

180 lines (146 loc) · 6.33 KB
Raw

capybara
「NextJS + Electron Boilerplate」

Features · Setting Up · Documentation · License

Stargazers Releases

 

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.