phonegap day 2016 eu: creating the ideal cordova dev environment

Creating the Ideal Dev Environment

Ryan J. Salva, Microsoft@ryanjsalva

DISCLAIMER• There’s no such thing as an “ideal” dev environment.

• While I researched the tools used by surveying over 100 Cordova professionals, you may prefer something different.

• If you have a tip, preference or better tool, please share it!

Creating the Ideal Dev Environment• Hardware• Node Version Manager• Globally Installed NPM Packages• VS Code• .bash_profile• Android SDK• Android Emulator• Parallels• Visual Studio• Remote Build Agent

Hardware (Mac-based)• 13-inch MacBook Pro with Retina display• 3.1GHz Dual-core Intel Core i7, Turbo Boost up to 3.4GHz• 16GB 1866MHz LPDDR3 SDRAM• 1TB PCIe-based Flash Storage• Intel Iris Graphics 6100• OSX El Capitan

• Parallels or VM Ware Fusion Pro

Hardware (Windows-based)• 13.5-inch Microsoft Surface Book• 6th Gen Intel Core i7• 1TB SSD• 16GB RAM / dGPU• Windows 10 Pro

• iOS Build Options• PhoneGap Build• MacInCloud• Mac Mini

0.12.x 2.x all>=4.0 2.x >=5.3.3>=5.0 3.x >=5.4.16.x 3.X none

A Complicated Mess

sudo npm install -g cordova

...npm ERR! npm ERR! Additional logging details can be found in:npm ERR! /Users/ryanjsalva/npm-debug.lognpm ERR! not ok code 0

sudo npm install is a Bad Idea™• npm install has the ability to run arbitrary scripts. If you

accidentally install malicious software with administrative permissions, you’re giving away the keys to the kingdom

• Running sudo npm install (without -g) will create a local directory that can only be altered by the root user.

• Even sudo npm install -g with a valid installation target can mess things up for you and make it hard to use npm without sudo. Admin will have directory permissions, making permission errors with a local user likely in the future.

http://nvm.sh/

# install nvmcurl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.1/install.sh | bash

# confirm that nvm is installednvm --version

# install the latest stable releasenvm install v4.4.4

# make it the defaultnvm alias default v4.4.4

# this is a Cordova dev environment, right?

npm install –g cordova

# UI framework

npm install –g cordova ionic

# live updates w/o re-submitting to the store

npm install –g cordova ionic code-push-cli

# future JS features today, req. by Ionic+Ng2

npm install –g cordova ionic code-push-cli typescript

# simply build pipeline management

npm install –g cordova ionic code-push-cli typescript gulp

# Xcode build from Windows

npm install –g cordova ionic code-push-cli typescript gulp remotebuild

# Install and debug iOS apps w/o opening Xcode

npm install –g cordova ionic code-push-cli typescript gulp remotebuild ios-deploy

# launch iOS simulator from CLI

npm install –g cordova ionic code-push-cli typescript gulp remotebuild ios-deploy ios-sim

# enforce JavaScript code style guide

npm install –g cordova ionic code-push-cli typescript gulp remotebuild ios-deploy ios-sim eslint

# the baseline for our code style guide

npm install –g cordova ionic code-push-cli typescript gulp remotebuild ios-deploy ios-sim eslint eslint-plugin-standard

# enforce TypeScript code style guide

npm install –g cordova ionic code-push-cli typescript gulp remotebuild ios-deploy ios-sim eslint eslint-plugin-standard tslint

# framework agnostic livereload

npm install –g cordova ionic code-push-cli typescript gulp remotebuild ios-deploy ios-sim eslint eslint-plugin-standard tslint cdvlive

# That’s it! Install everything else locally

npm install –g cordova ionic code-push-cli typescript gulp remotebuild ios-deploy ios-sim eslint eslint-plugin-standard tslint cdvlive

.bash_profile

http://github.com/ryanjsalva/bash

Debug your code on any browser, emulator or device.Increase speed & accuracy with Intellisense for plugins.

Invoke Cordova commands from the editor.

Visual Studio Code

VS Code ExtensionsCordovacordova-toolsvscode-eslinttslint

JS Nativevscode-react-nativenativescript

Google EmulatorsApple OSXGenyMotion (requires VirtualBox)

Google SDK with HAX

WindowsVisual Studio Android Emulator

Building for Windows• Visual Studio• Tools for Apache Cordova• Node 0.12 and NPM 2.2 (sandboxed)• Android SDK• Ant & Gradle• Visual Studio Android Emulator