Collection of web developer utilities
Some screen captures of the implemented features...
The app has been deployed and you can test it right here!. Whenever a feature is only available under Electron the UI element will be disabled or a corresponding popup message will be displayed. But most of the time we will try to make the feature available online.
Since most of the features don't need to access desktop capabilities, Electron is actually not absolutely required. However, having a desktop application gives nice things like:
- global OS shortcuts
- dedicated OS window
- ability to select exactly where a file will be stored whenever the SPA offers a
Save As...button - etc.
Again feel free to try out the online demo before trying to package the Electron app for your platform :-) since you will enjoy:
- live updates
- usage as a progressive web app (PWA)
- or just add bookmark(s) to the specific feature(s) of the app you use the most
The following installers (may be old release in some cases) are available under releases folder:
- Windows:
releases/Web Toolbox Setup <version>.exe - Linux:
releases/Web Toolbox-<version>.AppImage - MacOS:
releases/Web Toolbox-<version>.dmg
To build a desktop version just get the source code and run the following command, which will package the installers for all the platforms:
npm install -g yarn
npm install
npm run electron:build:all
This creates the following installers:
- Windows:
build/Web Toolbox Setup <version>.exe - Linux:
build/Web Toolbox-<version>.AppImage - MacOS:
build/Web Toolbox-<version>.dmg
This project is originaly a fork of React-TypeScript-Electron sample with Create React App and Electron Builder
Also bootstrapped with Create React App with --typescript option. On the top of it, the following features have been added with relatively small changes:
- TypeScript supports for
Electronmain process source code - Hot-reload support for
Electronapp ElectronBuilder support
my-app/
├── package.json
│
## render process
├── tsconfig.json
├── public/
├── src/
│
## main process
├── electron/
│ ├── main.ts
│ └── tsconfig.json
│
## build output
├── build/
│ ├── index.html
│ ├── static/
│ │ ├── css/
│ │ └── js/
│ │
│ └── electron/
│ └── main.js
│
## distribution packges
└── dist/
├── mac/
│ └── my-app.app
└── my-app-0.1.0.dmgRuns the Electron app in the development mode.
The Electron app will reload if you make edits in the electron directory.
You will also see any lint errors in the console.
Builds the Electron app package for production to the dist folder.
Your Electron app is ready to be distributed!
CHANGELOG generation powered by Conventional Commits. Detail here: https://www.npmjs.com/package/standard-version
- CSV Viewer, see this nice wrapper for displaying CSV data in a formatted table
- Code snippets online store with text search capabilities on keywords and programming language type
- Suggests something or add your pull request!
This project is licensed under the MIT license. For more information see LICENSE.md.
- electron/electron#7300
- https://askubuntu.com/a/935249/990301 (to setup *.AppImage in Ubuntu and make it auto discoverable inside your ~/.local/bin/ folder)
- https://stackoverflow.com/questions/41551110/unable-to-override-app-name-on-mac-os-electron-menu
- https://apple.stackexchange.com/a/385074/364767
- https://www.electron.build/icons
- https://cloudconvert.com/png-to-icns
- https://stackoverflow.com/a/8684009/704681
- https://stackoverflow.com/a/52409047/704681
- https://omakoleg.gitlab.io/posts/spa-image-base64-react/
- https://stackoverflow.com/questions/53028778/how-to-show-build-datetime-on-my-react-web-app-using-create-react-app