/getting-started

Platypi Platform Getting Started

Primary LanguageTypeScript

getting-started

This README is auto-generated by the Platypi CLI. Below you can find instructions on how to use this project.

Installation

Use npm install to install the dependencies for this package.

Typical Scenarios

Development

When developing your app you want to do a couple of things:

  1. Run a server to serve your app on localhost
  2. Watch your TypeScript files and compile/bundle your TS/JS when a file changes.
  3. Watch your Less files and compile your Less when a file changes.

Your package.json has a start script that will do these things for you. So when you are developing you can simply run:

$ npm start

The default server configuration is to serve assets on http://localhost:3000 from the app directory.

NOTE: npm start does not minify your javascript files in order to speed up your development builds

Cordova

When you're ready to build for your cordova project there are a couple of things you want to do:

  1. Compile/Bundle/minify your TypeScript, JavaScript, and Less files.
  2. Copy your assets (fonts, images) as well as your distribution source files (app.js, app.css, index.html) into the cordova/www directory
  3. Modify your index.html to include cordova specific tags (i.e. including cordova.js, specifying the CSP meta tag, etc)
  4. Build your cordova project

Your package.json has a build:cordova script that will do all of this for you. When you are ready to build your cordova project simple run:

$ npm run build:cordova

Build Configuration

This app uses npm run-script or npm run scripts to manage all the building/deployment. You can see all the scripts in the package.json. You can also print the scripts to the command line console by typing npm run.

Useful Scripts

The following are descriptions for a few of the useful npm scripts. All of these scripts can be executed using the npm run <script> command.

  • build

    • Builds the less and ts files
  • build:cordova

    • Builds/bundles/minifies your less and ts
    • copies the necessary files to /cordova/www
    • runs cordova build
  • clean

    • Cleans your app directory, removing css/js/map files and your dist directory
  • lint

    • Runs tslint on all of your ts files
    • You can specify your custom lint rules in your tsconfig.json
    • Default rules can be found at the tsconfig-lint project
  • prepublish

    • Runs during npm install
    • Installs/links TypeScript declarations using tsd
    • Runs tsconfig-glob to setup your tsconfig.json
  • start

    • Builds/bundles your src files and watches them for changes
    • Rebuilds/bundles when your src files change
    • Starts server that serves assets from the app directory on http://localhost:3000
  • tsd

    • Installs/links TypeScript declarations using tsd

Cordova

When creating an app you can choose whether or not you want to also create a Cordova app. There are a few things you want to know when creating/interacting with your Cordova app.

Requirements

$ npm install cordova -g

Refer to the android and ios platform guides to help you get setup with a Cordova environment.

Working in Teams

It can be tricky to share a Cordova app project with other team members over source control. The recommended way we've found is by checking in your configuration to source control.

  • Make sure you check-in your cordova/config.xml
  • Check-in the cordova/res files
  • Ignore everything else

You can use the config.xml to store project configuration, so that other team members can restore the same project specification on their machine.

  • When adding a plugin, use the --save flag to save the plugin information (name and version specification) to the config.xml
  • When adding a platform, the --save flag will store the platform information similar to the plugins
    • NOTE It is not recommended to save ios or windows platform information to the config.xml to avoid compatibility issues across platforms.

Interaction with the CLI

The CLI tries to be non-invasive when it comes to Cordova. There is a plat cordova command which basically serves as a way to execute cordova cli commands from anywhere in your project. In other words:

  • Normally any cordova commands must be run from within a cordova project
  • With the CLI you can run plat cordova and it will automatically run the cordova command in your cordova project

plat cordova run android --device allows you run your cordova app on a device without changing to the cordova directory.