All Projects → Devtography → Electron React Typescript Webpack Boilerplate

Devtography / Electron React Typescript Webpack Boilerplate

Licence: mit
Pre-configured boilerplate for Electron + React + TypeScript + Webpack

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects
ts
41 projects

Projects that are alternatives of or similar to Electron React Typescript Webpack Boilerplate

Snappy
snAppy is a VS Code extension coupled with an interactive view to support your React front-end delivery.
Stars: ✭ 144 (-1.37%)
Mutual labels:  webpack, vscode
Micropy Cli
Micropython Project Management Tool with VSCode support, Linting, Intellisense, Dependency Management, and more!
Stars: ✭ 112 (-23.29%)
Mutual labels:  vscode, visual-studio-code
Vscode Numbered Bookmarks
Numbered Bookmarks Extension for Visual Studio Code
Stars: ✭ 90 (-38.36%)
Mutual labels:  vscode, visual-studio-code
Alias Hq
The end-to-end solution for configuring, refactoring, maintaining and using path aliases
Stars: ✭ 77 (-47.26%)
Mutual labels:  webpack, vscode
Vscode Elastic
Elasticsearch for VSCode
Stars: ✭ 130 (-10.96%)
Mutual labels:  vscode, visual-studio-code
Laravel Blade Snippets Vscode
Laravel blade snippets and syntax highlight support for Visual Studio Code
Stars: ✭ 80 (-45.21%)
Mutual labels:  vscode, visual-studio-code
Openfolderinvscode
With this macOS service, you can quickly open any given folder as a project in Visual Studio Code from the Finders context menu.
Stars: ✭ 105 (-28.08%)
Mutual labels:  vscode, visual-studio-code
Docker Vscode
A Docker Image with Visual Studio Code + Dotnet CLI + NPM + Emacs + More!
Stars: ✭ 64 (-56.16%)
Mutual labels:  vscode, visual-studio-code
Vscode Scss
🔌 IntelliSense for Variables, Mixins and Functions in all Sass (SCSS syntax only) files.
Stars: ✭ 128 (-12.33%)
Mutual labels:  vscode, visual-studio-code
Vscode Go
Go extension for Visual Studio Code
Stars: ✭ 2,268 (+1453.42%)
Mutual labels:  vscode, visual-studio-code
Alfred Open With Vscode Workflow
Alfred 3 workflow for opening files or folders in Visual Studio Code.
Stars: ✭ 74 (-49.32%)
Mutual labels:  vscode, visual-studio-code
Vscode Mjml
This repo is archived. MJML preview, lint, compile for Visual Studio Code.
Stars: ✭ 138 (-5.48%)
Mutual labels:  vscode, visual-studio-code
Vscode Ts Webpack Node Debug Example
VSCode TypeScript Webpack Node Debug Example
Stars: ✭ 66 (-54.79%)
Mutual labels:  webpack, vscode
Vscode Great Icons
🆚 A big pack of icons (100+) for your files
Stars: ✭ 88 (-39.73%)
Mutual labels:  vscode, visual-studio-code
Vscode Git Semantic Commit
💬 A Visual Studio Code extension which enables to commit simply by the semantic message conventions
Stars: ✭ 65 (-55.48%)
Mutual labels:  vscode, visual-studio-code
Vscode Code Runner
Code Runner for Visual Studio Code
Stars: ✭ 1,332 (+812.33%)
Mutual labels:  vscode, visual-studio-code
Ansible Role Visual Studio Code
Ansible role for installing the Visual Studio Code IDE
Stars: ✭ 58 (-60.27%)
Mutual labels:  vscode, visual-studio-code
Vscode Csscomb
🔌 VS Code plugin for CSScomb — CSS coding style formatter.
Stars: ✭ 63 (-56.85%)
Mutual labels:  vscode, visual-studio-code
Vscode Language Pascal
Pascal language extension for Visual Studio Code
Stars: ✭ 117 (-19.86%)
Mutual labels:  vscode, visual-studio-code
Vscode Auto Close Tag
Auto Close Tag for Visual Studio Code
Stars: ✭ 132 (-9.59%)
Mutual labels:  vscode, visual-studio-code

Electron-React-TypeScript-Webpack-Boilerplate

Pre-configured Electron.js + React.js + TypeScript boilerplate with Webpack v5 & linters config predefined.

This boilerplate currently works on macOS and Windows. If something doesn't work, please file an issue.

Getting started

// execute
git clone https://github.com/iamWing/electron-react-typescript-base-proj.git
// edit the following fields in package.json for your own project
{
  "name": your-project-name,
  "version": whatever-you-like,
  "description": your-own-description,
  "build": {
    "appId": your-app-id,
    "productName": your-product-name,
    "buildVersion": your-build-number
  },
  "author": who's-the-author?,
  "license": if-you-don't-want-to-use-MIT,
  "repository": type-and-link-of-your-repo,
  "keywords": keywords-of-your-project,
  "bugs": issue-page-of-your-repo,
  "homepage": homepage-of-your-repo
}

Then install all the node_modules needed by executing the following command:

cd folder-containing-the-cloned-boilerplate
npm install --also-dev

Finally execute the following command to start Webpack in development mode and watch the changes on source files for live rebuild on code changes.

npm run dev

The npm run dev command won't start your app and get your app shows on the screen. To start your app, execute the following command:

npm start

Building the installer for your Electron app

The boilerplate is currently configured to package & build the installer of your app for macOS & Windows using electron-builder.

For macOS, execute:

npm run prod
npm run build:mac

For Windows, execute:

npm run prod
npm run build:win

asar archiving may cause errors while running the installed Electron app based on pervious experiences, whereas the macOS build with asar enabled works just fine. You can turn it off by changing asar to false in package.json line 26.

Extra options

The build scripts are pre-configured to build 64 bit installers since 64 bit should be the standard for a modern applications. 32 bit builds are still possible by changing the build scripts in package.json as below:

// from
"scripts": {
    ...
    "build:win": "electron-builder build --win --x64",
    "build:mac": "electron-builder build --mac --x64"
},

// to
"scripts": {
    ...
    "build:win": "electron-builder build --win --ia32",
    // Works only on macOS version < 10.15
    "build:mac": "electron-builder build --mac --ia32"
},

Builds for Linux, armv71, and arm64 can also be configured by modifying the build scripts in package.json, but those aren't tested yet. For details, please refer to documents of electron-builder.

Known issues

  1. As Apple introduced the notarization requirements with the public release of macOS 10.14.5, apps built for macOS are now needed to be signed with a valid Developer ID certificate and let Apple notarizes it for you. This boilerplate doesn't include the notarization setup as of the 3.0.0 release, but up until now, you should still be able to run your Electron app by allowing your app to be opened in System Preferences -> Security & Privacy -> General without notarizing it for still (tested on macOS 11.1).

    If you want to notarization your app using this boilerplate before those settings are included in the future updates, you can try follow the guides on issue electron-builder #3870.

  2. [email protected] added Apple Silicon and universal binary supports, but it's still a pre-release instead of a stable one so the one included in this boilerplate is still staying on 22.9.1 which doesn't support building the universal binary yet.

Folder structure

electron-react-typescript-base-proj/
| - dist/               //- Generated by Webpack automatically
| - node_modules/
| - out/                //- Generated by build script automatically
| - public/             //- Global static assets
| | - index.html
| | - style.css
| - src/
| | - main/             //- Backend modules for the Electron app
| | | - main.ts         //- Entry point of 'electron-main'
| | - models/
| | - renderer/         //- Frontend React components for the Electron app
| | | - renderer.tsx    //- Entry point of 'electron-renderer'
| | - utils/            //- Common utilities
| - test/               //- Unit tests
| - .eslintrc           //- ESLint config
| - .gitignore
| - package-lock.json
| - package.json
| - tsconfig.json       //- TypeScript config
| - webpack.config.js   //- Webpack config

Author

Wing Chau @Devtography

Donation

I do this open source work for free in my free time. If you'd like me to invest more time on it, please consider give me some donations. Any donation is gonna be a great motivation for me.

License

Electron React TypeScript Webpack Boilerplate is open source software licensed as MIT.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].