Month: May 2015

Meteor Boilerplate for Typescript Projects

Meteor Boilerplate for Typescript Projects

Meteor loves Typescript with this new boilerplate!

Quickstart

  1. Clone the meteor boilerplate: git clone git://github.com/tomitrescak/meteor-boilerplate-typescript.git
  2. Run npm install in the main directory (possibly sudo npm install)
  3. Add your files (see section Files).
  4. If you want to use modules use gulp build-debug-modules or gulp build-release-modules gulp task (see section Modules). You can easily run these tasks in your editor (e.g. Webstorm, Sublime)
  5. If you do not want modules use gulp build gulp task.
  6. Run gulp tslint for that extra linting that makes your project shine!
  7. Done!

Modules

To get modules running, you need to register only top level modules in modules:export package. For example, if your modules are MyModule.SubModule1, MyModule.SubModule2.SubSubModule, MyOtherModule.SubModule1 then the top level module is MyModule.
We register this module as following:

//file: /src/packages/exports/exports.js
MyModule = {}
MyOtherModule = {} // another example

and

//file: /src/packages/exports/package.js

...
api.export('MyModule');
api.export('MyOtherModule');
...

Registering module in package assures that the top level module definition is loaded before any other module extension. In the next section, we explain what options we have in building the project.

Building With Gulp

All the magic needed to run the project is hidden inside the gulp files.
Just choose your favourite editor (i.e. Sublime, Webstorm, Visual Studio Code) and run the gulp files to compile your project. These are the tasks that are currently supported:

  • build – Builds the project into /src/js directory, ignoring modules
  • build-debug-modules – Builds the project into /src/js with multiple files, where files are split into three directories (client, server and lib). Files are prefixed by number assuring the correct load order. The load order is detected from references within “*.ts” files.
  • build-release-modules – Builds the project into three files: client/client.js, lib/lib.js and server/server.js.
  • tslint – Runs a tslint

Editors

This boilerplate has been pre-configured for:

  1. Visual Studio Code
  2. WebStorm

Files

Please check out the Typescript-Utils page to see how to write
awesome statically typed template helpers, events and routes.

Packages

We have chosen Semantic UI as the main front end framework.
You can control which components are used in ‘/src/client/lib/semanticui/custom.semantic.json’

  • semantic:ui – Beautifully crafted web pages with Semantic UI
  • useraccounts:semantic-ui – User accounts manipulation in semantic ui
  • accounts-password – Authentification package
  • flemay:autoprefixer – Vital helper for Semantic UI package (can be removed if Semantic UI is removed)
  • iron:router – Popular routing solution
  • multiply:iron-router-progress – Visual progress display (progress colors are defined in /client/stylesheets/progress.css)
  • meteorhacks:subs-manager – Subscription manager to save traffic
  • meteorhacks:fast-render – Blazing fast page load, no more waiting
  • alanning:roles – Roles management
  • dataflows:typescript-utils – Typescript goodies

We leave the rest of the packages up to you, not to annoy you too much.

Karma

This project has been configured to run with Karma (e.g. in Webstorm) for super fast unit testing.
Just click on Run Configurations -> add -> Karma.

You can install karma cli if you plan to run karma tests in terminalsudo npm install -g karma-cli.
You can now simply run karma start.

Structure

  • gulp — Definition of gulp tasks and jobs
  • node_modules
  • src — Your Meteor App
    • js — Generated files
  • typescript — Typescript definition files

License

This project is provided on the MIT license.