Git Product home page Git Product logo

angular2-electron-boilerplate's Introduction

Angular2 Electron Boilerplate

A boilerplate for using Angular2 to create multi-platform desktop apps in Electron. Currently runs with:

  • Angular v4.0.0
  • Angular-CLI v1.0.0
  • Electron v1.6.2
  • Electron-Packager v8.6.0

This app gives you the capability to:

  • Run Angular2 in a local development environment in Electron
  • Package your application into apps that run on Mac, Windows and Linux
  • Build installers that run on Mac and Windows

System requirements

  • Global installs of Node.js (prfererably lastest v6.10.1), npm (preferably latest v3.10.10), @angular/cli (preferably latest v1.0.0), Electron (preferably latest v1.6.2) and Electron-Packager.

Getting Started

Clone this repository locally:

git clone https://github.com/stokingerl/Angular2-Electron-Boilerplate.git

Install dependencies:

npm install

Build angular2 code and run current app locally (DOES NOT CURRENTLY DO HOT RELOAD):

npm start

This should pop up your Angular2 in Electron:

Demo

To be able to use Developer tools, go to View > Toggle Developer Tools. You should be able to fine all of your Angular2 code in the 'webpack' section of 'sources'.

Included Commands

  • npm run build-electron - builds your Angular2 app and throws the result as well as your electron main.js file into the dist folder
  • npm start - runs npm run build-electron and starts your app in electron by running main.js
  • npm run package-mac - builds your application and generates a .app file of your application that can be run on mac. NOTE: I am like 99% sure you need to be on a MAC OS machine to be able to run this.
  • npm run package-windows - builds your application and creates an app consumable in windows 32 bit systems. NOTE: If you build this on MAC OS or linux you need wine installed, which can be installed with brew install wine
  • npm run package-linux - builds your application and creates an app consumable on linux systems.
  • npm run full-build-mac - creates a .dmg installer for mac platforms.
  • npm run full-build-windows - creates an installer for windows platforms.

Electron

This app is run with a simple Electron window. The code for this is managed at /src/electron/main.js and any configuration can be altered there. Check out Electron for more information

Angular-CLI

This project was created intially with @angular/cli version 1.0.0, all angular-cli commands should work with this app. Even if you do ng build and ng serve, you can open the strictly web portion of this app in http://localhost:4200. Check out Angular-CLI for more details.

Build

Run npm run build-electron to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Special thanks and recommendations

This boilerplate would not be possible without these repositories:

Recommended packages:

angular2-electron-boilerplate's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

angular2-electron-boilerplate's Issues

create-installer-windows script error

Hi, great repo!
I am getting some errors when trying to build a windows installer via npm run full-build-windows. It appears to fail on the create-installer-windows script due to a missing createinstaller.js file. Any ideas how to fix this?

npm log

...

> [email protected] create-installer-windows C:\Users\jcortese\source\Angular2-Electron-Boilerplate-master\Angular2-Electron-Boilerplate-master
> node installers/windows/createinstaller.js

module.js:471
    throw err;
    ^

Error: Cannot find module 'C:\Users\jcortese\source\Angular2-Electron-Boilerplate-master\Angular2-Electron-Boilerplate-master\installers\windows\createinstaller.js'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:393:7)
    at startup (bootstrap_node.js:150:9)
    at bootstrap_node.js:508:3

...

Setting allowJs to true does not work

(Hobbyist here)
I get the error:

Module '../module/module.js' was resolved to '/.../src/module/module.js', but '--allowJs' is not set.

even though I have allowJs property set to true in:

src/tsconfig.app.json
src/tsconfig.spec.json
tsfconfig.json

Any pointers?

linux build

First, thanks a lot for this repo. It's very useful.
I'm not an expert of electron yet and I have a question. I cloned and run npm run package-linux
It worked but it generates a lof of files

├── Electron Angular Boilerplate
├── LICENSE
├── LICENSES.chromium.html
├── blink_image_resources_200_percent.pak
├── content_resources_200_percent.pak
├── content_shell.pak
├── icudtl.dat
├── libffmpeg.so
├── libnode.so
├── locales
│   ├── ...
│   └── zh-TW.pak
├── natives_blob.bin
├── pdf_viewer_resources.pak
├── resources
│   ├── app.asar
│   └── electron.asar
├── snapshot_blob.bin
├── ui_resources_200_percent.pak
├── version
└── views_resources_200_percent.pak

How can I have a single app to drag and drop on te desktop?
Thanks

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.