Skip to content
Complete setup for developing multi platform solutions with Angular, NativeScript and Electron.JS
JavaScript TypeScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
App_Resources
src
.gitignore
README.md
angular.json
main.ts
nsconfig.json
one_ring_to_rule_them_all.gif
package-lock.json
package.json
tsconfig.json
tsconfig.tns.json
tslint.json
webpack.config.js

README.md

ng-goes-native

One Framework To Rule Them All

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

One Framework To Rule Them All

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>
You can’t perform that action at this time.