grunt serve in Visual Studio 2015 linked to IE for debugging? - angularjs

I inherited an AngularJs application that was built using WebStorm, NodeJs, Npm, Grunt etc.
The app is set up in such a way, that I have to run grunt serve to initialize a local server that hits the API and return data. If I simply run it as Localhost (through either WebStorm or VS), it does not pass validation to return my data through the API.
My question is; Is it possible to link grunt serve to IE in Visual Studio, in the same way you would run an application in Debugging (F5) mode?
I enjoy using Visual Studio, and like debugging and stepping through my code with IE, as this allows me to set breakpoints in my JavaScript and C#.

I would suggest that Grunt Launcher will help you:
https://visualstudiogallery.msdn.microsoft.com/dcbc5325-79ef-4b72-960e-0a51ee33a0ff

Although I did not manage to link "grunt serve" to IE in Visual Studio, I was able to debug using IE, by running my project in Debug mode (F5).
I simply copied the path with token created when running "grunt serve", and used this as my path in Local Host when debugging in Visual Studio. This way it connects to the API, and is validated.

Related

How do I run an Angular.js page without using Visual Studio?

My friend developed a basic Registration page using Angular.js and bootstrap in Visual studio. He sent me the 'log' folder which contains all the dependencies and files related to the project.
I don't have visual studio and want to work on the project without the use of visual studio.
When I try to Open up the 'index.html' page, its showing everything except the registration form itself.
How do I run the page without using Visual Studio?
You don't need Visual studio to run an Angular app. It's all Javascript and you can run it locally. What I suspect is that your code requires a local server running. If I am correct, then your question is really, how do I get a localserver running?
It's been answered before here: How to create a localhost server to run an AngularJS project
Long and short, install node.
Then
Install: npm install -g http-server
Then
run http-server -o
Check console for errors. Check if angular and other files are loaded.

Webstorm Debugger Does not Connect to Angular Application

I am trying to debug an Angular application using IntelliJ Webstorm (10.0.1). I created an application with Yeoman (1.4.6) using the command yo angular. I then opened the directory as a project in Webstorm. (This is the same configuration as described in "Grunt Server and WebStorm javascript debugging (and SpyJS) not working".) I can run the application using grunt serve both from the command line and from within Webstorm. I now want to set breakpoints and step through the Javascript in Webstorm.
I followed the instructions in How to debug AngularJS with Intellij, but debugging still does not work. Specifically, I start the app with grunt serve and then try to connect with my debug configuration, but the debugger never connects. The Debugger window in Webstorm reads "Waiting for connection from JetBrains IDE Support Extension for Chrome (IDE port 63342)."
I am on OS X (10.10.2). My default browser is Chrome (41.0.2272.118). The JetBrains IDE Support extension (2.0.7) is installed and enabled in the browser. It is using the default port 63342.
My Angular application is running in the default location http://localhost:9000.
In the debug configuration, my "URL" is http://localhost:9000/ and I map the index.html in my project to the "Remote URL" http://localhost:9000/index.html.
I am asking this separately from the other Webstorm debugging questions on StackOverflow because those do not mention the "Waiting for connection" message and their solutions are to follow the instructions that I started from.
Any ideas on what I'm doing wrong?

Visual Studio 2013 protractor intellisense

First of all, I am very beginner in using node.js / angualar.js /protractor.js and jasmine.js stuff and I am not from web dev corner at all.
But for now, I just want to create some protractor test for an angular app and this is actually working quite fine. But I am wondering if it's possible to get VS2013 intellisense working?
I would really appreciate if VS would suggest functions of objects like 'browser.xxx'.
I am really stuck with that, looking forward for some hints!
thx Florian
Ill just give an answer to myself! To get Visual Studio 2013 intellisense and debugging working for angular protractor tests, follow these steps:
Install node.js
Install protractor (global) („npm install -g protractor“; „webdriver-manager update“)
Install Visual Studio 2013 node.js Tools
Install Visual Studio 2013 TypeScript Tools
Create a new project „Typescript\Node.js\Blank Node.js Console Application“
Add your „conf.ts“ and „spec.ts“ files to the project
Right click on „conf.ts“ and select „Set as node.js startup file“
In „Project properties“ set your „Node.exe path“ to your protractor executeable file, eg. „C:\Users\myUser\AppData\Roaming\npm\protractor.cmd“
Download typescript DefinitelyTyped definitions from git hub:
https://github.com/borisyankov/DefinitelyTyped
In your VS2013 project folder „Scripts\Typing“ create the subfolders „jasmine“, „protractor“ and „selenium-webdriver“
Add the typing definition files "angular-protractor\angular-protractor.d.ts", "jasmine\jasmine.d.ts" and "selenium-webdriver\selenium-webdriver.d.ts" into the appropriate project folders you created in the step above.
Write your protractor test and enjoy code highlighting
Start webdriver-manger „webdriver-manager start“
Hit „F5“ to start debugging
Enjoy!
Florian

Debugging AngularJS Code in JHipster (Intellij)

I am running Application.java from within IntelliJ and Grunt Serve from the Command Window. Thus, I can debug Java code and Live Reload changes to Html. But I cannot set breakpoints or trace Javascript files.
I know I could debug in Chrome, but I rather debug in IntelliJ if at all possible.
I would appreciate any suggestions.
Thanks
You should be able to do this with the NodeJS plugin for IntelliJ. I have it installed on my machine and I'm able to right-click on my project's Gruntfile.js and select Run or Debug.

Run Protractor Tests in Visual Studio 2013

I have been able to write tests using protractor in VS2013, however, when I open my "Test Explorer" tab and right click on the test I want to run it fails within seconds. I'm wondering if it is not possible to run protractor tests this way and if they can only be run from the cmd.
I have checked out the links left on other questions on this site and none of them have fixed the issue I am running into.
Yes that is possible to Run the Protractor Tests in Visual Studio.
To run the Tests, you need to create a Node.Js Console application (Get template online) and create the project.
Here are the Steps:
Install Node.js
Install Node.js Tools for Visual Studio
Configure JDK
Create a Node.js Console Application and install Protractor
npm install protractor --save-dev
Update selenium standalone server
.bin\webdriver-manager update
Start selenium standalone server
.bin\webdriver-manager start
Run test specs
.bin\protractor protractor.conf.js
To get the tests in the Test Explorer in Visual Studio 2013, you need to get the Chutzpah Test Adapter which is a extension of visual studio.
you can either go to https://visualstudiogallery.msdn.microsoft.com/f8741f04-bae4-4900-81c7-7c9bfb9ed1fe and download or go to Tools => extension and updates => search for this tool.
Once you have installed, you can run the tests directly from visual studio.

Resources