Channel 9 CRM: HTML5/JS Cross Platform Sample

This repository contains the source code of the Channel 9 CRM demo shown at the Cross Platform Day series on Channel 9. This demo shows how to build apps for browsers, desktop and mobile platforms using one single Angular 2 codebase.

Toolchain

This is the toolchain we presented in our video series:

• Frontend: Angular 2, TypeScript
• Backend: Node.js
• Build: Gulp
• App Packaging: Electron, TACO Tools (Apache Cordova)

Setup

• Make sure you have Node.js installed
• If you use a Node version manager, make sure you activated Node for your active terminal
• Run npm i in order to install all dependencies
• You’re all set!

Build

• Run npm run build to build all web files (i.e. CSS and TypeScript files), desktop and mobile apps

Watcher

• Run npm run dev to automatically start backend, frontend and watch for frontend source changes

Run

• Run a static file server (such as live-server) to host the files found in dist/frontend
• Run npm run server to launch the server part of this demo
• Authentication: Username must match password, e.g. admin:admin

Deploy

• Make sure that the backend you host is accessible from the target device (on actual devices, you will have to adjust the base URL found in src/frontend/services/urlService.ts from localhost to a local IP and rebuild the web files)
• Use TACO, Ionic, Cordova or another tool to deploy the apps to mobile devices

Dependencies

Including, but not limited to…

• AdminLTE, open source admin dashboard and control panel theme
  • jQuery, yeah – unfortunately.
  • Bootstrap, framework for responsive websites
• Angular 2, Single-Page Web Application (SPA) framework for the modern web
• Fastclick, eliminates the infamous 300 ms lag on devices using the iPhone-style Touch Events
• Font Awesome, the iconic font and CSS toolkit
• Gulp, the streaming build system
  • gulp-typescript, TypeScript compiler for Gulp
• Restify, Node.js module for building RESTful web services
  • Restify CORS Middleware, middleware for enabling Cross-Origin Resource Sharing (CORS)
  • OAuth2 server, OAuth 2.0 server for Node.js
• Sequelize, Node.js Object-Relational Mapper (ORM)
• SQLite 3, Self-contained SQL database engine