https://github.com/developer239/react-electron-typescript-webpack

JavaScript meets desktop. Electron ⚡️ with your favourite frontend libraries: React, StyledComponents, Webpack and Typescript. Build process for common operating systems included.
https://github.com/developer239/react-electron-typescript-webpack

Last synced: 9 months ago
JSON representation

JavaScript meets desktop. Electron ⚡️ with your favourite frontend libraries: React, StyledComponents, Webpack and Typescript. Build process for common operating systems included.

• Host: GitHub
• URL: https://github.com/developer239/react-electron-typescript-webpack
• Owner: developer239
• Created: 2018-01-15T17:13:14.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-11T08:21:07.000Z (about 3 years ago)
• Last Synced: 2025-04-01T07:22:32.637Z (10 months ago)
• Language: JavaScript
• Homepage:
• Size: 20.7 MB
• Stars: 13
• Watchers: 1
• Forks: 1
• Open Issues: 24
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
[![TypeScript](https://badges.frapsoft.com/typescript/version/typescript-next.svg?v=101)](https://www.typescriptlang.org/)

# React Electron Typescript Webpack

 Javascript meets desktop. Electron with your favorite frontend libraries: react and styled-components.

 

 Build process for common operating systems is included.

 

 ## Development

 

 Project file system should be self explanatory. Both **main and renderer process files are compiled by webpack and watched**.

 

 However if you need to have more than 1 renderer window then things become more complicated.

 

 1) import all windows files in `src/main/index.ts`

 2) create webpack config in `webpack/renderer` (use `webpack/renderer/main` as template)

 3) change scripts in `package.json` accordingly

 

 It would be interesting to create this setup dynamic so that it would support `n` windows. However, after finishing it I am honestly not sure if `typescript` + `webpack` + `electron` is a good idea. 🤔 `babel` and `nodemon` would probably make all of this easier.

 

 ## Useful Commands

 #### Development

 - `yarn start-renderer:dev` start webpack dev server and watch renderer files changes

 - `yarn start-main:dev` start nodemon and watch main process file changes

 #### Deployment

 - `yarn build` build static javascript files

 - `yarn dist` generate release distribution files

 - `yarn start` start electron and use production static javascript files

 #### Code Quality Tools

 - `yarn lint:ts` lint TS files

 - `yarn lint:css` lint CSS

 

 ## Known Issues 

  - Installing `electron@5` [breaks webpack-dev-server](https://github.com/electron/electron/issues/17208#event-2176872582).