Ionic in Visual Studio 2017 on Windows

In this blog I’ll create a command line for Tools for Apache Cordova (Taco) called Taco631-Cli, so you can run Cordava and Ionic commands from that instead of letting Visual Studio (VS) do it for you.

To do that I had to figure out how Visual Studio (VS) chooses its Taco tools. The following is what happened along the way.

Why?

So what is the driver for this wish? I want to know where VS picks up the tools it uses, so I can

  • e.g. choose which npm packages I want to be globally installed.
  • choose another web server (than IIS Express) to host my Ionic app – e.g. > Ionic Serve

In other words:

I would like to switch between developing Ionic apps in

  • Visual Studio(VS) + Taco and
  • SublimeText(ST3) + Cmd Line.

When I did

ionic serve

in my VS Ionic project, small things differed from running from VS. Would I at all be able to rely on running from cmd line?

From this initial wish I also started to wonder installation issues like

  • When I already had both Cordova, PhoneGap and Ionic on the dev box and later installed Visual Studio then how could I keep old ST3 projects (using older versions of everything) separated from the new VS install (of almost everything)?
  • What should be separate and what should be common?
  • What should be upgraded?
  • When I use Ionic Serve, what is different from VS using Cordova?

Prerequisites

  • VS2015 was prepared for Ionic with Ionic templates.
  • A new project was created with the “Ionic Tabs template”
  • VS2017 RC was installed and the Ionic project was opened in VS2017 (the Ionic Templates did not have a VS2017 version at time of writing)
  • Tip for VS2015: Install Ionic Pack

What is going on?

Taco is installed in Toolsets, so different projects can use different toolsets.

Tacos configuration is done on several levels and keeping track of various tools used either from command line alone or behind your back by Visual Studio can be a challenge.

Microsoft recognizes this as their own pain, so they, too, are working on it:
Configuring your Windows development environment.
That document is from August 2016, so don’t expect it to be matching too much with the recently released Visual Studio 2017.

Global non-npm tools

Java tools for Taco

For build to Android you need tools that Microsoft like to search for in the following environment vars:

  • JAVA_HOME points to the Java installation path.
  • ADT_HOME points to the Android installation path.
  • ANT_HOME points to the Ant folder on your computer.

For Source control Microsoft like to search for in the following environment var:

  • GIT_HOME points to the Git installation path.

I already had those tools installed, so I did not want extra copies installed. Instead I just wanted to check that Visual Studio uses the same in VS – Tools – Options – Taco – Environment variables.

You can opt not to install Android and emulators during installation of Visual Studio 2017.
Taco is called “Mobile development with JavaScript” and the options you have as checkboxes in the right pane.

vs-install-02

On my devbox I installed Eclipse and Android (via ADT bundle)  to these directories:

  • JAVA_HOME=C:\Program Files\Java\jdk1.7.0_40
  • ADT_HOME=C:\Development\adt-bundle\eclipse\plugins\com.android.ide.eclipse.adt.package_22.2.1.v201309180102-833290
  • ANT_HOME=C:\Development\adt-bundle\eclipse\plugins\org.apache.ant_1.8.3.v201301120609

Notes:

  • Nowadays Android Studio is a preferred choice over ADT bundle (depricated).
  • ADT_HOME variable was not set. I set it in VS – Tools – Options – Taco for a start, but since it is depricated I should undinstall it and instead install Android Studio.

GIT for Taco

Less than a year ago I reinstalled Git for Windows to

  • GIT_HOME=C:\Program Files\Git

GIT for Npm

GIT is not only a Taco configuration. You also find it as VS – Tools – Options – Projects – Web Package Mgmt – External Web Tools. It is set to

$(DevEnvDir)\CommonExtensions\Microsoft\TeamFoundation\Team Explorer\Git\cmd
$(DevEnvDir)\CommonExtensions\Microsoft\TeamFoundation\Team Explorer\Git\mingw32\bin

where $(DevEnvDir)=%ProgramFiles(x86)%\Microsoft Visual Studio\2017\Enterprise on my PC.

So when you open a VS project VS will use GIT from the \Team Explorer\Git\ location to fetch missing Bower and Npm packages.

When Taco uses GIT, I guess it could be a requirement from Cordova to have GIT_HOME as an environment setting.

Node.js and npm

Multiple node versions

Having several versions of node and thus several versions of global npm modules (see npm tools below) is possible with NVM for Windows. It requires to uninstall existing node install. I don’t want to do that on this PC, so I will leave it for a future empty PC.

Upgrading Node (and npm).

Recently I had a npm module failing on windows (not on this dev box, though) with

SyntaxError: Use of const in strict mode

Apparently the node version was too old and I had to upgrade it. It ended with I used Chocolatey to upgrade node.js:

choko install nodejs #reinstall node.js

Upgrading npm only?

I noticed there is a tool for upgrading npm on Windows. I don’t know if it only upgrades npm or if it also upgrades node. Now you have it, if you need it.

npm tools

I am still trying to get sense of how to run tools from node command line using the same taco toolset as Visual Studio does. So to my understanding you can say:

  • Tools vs Scripts
    • npm tools are executables, that can be run from the command line.
    • npm scripts are .js scripts, that can be required() from within a node prompt and used as code libraries.
    • node scripts are .js scripts, like ps1 scripts that can require() the npm scripts.
  • Packages
    • npm is a tool. It is the node package manager.
    • npm install -g #installs globally into %home%\AppData\Roaming\npm\node_modules
      • You can recognize the global dir by it will have the tool shortcuts in the parent of \node_modules\. This also means it will not have a \.bin\ subfolder.
      • The cmd (installed, when installing node.js) uses nodevars.bat to start node.exe and put the path to the global npm tools in the %path% environment variable, so you don’t need a path to execute a global npm tool.
    • npm install #installs locally into .\node_modules.
      • You can recognize a local dir by it will have the tool shortcuts in the .\node_modules\.bin\ subfolder.
      • In “.\” you can put a package.json. This will pull needed npm packages into .\node_modules from github, when you build the project.
      • When a project is run .\node_modules\.bin\ is added to the path, so npm scripts can reach the locally installed tools.
    • npm tools and scripts are installed either globally and/or locally (in 0 or more places)

Links:

Global npm tools

The list of global installed npm modules you find in

%home%\AppData\Roaming\npm\node_modules\

or by typing (in a nodejs or cmd-prompt)

npm list -g #-g = global install

Currently I have the tools in the versions:

# Windows ----------------------
wmic os get caption #Microsoft Windows 10 Pro
wmic os get osarchitecture #64-bit

# Non-npm-Tools ----------------
## Java tools
java -version #1.7.0_40
ant -version #1.8.3
## Ruby tools
# Note: Heroku does an automatic update, when printing version
heroku --version #heroku/toolbelt/3.43.5, ruby/2.1.7, heroku-cli/5.2.23
ruby --version #2.1.7p400
## C tools
git –-version #2.10.2.windows.1
node –-version #v4.2.4 (includes npm)

# npm-tools (js) ---------------
# (installed doing $ npm install -g <toolname>)
## Package managers
npm –-version #3.9.6 #installed together with node - upgraded with npm-windows-upgrade
bower --version #1.6.5

## Web/Mobile servers
express --version #4.13.1
nodemon –-version #1.8.1
phonegap --version #5.3.6
cordova --version #5.3.3
ionic --version #1.7.7

## Task runners
grunt --version #0.1.13
gulp --version #not installed

## Template generators
yo --version #1.4.8

## Test tools
protractor --version #not installed
jasmine-node --version #1.14.3
karma --version #0.13.14
phantomjs --version #1.9.8

Option: You can update all global installs by doing:

npm update -g

Instead it might be a better idea to uninstall some of it that you think will break backwards compatibility, so when old projects using them will still have a chance to get a local version of the npm module from its reference in its package.json file.

Perhaps I will choose to uninstall the web/mobile servers. I could suspect that they could be candidates for compatibility breaks.

In a Ionic book (Ionic in action) I read that you should only update cordova, when there are features you need since it might break your project, but it recommends to keep Ionic updated.

To uninstall:

npm uninstall -g <toolname>

But first let me have a look at local packages.

Local project npm tools

You will find local npm tools in folder:

<project-root>\node_modules\

You could find tools like gulp and bower there.
But Visual Studio does not have Cordova nor Ionic installed there. So where do they go (since it is not using same versions as the global installs)?

Local Taco npm tools

As mentioned near the top Taco provides toolsets.

This is where you find cordova

%ProgramData%\Microsoft\VisualStudio\MDA\662d3391\taco-toolset-6.3.1\node_modules\

In file

<project-root>\config.xml

you find a request for toolset Cordova 6.3.1.

Notes:

In the file

%ProgramData%\Microsoft\VisualStudio\MDA\662d3391\taco-toolset-6.3.1\versions.js

you will see that the toolset includes

{"name": "",
 "cordova": "6.3.1",
 "node": "4.4.3",
 "npm": "2.15.0",
 "cordova-simulate": "0.3.9",
 "cordova-android": "5.2.1",
 "cordova-ios": "4.2.0",
 "cordova-windows": "4.4.2"}

How Visual Studio simulates cordova

When a Taco project has Android as target platform and is set to Simulate in Browser then the build output is:

1>------ Build started: Project: my-ionic-project1, Configuration: Debug Android ------
Cordova 6.3.1
------ Platform android already exists
------ Copying native files from c:\my-ionic-project1\res\native\android 
 to c:\my-ionic-project1\platforms\android
------ Done copying native files to c:\my-ionic-project1\platforms\android
2>------ Deploy started: Project: my-ionic-project1, Configuration: Debug Android ------
2>Starting launch process 
C:\ProgramData\Microsoft\VisualStudio\MDA\662d3391\taco-toolset-6.3.1\node.exe 
 "C:\ProgramData\Microsoft\VisualStudio\MDA\662d3391\taco-toolset-6.3.1\simulate.js" 
 dir="c:\my-ionic-project1" device="G5" livereload="True" port="4400" lang="en-US" 
 npm-install-path="C:\Program Files\nodejs" 
 theme-file="%AppData%\Microsoft\VisualStudio\MDA\SimulateThemes\4a40218e3d009a31f4fae94389e2fae8.json" 
 simhosttitle="Cordova Plugin Simulation" font-family="Segoe UI" font-size="12px" corsproxy="True"
2> SIM: Server started:
2> - App running at: http://localhost:4400/index.html
2> - Sim host running at: http://localhost:4400/simulator/index.html
2> SIM: DEBUG_HOST registered with server.
2> SIM: Handling pending emits for DEBUG_HOST
2> SIM: Preparing platform 'android'.
========== Build: 1 succeeded, 0 failed, 0 up-to-date, 0 skipped ==========
========== Deploy: 1 succeeded, 0 failed, 0 skipped ==========
  • VS is then explicitly selecting the correct node.
  • It executes simulate.js, which requires() modules from its local npm install including cordova-simulate.
  • In VS – Tools – Options – Projects – Web Package Mgmt – External Web Tools there is a set of paths to search for tools. They are:
    .\node_modules\.bin
    $(VSINSTALLDIR)\Web\External
    $(PATH)

    so from the first path the modules can find the toolset tools first.

  • After simulate.js command there are a set of arguments, that are sent to simulate.js including a path to the project to be run.
  • The npm-install-path argument is not sent to simulate.js. Perhaps it is a way for node.exe to look for node.js version independent  libraries or custom configurations or scripts e.g. nodevars.bat?
  • Observation: The toolset also contains vstacwrapper.js. It executes cordova cmd line.

Taco links

Custom nodevars.bat

Observation: The nodevars.bat is usually the startup file for node.js cmd line. I have two of them on my PC:

  • In original install in %ProgramFiles%\nodejs
  • In Taco folder %ProgramData%\Microsoft\VisualStudio\MDA\662d3391\taco-toolset-6.3.1

They both add %home%\AppData\Roaming\npm to the %PATH% – meaning they will use the global node modules.

And they will run node.js from the path, which is from the original install. So I’ll need a custom nodevars.bat for running taco toolset from cmd line.

So if I copy the toolset nodevars.bat and make a custom version setting the toolset path, then have a node.js prompt using the right tool versions.

If I then install the Ionic version that is in the target project into the Taco local toolset, then I might get things right for switching between running from cmd line and VS

Create a Taco Cli (command line shell):

  • Open folder %ProgramData%\Microsoft\VisualStudio\MDA\662d3391\taco-toolset-6.3.1\
  • Copy nodevars.bat to nodevars-taco631.bat
  • Edit nodevars-taco631.bat
@ECHO off
set TACO631=%ProgramData%\Microsoft\VisualStudio\MDA\662d3391\taco-toolset-6.3.1
rem put local taco + global npm + pwd in path 
set PATH=%TACO631%\node_modules\.bin;%APPDATA%\npm;%~dp0;%PATH%

setlocal enabledelayedexpansion
pushd "%~dp0"
rem Figure out the node version.
set print_version=%TACO631%\node.exe -p -e "process.versions.node + ' (' + process.arch + ')'"
for /F "usebackq delims=" %%v in (`%print_version%`) do set version=%%v

rem Print message.
if exist npm.cmd (
 echo Your environment has been set up for using Taco 6.3.1 with Node.js !version! and npm.
) else (
 echo Your environment has been set up for using Taco 6.3.1 with Node.js !version!.
)

popd
endlocal

rem If we're in the node.js directory or in system32, change to the user's home dir.
if "%CD%\"=="%~dp0" cd /d "%HOMEDRIVE%%HOMEPATH%"
  • Save file with ANSI encoding
  • Create a shortcut of nodevars-taco631.bat
  • Rename the shortcut to Taco631-Cli
  • Edit properties of the shortcut:
    • Shortcut – Target=C:\Windows\System32\cmd.exe /k C:\ProgramData\Microsoft\VisualStudio\MDA\662d3391\taco-toolset-6.3.1\nodevars-taco631.bat
    • Shortcut – start in=(empty)
  • Open the Shortcut and pin it to taskbar

You could also configure VS to use that shell.

  • Install Open Command Line. – It is part of Web Essentials 2017.
  • In VS – Tools – Options – Environment – Command line:
    • Select preset = cmd
    • Friendly name = Taco631-Cli (from: Default (cmd))
    • Command arguments = /k C:\ProgramData\Microsoft\VisualStudio\MDA\662d3391\taco-toolset-6.3.1\nodevars-taco631.bat
  • Usage:
    • In VS Solution Explorer select your Js project
    • Press Alt + space
    • or right-click project – Open Command line – Taco631-Cli

Next install Ionic into your Taco modules:

  • In your Ionic visual studio project open <project>\www\lib\ionic\bower.json
  • Read the version of ionic – 1.3.1 is the one in mine.
  • Open your Taco631-Cli and type:
C:
cd %TACO631%
npm install ionic@1.3.1

Test:

  • Cd into your ionic project via your Taco631-Cli and type Ionic Serve

This brought me to my main goal of this blog, so I’ll stop the research for now.

But there is a little note on yet another local npm install in Visual Studio:

Local Visual Studio non-taco npm tools

As hintet, while talking about GIT, Visual Studio also has a non-taco install of npm tools in

%ProgramFiles(x86)%\Microsoft Visual Studio\2017\Enterprise\Web\External\node_modules\

having yet other versions

node –-version #v5.4.1
npm –-version #3.3.4
bower --version #1.7.2

being used, when a .jsproj is opened, so VS can fetch the missing npm and bower depedencies specified in .json configurations in the project.

Blog History

I have been playing a little with installation of Git, PhoneGap, AngularJs and Ionic using e.g. Chocolatey and npm in other blogs

The End.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: