Giter Club home page Giter Club logo

tour-of-heroes's Introduction

Typescript Angular 2 + Node.js Starter Project with Linting, Minification, and Bundling

About

  • Demo hosted on Heroku (Using free dynos which sleep during inactivity, so initial load may be slow)
  • Angular 2 Code in Typescript 1.8 with SystemJS for module loading
  • Styles in SCSS
    • Global styles are concatenated
    • Component styles are lazy loaded individually
  • HTML templates as Typescript strings
    • Allows for in-lining of templates at compilation, avoiding additional the network request that using "templateUrl" adds
    • Allows templates to live in external files for code clarity and scaling
    • Can be easily migrated to a plain HTML file once Typescript "import file as string" functionality is in place
    • Webstorm html syntax highlighting still works correctly
  • Project building and bundling with Gulp
    • Linting runs before compilation, minification, and bundling
    • Express serves static files from "public" directory
    • "public/dist" contains our compiled, bundled, and minified "src"
    • "public/lib" contains our compiled, bundled, and minified dependencies

Installation

  • npm install -g gulp typings: installs Gulp and Typings globally
  • npm install: installs node modules locally then triggers type definition installation and builds the app

Build and Run

Automatically

  • gulp: lints, builds, and restarts web server on changes (Branch changes will cause server to crash; stop and start before doing so)

If no code has changed since your last build, you can just run:

  • gulp serve: starts web server with a watcher that will recompile any changed files (will not trigger recompilation on any files changed before task starts)

Manually

  1. gulp build: lints, compiles, and compresses static files
  2. npm start: starts web server on port 8080
  3. Repeat steps 1 & 2 on any file change

Testing with Jasmine

  • npm run test: watches and compiles files on changes, opens browser to see test runs (Initially it may show "No specs found", but browser will automatically reload on changes.)
  • gulp clean:tests: optionally clear test build directory

Additional Commands

  • gulp tsconfig-glob: populates 'files' in tsconfig.json from 'filesGlob'
  • gulp styles: lints, compiles, compresses Sass to CSS only
  • gulp scripts: lints, compiles, compresses Typescript to JS only
  • gulp lint: lints Typescript and SCSS files
  • gulp clean: clears all built files
  • typings install: installs type definitions

tour-of-heroes's People

Contributors

smmorneau avatar williamhunter9094 avatar

Watchers

James Cloos avatar

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.