This repository contains a simple "get started" project, which you can clone/download in order to create your own electron application. In this project you can find all the nessesary libraries inside package.json to help you get started with React and Typescript, but also additional libraries, for building your project and adding automatic updates.
Furthermore, all personalized configuration has been removed from this project, so that you can add your own. Areas where you need to insert your own details can be found with UPPERCASE_VALUES_IN_PACKAGE_JSON.
This electron project comes with the following features:
- React
- Typescript
- CSS Modules
- SASS Styles
- SCSS Styles
- Electron Auto-Reload (Implemented)
- Electron Auto-Update (Implemented / Commented out)
- Electron Build (Structure for configuration / Requires personalized values)
- Production ready
Getting started with this project is very simple, first you need to download this project on your local device and from there, follow the steps below.
- Run
npm installornpm iinside your project directory (useyarn installif you are using yarn as a pm). - Open package.json fill in all the missing details (remove fields if not needed, this is based on your preferences and the app you are building).
- Run
npm run watchto create the javascrpt bundle from the React code, while also having a live update on your app everytime a change is made. - After the bundler.js has been created inside /public/build/ run the project with
npm start. - You should see an electron window show up with "Hello World" displayed in HTML.
- Happy hacking!
This project comes with a variety of libraries inside package.json, and other file settings, some of which you may not need to your project. You can simply uninstall them with npm uninstall <package-name> or you can remove them from the list before executing npm install.
In the project files, you will see there are 2 main files for electron called main-dev.json and main-prod.json. These 2 files are configured accordingly for development and production. Inside the development version, you will see that DevTools are enabled, and electron-reload library is used for automatically reloading on save. On the other hand, inside the production version, you can see that electron-reload is removed from the code, DevTools are disabled and the menu is hidden. There are also methods and flags added for the auto-update feature to your electron app (these are commented out).
Required values that need to be changed, if your are planning on building and adding update functionality to your application. Anything you are not using you can simply remove from the package.json file.
| Location | Name | Current Value | Description |
|---|---|---|---|
| Line 3 | displayName | DISPLAY_NAME_HERE | The display name of your application. |
| Line 5 | description | APP_DESCRIPTION_HERE | The description of your application. |
| Line 14 | repository.url | REPO_URL_HERE | The repository url of your project (e.g. Github) |
| Line 27 | productName | PRODUCT_NAME_HERE | The name of your product. This name will be displayed as your application. |
| Line 32 | icon | ICON_PATH_HERE | The location of your application icon. |
| Line 36 | installerIcon | INSTALLER_ICON_PATH_HERE | The location of your installer icon. |
| Line 37 | uninstallerIcon | UNINSTALLER_ICON_PATH_HERE | The location of your uninstaller icon. |
| Line 38 | uninstallDisplayName | UNINSTALLER_NAME_HERE | The name of your application's uninstaller. |
| Line 45 | author | AUTHOR_NAME_HERE | Your name or your organization name. (e.g. the developer's name) |
| Line 48 | bugs.url | HTTPS:YOUR_REPO_ISSUES_URL_HERE | The bug URL for your application (e.g. Github Issues) |
| Line 50 | homepage | YOUR_REPO_README_URL | The homepage of your application (e.g. Github readme.md) |
You can change everything on the package.json, however, if you want to keep the functionality similar here are the main optional values you should change, unique for your application.
| Location | Name | Default | Description |
|---|---|---|---|
| Line 2 | name | my-app | The project name. |
| Line 4 | version | 1.0.0 | The version of your application. |
| Line 6 | main | main-dev.js | You can choose `main-dev.js` or `main-prod.js` |
| Line 21 | build.appId | com.example.app | The application ID of your product. |
| Line 22 | build.files | ["main-prod.js", "public/", "config/"] | The files to be included in the build version. |
In the /public/ folder there are 2 files by default: ./index.html and ./style.css. It is not recommended to change the HTML file as that is the root of the project, however you can make any changes to the styles file.
By default the styles have user-select: none !important; and -webkit-user-drag: none !important;. These properties ensure users cannot select text or content on your application nor drag images or text around.
In addition, there are global properties for customizing the scrollbars on your application, if you wish to leave them as default, either remove them completely or leave empty.
When creating components, ensure you always add import React from 'react'; on the top of the file, this will allow you to use JSX. The file should be named with .tsx in the end. Everything else is exactly the same as any react project.
Tutorial: https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/