grizlizli / ng-goes-native

Complete setup for developing multi platform solutions with Angular, NativeScript and Electron.JS

ng-goes-native

One Framework To Rule Them All

Complete setup for developing multi platform solutions with Angular, NativeScript and Electron.JS

Motivation

• Business logic is platform independant
• Using familiar technology
• Having the native experience

Setup

Generating The Shared Angular & NativeScript project

This project was generated with Angular CLI version 6.1.0 with NativeScript schematics included. Shared flag transforms the project to shared Angular & NativeScript project.

ng new --collection=@nativescript/schematics --style=scss --shared <appname>

More about Angular Schematics can be found on the Angular Docs page.

More on using the NativeScript Angular Schematics.

Adding the Electron.JS Dev Dependency

Electron.JS is an Open Source Framework for creating native applications with web technologies like JavaScript, HTML, and CSS. It takes care of the hard parts so you can focus on the core of your application.

npm install electron --save-dev

Also, the electron-packager is added as a Dev Dependency as we are going to use it as a Application Distribution tool.

npm install electron-packager --save-dev

And in order to deploy our Electron App, we are going to use this command:

electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]

Adding a service worker to the project

To set up the Angular service worker in your project, use the CLI command ng add @angular/pwa. It takes care of configuring your app to use service workers by adding the service-worker package along with setting up the necessary support files.

ng add @angular/pwa

Also, for testing our PWA app, we'll need some HTTP Server.

npm install lite-server --save-dev

After that, we'll need to build our app.

ng build --prod

And then we can start our local HTTP server.

lite-server --baseDir=dist/<appname>