Welcome to your guide on utilizing a powerful and ready-to-go Electron app boilerplate infused with ReactJS, TypeScript, CSS, SASS modules, Electron Vite, ESLint, Prettier, and GitHub Action releases.

Why Choose This Boilerplate?

This Electron boilerplate stands out due to its well-structured components and seamless integration, making it perfect for your next desktop application project. Here are some of its standout features:

• Fast and Ready-to-go with a well-thought-out structure
• Auto reload for main and Fast Refresh for the renderer process
• Includes Window and Screen routing
• Preload (context bridge) already configured
• IPC communication example included
• GitHub Action releases for Windows, Mac, and Linux binaries
• Source Code Protection support
• Absolute paths support

Technologies Used

This boilerplate leverages the power of several technologies:

• Electron
• ReactJS
• React Router DOM and Electron Router DOM
• React Developer Tools
• TypeScript
• Electron Vite
• CSS SASS modules
• ESLint, Prettier, EditorConfig, Husky, lint-staged, Commitlint
• Electron Builder
• action-electron-builder

Note: If support for Windows 7 and 8 is essential for your project, be aware that Electron versions greater than 22x do not support them. You can read more about it here.

How to Get Started

To kickstart your project, follow these steps:

Installation

First, install the dependencies using the command below in your terminal:

yarn

Run Your Project

Once the installation is complete, run the project with:

yarn dev

Additionally, check the package.json file in the root directory to update some settings with your project branding.

Distribution Guide

To build your application for all platforms, use the following command:

yarn build

To build for a specific platform, you can run one of the following commands:

yarn build --mac

yarn build --win

yarn build --linux

The built apps will be located in the dist folder.

Releasing Your App

To facilitate auto-updates, it’s important to have a code-signed app. Make sure to configure this by following the electron-builder documentation and action-electron-builder documentation.

To release your app on GitHub with Windows, Mac, and Linux binaries, run the following commands:

git pull
yarn make:release

When prompted, enter the new version of your app. This process will create binaries in a draft release from the action. The outcomes include:

• Windows: zip (portable), .exe
• Mac: .zip (app), .dmg
• Linux: AppImage, FreeBSD, pacman, rpm, deb

Once the action is triggered, it will open the releases and actions page in your browser. Refresh the page to see the draft release, where you can edit and release it for your users.

Source Code Protection

This is achieved through v8 bytecode compilation. For more information, consult the Electron Vite documentation.

To enable it in your electron.vite.config.ts, include the bytecodePlugin:

import { defineConfig, bytecodePlugin } from 'electron-vite';

export default defineConfig({
    main: {
        plugins: [tsconfigPaths, bytecodePlugin()]
    },
    preload: {
        plugins: [tsconfigPaths, bytecodePlugin()]
    },
    renderer: {
        ...
    }
});

Keep in mind that the warning regarding the use of bytecodePlugin in the preload script during production build is normal. Ensure to keep following the Electron Vite docs for updates about this plugin!

Troubleshooting Tips

If you run into any issues, here are some troubleshooting ideas:

• Make sure all dependencies are correctly installed and up-to-date. Run yarn install to verify.
• Check for conflicting versions of any libraries in your package.json.
• Refer to the respective documentation linked earlier for more detailed setup instructions or configuration adjustments.
• If persistent issues arise, consider reaching out to the community or consult expert developers.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

This robust Electron app boilerplate serves as a fantastic starting point for your desktop application development. Utilizing ReactJS and TypeScript streamlines the creation of dynamic user interfaces while maintaining strong performance.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.