WEBVTT
00:00:05.100 --> 00:00:08.130
Hi everyone I am Sara and I am here
to tell you about Node Tools
00:00:08.180 --> 00:00:12.050
for Visual Studio. Node Tools is
a free open source extension
00:00:12.100 --> 00:00:15.340
that turns Visual Studio into a
node IDE. That means you get
00:00:15.390 --> 00:00:18.510
everything from IntelliSense, to
debugging, to deployment and
00:00:18.560 --> 00:00:22.700
everything in between. Once Node.js
Tools is installed we can
00:00:22.750 --> 00:00:26.580
go ahead and fire up Visual Studio
and select new project.
00:00:26.630 --> 00:00:28.710
Now the first thing you will notice
is that we will have new
00:00:28.760 --> 00:00:32.480
templates available for you under
the JavaScript and TypeScript
00:00:32.530 --> 00:00:36.390
nodes including a template that
let's you import a project from
00:00:36.440 --> 00:00:37.430
existing code.
00:00:38.180 --> 00:00:41.780
In this demo we will be using the
JavaScript Express app template
00:00:41.830 --> 00:00:44.720
and rest assured that all the features
I am about to show you
00:00:44.770 --> 00:00:46.890
are also available for
TypeScript as well.
00:00:47.630 --> 00:00:50.670
Also note that we recommend
choosing a short path like C:/source
00:00:51.240 --> 00:00:56.540
to work around any potential maxpath
issues or NMPV3 is also
00:00:56.590 --> 00:00:57.620
very helpful.
00:00:58.350 --> 00:01:00.590
Once your project has been created
you will notice that Visual
00:01:00.640 --> 00:01:03.800
Studio has automatically gone ahead
and NPM installed all of
00:01:03.850 --> 00:01:07.120
your required dependencies as
defined in package.json.
00:01:08.740 --> 00:01:10.840
So with that let's get started
writing some code.
00:01:11.350 --> 00:01:13.970
The first thing you will notice
is that we are actually getting
00:01:14.020 --> 00:01:16.880
IntelliSense and right now we are
going to define this function
00:01:16.930 --> 00:01:21.230
multiply and we are going to
give it parameters A and B.
00:01:22.170 --> 00:01:26.080
So within multiply we are going
to return A times B.
00:01:28.800 --> 00:01:31.680
If we hover over any of these variables,
if we hover over A it's
00:01:31.730 --> 00:01:34.950
an unknown type. If we hover over
B it's an unknown type and
00:01:35.000 --> 00:01:37.860
we don't know what multiplier it
returns and this is because
00:01:38.140 --> 00:01:42.290
JavaScript is a dynamically typed language,
so really these variables
00:01:42.340 --> 00:01:45.290
can be anything at the moment.
But let's say we use it once.
00:01:45.340 --> 00:01:47.870
So let's go ahead and use multiply.
We will go ahead and pass
00:01:47.920 --> 00:01:49.290
it a couple of numbers.
00:01:50.690 --> 00:01:56.030
Now we can hover over the numbers
and it knows that these are
00:01:56.080 --> 00:02:01.010
numbers and those types will also get
passed through to the IntelliSense
00:02:01.490 --> 00:02:04.840
of the function itself. So we can
hover over A now and we know
00:02:04.890 --> 00:02:08.270
A is a number. We can hover over
B and we know B is a number.
00:02:08.320 --> 00:02:12.090
And the return types are also flowed
through. Now we know that
00:02:12.140 --> 00:02:14.030
multiply returns a number.
00:02:15.360 --> 00:02:19.510
You can go ahead and add some more.
Let's say that now we have
00:02:19.560 --> 00:02:21.790
a function and we are
passing it a string
00:02:23.790 --> 00:02:29.630
now when we hover over A or B we
see that they can be either
00:02:29.680 --> 00:02:33.950
a number or a string. So we will
actually keep tracking all of
00:02:34.000 --> 00:02:36.510
the different types that you are
throwing into your function
00:02:36.560 --> 00:02:40.380
so that now when you try and use
it you get completions that
00:02:40.430 --> 00:02:44.630
are representative of the dynamic nature
of JavaScript. And eventually
00:02:44.680 --> 00:02:47.190
it get's too complicated and we stop
flowing these types through,
00:02:47.240 --> 00:02:51.110
but its pretty hands. Now all the
syntax highlighting, all of
00:02:51.160 --> 00:02:55.980
the IntelliSense isn't just available
in the Editor, it's also
00:02:56.030 --> 00:02:58.390
available in the interactive window.
And you can get to that
00:02:58.440 --> 00:03:01.750
by using this; I like to use
the quick launch dialogue.
00:03:02.340 --> 00:03:07.000
So we will type interactive window, so
in select node.js interactive window.
00:03:07.050 --> 00:03:11.490
Alternatively you can use control
KN to open it up. And we will
00:03:11.540 --> 00:03:14.630
go ahead and start typing something.
So we will say function,
00:03:14.680 --> 00:03:16.960
multiply A and B
00:03:18.550 --> 00:03:21.420
and return A times B.
00:03:24.040 --> 00:03:29.150
Then we can use multiply and we will
see that we are also getting
00:03:29.200 --> 00:03:31.360
our completions over here.
00:03:32.570 --> 00:03:40.130
Great, now these completions aren't
just available for your own
00:03:40.180 --> 00:03:43.330
code that you are writing. They
are also available for all of
00:03:43.380 --> 00:03:47.230
the packages that you install.
So for example let's go ahead
00:03:47.280 --> 00:03:50.130
and install Azure and
see how that looks.
00:03:51.010 --> 00:03:53.760
Now I prefer using the command window.
So I am going to go ahead
00:03:53.810 --> 00:03:55.740
and open that up and
00:03:57.890 --> 00:04:00.370
you can right click on the project
in order to open the cmdlet
00:04:00.420 --> 00:04:03.910
window or there is a great command
window extension that you
00:04:03.960 --> 00:04:08.800
can install that gives you alt/space
in order to open up very quickly.
00:04:08.850 --> 00:04:13.570
And we can do NPM install
Azure. And so
00:04:14.880 --> 00:04:18.750
Azure will go ahead and install.
One thing you will notice is
00:04:18.800 --> 00:04:23.710
actually we are using NPMV3 here,
which is newly supported in
00:04:23.760 --> 00:04:25.490
NTVS version 1.1.
00:04:26.150 --> 00:04:29.600
In addition to installing packages
from the command line you
00:04:29.650 --> 00:04:34.060
can also use the interactive window
that I showed you using the
00:04:34.110 --> 00:04:39.270
.NPM command or we have a whole dialogue
available here, install
00:04:39.320 --> 00:04:40.300
new packages.
00:04:41.440 --> 00:04:45.300
And this will let you to browse through
some of the NPM packages
00:04:45.350 --> 00:04:48.150
available for you. So I can go ahead
and I can search for Azure,
00:04:48.200 --> 00:04:51.400
my catalog is a little bit out of
date on this machine, and see
00:04:51.450 --> 00:04:55.300
this installed locally because our
install has indeed finished.
00:04:55.840 --> 00:04:59.070
Now we can go and we can look into
the NPM node and we will see
00:04:59.120 --> 00:05:02.960
that it actually has installed Azure and
it has this other little warning.
00:05:03.010 --> 00:05:04.910
It says it is not listed in package.json.
00:05:07.900 --> 00:05:12.770
So the reason for that is when
we ran this command we didn't
00:05:12.820 --> 00:05:19.080
run it with the... - save command.
So basically it is warning
00:05:19.130 --> 00:05:21.880
us that if you check in this source
code, and you typically don't
00:05:21.930 --> 00:05:25.420
check in node modules, then this
module that you installed isn't
00:05:25.470 --> 00:05:27.920
going to be available because it
is not listed in package.json.
00:05:27.970 --> 00:05:34.250
So, helpful little hints like this
are really useful. And now
00:05:34.300 --> 00:05:36.940
we will actually start getting
completions on Azure. You will
00:05:36.990 --> 00:05:41.630
notice that in the status bar down
here we will give you updates
00:05:42.010 --> 00:05:46.470
when the static analysis of any
code has completed. So after
00:05:46.520 --> 00:05:49.930
Azure finished completing it printed
out something over here
00:05:49.980 --> 00:05:51.240
and now when I pressed enter
00:05:53.160 --> 00:06:00.840
it updated. Now you will notice
that when we type VAR Azure =
00:06:00.890 --> 00:06:03.360
require Azure
00:06:05.140 --> 00:06:09.590
that we are actually getting completions
on all of the functions
00:06:09.940 --> 00:06:15.260
on the Azure module.
So we can go
00:06:16.740 --> 00:06:22.740
create table service and we can
actually F12 to create table
00:06:22.790 --> 00:06:26.100
service to see what that
function is doing.
00:06:28.180 --> 00:06:31.310
So that becomes really helpful when
it comes to navigating your
00:06:31.360 --> 00:06:34.210
code or navigating any of
external packages code.
00:06:35.580 --> 00:06:38.740
Now if you want to customize any
of your IntelliSense options
00:06:39.350 --> 00:06:45.760
then you can go ahead and look
into the node settings. So in
00:06:45.810 --> 00:06:50.030
particular we are going to choose
in options text editor node.js
00:06:50.640 --> 00:06:51.680
IntelliSense and
00:06:53.520 --> 00:06:57.240
you can choose a quicker version of
this IntelliSense which provides
00:06:57.290 --> 00:07:00.010
limited completions, but can
reduce memory and CPU usage.
00:07:00.830 --> 00:07:04.730
So because we are statically analyzing
all of your files in the
00:07:04.780 --> 00:07:08.110
very beginning when you install a package
this might take some time.
00:07:09.270 --> 00:07:13.980
So this kind of limits the CPU usage
if you are in a slower machine.
00:07:15.110 --> 00:07:21.770
Then there is also this new EA6
IntelliSense preview and this
00:07:21.820 --> 00:07:26.200
is effectively where we are working
with the TypeScript and JavaScript
00:07:26.250 --> 00:07:29.760
teams to come up with a more cohesive
experience with IntelliSense.
00:07:29.810 --> 00:07:33.610
And it's not quite ready yet, but
this will give you a sneak
00:07:33.660 --> 00:07:36.150
peek of what's to come and we would
really, really appreciate
00:07:36.200 --> 00:07:37.140
your feedback. All right.
00:07:37.190 --> 00:07:44.190
So I will exit out of that
and start moving onto
00:07:45.790 --> 00:07:46.910
debugging because
00:07:48.310 --> 00:07:49.650
we actually haven't
00:07:51.160 --> 00:07:54.360
run the app yet. So let's
go ahead and do that.
00:07:55.130 --> 00:08:00.540
You can press F5 and we will see
that the app is indeed working.
00:08:01.470 --> 00:08:05.540
So F5 launches with a debugger
attached. You can also launch
00:08:05.590 --> 00:08:10.300
using control F5 and that will make it
launch a little bit more quickly.
00:08:10.350 --> 00:08:13.110
So we can go, we can click around
and okay everything is working,
00:08:13.160 --> 00:08:17.970
but let's go ahead and set a breakpoint.
So in particular let's
00:08:18.020 --> 00:08:18.860
switch to
00:08:20.120 --> 00:08:23.160
our routes.
00:08:24.990 --> 00:08:28.390
So in routes we are going to
switch to index because
00:08:30.030 --> 00:08:33.250
these are functions that are going
to be hit every single time
00:08:34.180 --> 00:08:38.220
you are clicking through
to one of these pages.
00:08:39.190 --> 00:08:45.280
So we have set our breakpoint, we can
hit our about page and awesome.
00:08:45.700 --> 00:08:48.090
We hit the breakpoint and we can
go ahead and we can inspect
00:08:48.140 --> 00:08:50.430
all the different variables. You
see you get tool tips and you
00:08:50.480 --> 00:08:55.740
can even go and navigate through
those tool tips as well or pin
00:08:55.790 --> 00:08:58.410
them so it's easier to actually follow.
00:08:59.270 --> 00:09:02.640
In addition you will see the
call stack window over here.
00:09:03.540 --> 00:09:06.020
So you can jump back and see where
00:09:07.240 --> 00:09:08.970
this call actually came from.
00:09:12.160 --> 00:09:15.850
Lastly we have a local's window
so you can go ahead and browse
00:09:15.900 --> 00:09:18.760
all the local variables in a watch
window where you can enter
00:09:18.810 --> 00:09:24.010
pretty much anything you want.
So if I wanted to see what the
00:09:24.060 --> 00:09:28.590
request looks like then I can go ahead
and do that and keep that there.
00:09:32.960 --> 00:09:34.140
So now we can F10
00:09:36.760 --> 00:09:44.610
to step over and then we will F5
to continue running the app.
00:09:46.750 --> 00:09:48.580
And let's go ahead and quit
everything right now.
00:09:55.900 --> 00:10:02.350
And actually in addition to that we
also have some advanced breakpoint
00:10:02.400 --> 00:10:06.440
features like conditional breakpoints,
we have trace points.
00:10:07.810 --> 00:10:12.790
So this makes it easy if you still
want kind of the same kind
00:10:12.840 --> 00:10:15.820
of functionality of console log,
but without littering your code
00:10:16.340 --> 00:10:21.470
with those statements then this
is helpful for that. So once
00:10:21.520 --> 00:10:23.830
you are done debugging your app or
maybe while you are debugging
00:10:23.880 --> 00:10:27.520
your app you ran into some
performance issues.
00:10:29.020 --> 00:10:32.470
Luckily Visual Studio makes it easier
to analyze through cause
00:10:32.520 --> 00:10:35.890
of those issues by selecting analyze
and then you can select
00:10:35.940 --> 00:10:40.990
launch node.js profiling. And you
can either profile and open
00:10:41.040 --> 00:10:43.620
project like the one that we have
here or you have the option
00:10:43.670 --> 00:10:47.360
of choosing any script that maybe
is outside of Visual Studio.
00:10:47.410 --> 00:10:50.090
You can even point VS at
some of your log files.
00:10:50.900 --> 00:10:54.660
You can press start and now we have
launched our app and we will
00:10:54.710 --> 00:10:57.770
stat clicking around. Now this
isn't the best app to actually
00:10:58.090 --> 00:11:00.360
test profiling with, but
00:11:01.790 --> 00:11:06.770
we will at least get some data so
we can see some of the features
00:11:06.820 --> 00:11:09.550
that you will have at your disposal.
And we will go ahead and
00:11:09.600 --> 00:11:10.680
press stop here.
00:11:11.580 --> 00:11:13.730
So as you can see it is showing
you the hot paths
00:11:15.990 --> 00:11:18.570
immediately without you having to
actually go through and view
00:11:18.620 --> 00:11:21.610
any sort of cryptic log or graphs.
And you can zoom in in various
00:11:21.660 --> 00:11:25.570
points in time and you have all sorts
of different lenses through
00:11:25.620 --> 00:11:28.930
which you can actually
view this data from.
00:11:29.570 --> 00:11:33.300
So that is some of the profiling
features, but check out our
00:11:33.350 --> 00:11:34.870
docs if you want to learn more.
00:11:35.820 --> 00:11:40.870
So go ahead and exit that. Now no
app is complete of course without
00:11:40.920 --> 00:11:44.290
some unit tests. So let's go ahead
and add that now. The first
00:11:44.340 --> 00:11:48.450
thing that we will want to do is
install Mocha, which we will
00:11:48.500 --> 00:11:53.160
be using for our unit test. So we
can do that by opening up the
00:11:53.210 --> 00:11:57.510
interactive window this time and
we will use .NPM install Mocha
00:11:57.560 --> 00:12:00.330
and we will save it as a dev dependency.
00:12:02.810 --> 00:12:05.930
So while that is finishing installing
we are going to go ahead
00:12:05.980 --> 00:12:10.130
and right click on our app and
select "add new item". You can
00:12:10.180 --> 00:12:14.900
also use control shift A and we are
going to use one of our JavaScript
00:12:15.230 --> 00:12:18.870
Mocha unit test files and we are going
to add that to the project.
00:12:20.950 --> 00:12:23.890
So it's gone ahead and it has created
and we can check the output
00:12:23.940 --> 00:12:25.780
to see that
00:12:28.630 --> 00:12:32.180
Mocha has been installed.
00:12:34.760 --> 00:12:38.920
Now we can open up our test explorer
00:12:40.280 --> 00:12:43.380
which I have handy over here. It
is going to go ahead and try
00:12:43.430 --> 00:12:47.230
and discover all of my tests and
it has discovered these two
00:12:47.280 --> 00:12:48.210
that are in this file.
00:12:50.460 --> 00:12:52.260
So we can go ahead and run the tests
00:12:57.860 --> 00:13:03.140
and we will see that one of them passes
and one the other one failed.
00:13:03.190 --> 00:13:05.150
All right. Let's go ahead and figure
out what's going on with
00:13:05.200 --> 00:13:07.850
this failing test, so test 2.
00:13:08.640 --> 00:13:12.830
The other neat thing about this
is that breeding code is hard,
00:13:12.880 --> 00:13:15.970
let's just use the debugger mainly
because I want to show off
00:13:16.020 --> 00:13:19.680
this feature. You can right click
on any of the debug selected
00:13:19.730 --> 00:13:22.520
tests and
00:13:24.320 --> 00:13:27.230
it takes some time, especially when
you start beginning with it.
00:13:28.130 --> 00:13:30.980
And voila we have hit our break point.
00:13:31.710 --> 00:13:36.440
So you get the same functionality,
the same call stock, and watch
00:13:36.490 --> 00:13:40.430
window, and locals that you have available
when you are normally debugging.
00:13:40.480 --> 00:13:44.900
So this makes it a whole lot easier
to debug unit tests that
00:13:44.950 --> 00:13:45.810
you have.
00:13:46.660 --> 00:13:54.060
Now, I see why it's failing, because
this line says that this
00:13:54.110 --> 00:13:54.870
should fail.
00:13:55.470 --> 00:13:58.580
Let's go ahead and change
that to true.
00:13:59.990 --> 00:14:04.160
Some of our editing continues functionality
there and awesome,
00:14:04.210 --> 00:14:05.280
our tests pass.
00:14:07.360 --> 00:14:18.870
So now you have written your code,
you have installed some packages,
00:14:18.920 --> 00:14:23.630
you have debugged it, you have analyzed
your perf and you have
00:14:23.680 --> 00:14:27.560
added unit tests. The next step in
this is deployment and luckily
00:14:27.610 --> 00:14:29.600
Visual Studio makes this super easy.
00:14:31.120 --> 00:14:34.310
You can simply go into solution
explorer, you can right click
00:14:34.360 --> 00:14:37.500
on the app and select publish and
00:14:38.930 --> 00:14:43.110
then enter in some configuration
information there. But what
00:14:43.160 --> 00:14:44.820
I'm going to
00:14:46.070 --> 00:14:46.720
do is use
00:14:48.650 --> 00:14:51.270
get deploy to deploy the app.
00:14:52.480 --> 00:14:54.520
So here I am, I went to try.azurewebsites.net
00:14:56.420 --> 00:14:59.480
and I am going to select an empty
site. So this gives you a
00:14:59.530 --> 00:15:02.930
quick app. You don't really have
to log in. I think you have
00:15:02.980 --> 00:15:09.820
to log in with some account. You can
login with your GitHub account.
00:15:10.330 --> 00:15:16.100
And we are going to select this
clone or push with get command
00:15:16.150 --> 00:15:18.960
and this website is available for
an hour and you can actually
00:15:19.010 --> 00:15:22.190
see it is counting down. It says
that we have 58 minutes left
00:15:22.240 --> 00:15:24.690
to use this website and then it's
going to delete it. So it's
00:15:24.740 --> 00:15:27.150
nice to kind of test some of the
features quickly, play around
00:15:27.200 --> 00:15:33.370
with Azure, all that jazz. So for
this we are going to go ahead
00:15:33.420 --> 00:15:39.190
and add our solution to source control
because we want to push
00:15:39.240 --> 00:15:40.810
from a repo.
00:15:42.460 --> 00:15:49.060
We will enter in commit message,
initial commit and make sure
00:15:49.110 --> 00:15:53.780
that node modules are not included
here, great. It is generally
00:15:53.830 --> 00:15:57.930
not a great idea to include node
modules in your repo and we
00:15:57.980 --> 00:16:00.030
will go ahead and commit, awesome.
00:16:00.800 --> 00:16:03.430
And now we will press sync
00:16:04.810 --> 00:16:08.420
and we will publish to a remote repository
00:16:09.810 --> 00:16:10.900
and select publish.
00:16:15.140 --> 00:16:18.820
So we are just doing a get push here
and then soon our app should
00:16:18.870 --> 00:16:20.280
be available.
00:16:20.930 --> 00:16:23.790
So now that our app is deployed we
can go ahead and we can switch
00:16:23.840 --> 00:16:29.770
into Azure app service, click
through to view the page
00:16:31.360 --> 00:16:33.440
and awesome our app is deployed.
00:16:34.610 --> 00:16:38.700
Oh and one more thing: whether you
are deploying to MAC, Windows
00:16:38.750 --> 00:16:43.180
or Linux be sure to check out our
cross platform remote debugging
00:16:43.230 --> 00:16:47.440
which helps get past those pesky "works
on my machine" sort of issues.
00:16:47.820 --> 00:16:51.380
And that's it, so go download the
tools and let us know what
00:16:51.430 --> 00:16:56.100
you think and as always let us know
if you have any questions,
00:16:56.150 --> 00:16:59.280
compliments or complaints. We would
love to hear your feedback,
00:16:59.330 --> 00:17:01.910
especially if it comes in the
form of a poll request.