A simple kit for Electron, Angular 6 and Webpack 4 including a live reload system for Angular
The boilerplate include loaders for TypeScript and Sass
Commands are available to package your app or create installer on Windows, Mac and Linux
Feel free to take a look at the boilerplate skeleton here
Be sure to have Node >= 8.0 and NPM >= 5 installed on your computer/server
You can download NodeJS by following this link, take the LTS version. The installer will install Node and Npm.
# check node version
node -v
# check npm version
npm -vIf you are confronted to the following error while executing our commands on Mac OS :
ERROR in {project_name}/image.jpg
Module build failed: Error: dyld: Library not loaded: /usr/local/opt/libpng/lib/libpng16.16.dylib
Referenced from: /Users/{project_name}/node_modules/mozjpeg/vendor/cjpeg
Reason: image not found Please run this command : brew install libpng. See issue here.
# clone via ssh
git clone [email protected]:lbassin/electron-angular-webpack.git
# or clone via https
git clone https://github.com/lbassin/electron-angular-webpack.git
# change directory to the app
cd electron-angular-webpack
# install dependencies with npm
npm install| Command | Description |
|---|---|
npm run dev |
Execute the app with a live reload system and source mapping |
npm run prod |
Build the app with css/js optimizations and minifications |
npm run packager:win |
Package the app with prod configuration and generate .exe & supporting files |
| ↳ Default configuration : Platform Win32, Arch x64 | |
npm run packager:mac |
Package the app with prod configuration and generate .app & supporting files |
| ↳ Default configuration : Platform Darwin, Arch x64 | |
npm run packager:linux |
Package the app with prod configuration and generate executable & supporting files |
| ↳ Default configuration : Platform Linux, Arch x64 | |
npm run installer:win |
Create Squirrel installer to distribute your app easily |
| ↳ Setup.exe will install app in app_data directory | |
| ↳ A desktop shortcut will be created | |
| ↳ Default configuration : Platform Win32, Arch x64 ~ Tested on Windows 10 | |
npm run installer:mac |
Create DMG installer to distribute your app easily |
| ↳ Require XCode and XCode Command Line Tools | |
↳ XCode licence must be accepted : sudo xcodebuild -license accept |
|
| ↳ Default configuration : Platform Darwin, Arch x64 ~ Tested on High Sierra 10.13 | |
npm run installer:linux |
Create DEB installer to distribute your app easily |
| ↳ Default configuration : Platform Linux, Arch x64 ~ Tested on Ubuntu 16.04 |
- To change the default configuration of packagers and/or installers :
- Go to
./builder/packager.jsand/or./builder/installer.js - Edit
spec['platform']and/orspec['arch']calls in the switch - You can add your own platform and arch in the object
specbut refer to this doc
- Go to
electron-angular-webpack/
├──builder/ # packagers and installers config folder
│ ├──icons/ # multi os app icons
│ │ ├──linux/ # app icon folder for linux
│ │ │ └──icon.png ~ must be a png
│ │ ├──mac/ # app icon folder for mac
│ │ │ └──icon.icns ~ must be a icns
│ │ └──windows/ # app icon folder for windows
│ │ └──icon.ico ~ must be a ico
│ │
│ ├──installer.js ~ config file for installers
│ │
│ └──packager.js ~ config file for packagers
│
├──src/ # angular app folder
│
├──.gitignore ~ untracked files to ignore
├──LICENSE.md ~ license of this project
├──README.md ~ contains information about this project
├──electron.ts ~ entry file for Electron
├──package-lock.json ~ describes the exact tree that was generated by node/npm (vers. > 8)
├──package.json ~ manifest about applications, modules, packages, and more
├──postcss.config.js ~ postcss loader configuration file
├──tsconfig.json ~ specifies root files and compiler options required to compile
└──webpack.config.js ~ webpack main configuration file
In addition to this structure, our commands will create these elements :
.
├──dist/ # compiled code/library
│
├──node_modules/ # non-global libraries are installed here
│
├──mac_packager/ # packager folder for mac (removed after npm run installer:mac)
├──mac_installer/ # installer folder for mac
│
├──linux_packager/ # packager folder for linux (removed after npm run installer:linux)
├──linux_installer/ # installer folder for linux
│
├──win_packager/ # packager folder for windows (removed after npm run installer:win)
└──win_installer/ # installer folder for windows
 |
 |
|---|---|
| Laurent BASSIN | Maxime MARQUET |
  |
|
 |
|---|
| Nhữ Bảo Vũ |
MIT © Laurent BASSIN & Maxime MARQUET
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent