DEV Community

Cover image for A fresh new Electron app boilerplate
Dalton Menezes
Dalton Menezes

Posted on

10 1

A fresh new Electron app boilerplate

Hi there, I'm back here to introduce you to electron-app, a ready-to-go with a well-thought-out structure Electron app boilerplate with ReactJS, TypeScript, CSS / SASS modules, SWC, Eslint, Prettier and more.

The electron-app boilerplate preview showing two windows

I really spent a lot of time thinking about this structure and tried to make it the way I felt most productive taking the readability and health of both the code and the structure and with features that I didn't find in the current boilerplates available today. That said, here's some information:

Features

  • Stands out
    • πŸ”₯ Ready-to-go with a well-thought-out structure
    • πŸš€β€Auto reload for main and Hot for renderer process
    • πŸŽ‰β€Window and Screen routing included
    • πŸ˜Žβ€Bridge already configured
    • πŸ™€β€IPC communication included
    • πŸͺ Absolute paths supported
  • Technologies
    • πŸ”‹β€Electron
    • πŸ”₯ ReactJS
    • πŸŒŽβ€React Router DOM
    • πŸ§β€React Developer Tools
    • πŸ’™β€TypeScript
    • πŸ“¦β€Webpack
    • βš‘οΈβ€SWC as compiler
    • βœ¨β€CSS / SASS modules
    • πŸ’«β€Eslint / Prettier / EditorConfig / Husky / lint-staged / Commitlint
    • πŸ“¦β€Electron Builder

That's the current structure overview:



src
β”œβ”€β”€ main
β”‚   β”œβ”€β”€ factories
β”‚   β”‚   β”œβ”€β”€ index.ts
β”‚   β”‚   β”œβ”€β”€ ipcs
β”‚   β”‚   β”‚   └── register-window-creation.ts
β”‚   β”‚   β”œβ”€β”€ setup.ts
β”‚   β”‚   └── windows
β”‚   β”‚       └── create.ts
β”‚   β”œβ”€β”€ index.ts
β”‚   └── windows
β”‚       β”œβ”€β”€ About
β”‚       β”‚   β”œβ”€β”€ index.ts
β”‚       β”‚   └── ipcs
β”‚       β”‚       β”œβ”€β”€ index.ts
β”‚       β”‚       └── register-window-creation.ts
β”‚       β”œβ”€β”€ Main
β”‚       β”‚   └── index.ts
β”‚       └── index.ts
β”œβ”€β”€ renderer
β”‚   β”œβ”€β”€ assets
β”‚   β”‚   └── images
β”‚   β”‚       └── illustration.svg
β”‚   β”œβ”€β”€ bridge
β”‚   β”‚   β”œβ”€β”€ index.ts
β”‚   β”‚   └── ipcs
β”‚   β”‚       β”œβ”€β”€ about-window
β”‚   β”‚       β”‚   β”œβ”€β”€ create.ts
β”‚   β”‚       β”‚   └── when-close.ts
β”‚   β”‚       └── index.ts
β”‚   β”œβ”€β”€ components
β”‚   β”‚   β”œβ”€β”€ Button
β”‚   β”‚   β”‚   β”œβ”€β”€ index.tsx
β”‚   β”‚   β”‚   └── styles.module.sass
β”‚   β”‚   β”œβ”€β”€ Container
β”‚   β”‚   β”‚   β”œβ”€β”€ index.tsx
β”‚   β”‚   β”‚   └── styles.module.sass
β”‚   β”‚   β”œβ”€β”€ Heading
β”‚   β”‚   β”‚   β”œβ”€β”€ index.tsx
β”‚   β”‚   β”‚   └── styles.module.sass
β”‚   β”‚   └── index.ts
β”‚   β”œβ”€β”€ index.html
β”‚   β”œβ”€β”€ index.tsx
β”‚   β”œβ”€β”€ routes
β”‚   β”‚   β”œβ”€β”€ index.tsx
β”‚   β”‚   └── modules
β”‚   β”‚       └── index.tsx
β”‚   β”œβ”€β”€ screens
β”‚   β”‚   β”œβ”€β”€ About
β”‚   β”‚   β”‚   β”œβ”€β”€ index.tsx
β”‚   β”‚   β”‚   └── styles.module.sass
β”‚   β”‚   β”œβ”€β”€ Another
β”‚   β”‚   β”‚   └── index.tsx
β”‚   β”‚   β”œβ”€β”€ Main
β”‚   β”‚   β”‚   └── index.tsx
β”‚   β”‚   └── index.ts
β”‚   β”œβ”€β”€ store
β”‚   β”‚   └── index.tsx
β”‚   └── styles
β”‚       β”œβ”€β”€ animations.sass
β”‚       β”œβ”€β”€ globals.sass
β”‚       └── resets.sass
β”œβ”€β”€ resources
β”‚   └── icons
β”‚       β”œβ”€β”€ icon.icns
β”‚       └── icon.ico
└── shared
    β”œβ”€β”€ constants
    β”‚   β”œβ”€β”€ environment.ts
    β”‚   β”œβ”€β”€ index.ts
    β”‚   β”œβ”€β”€ ipc.ts
    β”‚   └── platform.ts
    β”œβ”€β”€ index.ts
    └── types
        └── index.ts


Enter fullscreen mode Exit fullscreen mode

What do you think? If you are interested, you can access the boilerplate GitHub repository where there is more information on how to use it, such as creating windows and taking advantage of factories already available, about routing and more.

Thanks πŸ’œ

Top comments (1)

Collapse
 
buchslava profile image
Vyacheslav Chub β€’

Looks good!

Postgres on Neon - Get the Free Plan

No credit card required. The database you love, on a serverless platform designed to help you build faster.

Get Postgres on Neon

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay