Just Coding https://docs.microsoft.com/archive/blogs/rido/feed.xml Back to the future with dotNet Fri, 05 Oct 2018 01:10:43 GMT en-US hourly 1 Back to the future https://docs.microsoft.com/archive/blogs/rido/back-to-the-future Fri, 05 Oct 2018 01:10:42 GMT https://blogs.msdn.microsoft.com/rido/?p=2455 here and you can see the source code in https://github.com/ridomin/backtothefuture]]> My NDC Oslo talk about JS Mobile development is live https://docs.microsoft.com/archive/blogs/rido/my-ndc-oslo-talk-about-js-mobile-development-is-live Wed, 06 Jul 2016 18:15:00 GMT https://blogs.msdn.microsoft.com/rido/?p=2395 Best Practices for using JS in your mobile app - Ricardo Minguez Pablos from NDC Conferences on Vimeo.]]> Ionic 2 and Visual Studio https://docs.microsoft.com/archive/blogs/rido/ionic2-and-visual-studio Wed, 11 May 2016 22:36:25 GMT https://blogs.msdn.microsoft.com/rido/?p=2325 IMPORTANT UPDATES.
July 1, 2016 Ionic 2 Beta 10.
Although Ionic 2 is still in beta, the team working on Tools for Apache Cordova is so excited that we want you to be able to start building Ionic 2 apps in Visual Studio today. In this post I will walk through some tips and tricks you can use to avoid common problems working with Ionic 2 in Visual Studio.
This article targets Ionic 2 Beta 6,  based on Angular 2 Beta 15. Using Ionic 2 CLI Beta 25
Please note that this post may be outdated once Ionic releases a new version

Creating an Ionic 2 project

The first step will be to obtain the latest Ionic 2 beta version: npm install -g ionic@beta Then you will need to create the project. ionic start MyIonic2App --v2 --ts --template sidemenu --skip-npm There are some parameters you will want to use:
  • --v2 specifies that you want an Ionic 2 project
  • --ts specifies that you want to use TypeScript (if you do not specify --ts the project will be created with ES6, and this is not supported by VS yet)
  • --template sidemenu specifies the template you want to use, in this case we will be using the sidemenu template
  • --skip-npm disabled the npm package restore
As you can see in your console, ionic is not only creating all the project files, but it's also Installing all the npm packages specified in package.json. You need to understand that ionic will reuse the same npm version you have installed globally (see below a note about node versions in Visual Studio).

Start Building in Visual Studio

Ionic 2 comes with a set of predefined Gulp tasks that will help you to process the .ts and .sass files from the app folder and generate the output in the www/build folder. So, we need to customize the Visual Studio build process to set your project up with Visual Studio’s building and debugging functionalities.
  1. Import your Ionic 2 project into Visual Studio using the File->New->Project from existing code wizard (or you can use the tool I created for that: ocpief)
  2. Modify your project's gulpfile.js file within Visual Studio by adding as the first line in the file: var Promise = require('es6-shim').Promise;
  3. Open the solution explorer side-pane, right click on “Dependencies”, and select Restore Packages
  4. Open the Task Runner (View->Other Windows->Task Runner Explorer) and right click on build to set your machine up for build, or watch to build with Live Reload (in Ripple only)
  5. If you did't specify --skip-npm you will need to delete the node_modules folder. In the command line, navigate to the root of your project and delete your current node_modules using the command rd /s /q node_modules Since Visual Studio uses its own version on npm, we want to remove the ones generated during Ionic2 project creation.
  6. Now, build and deploy the normal way using the menu bar
tasks
Note that only the most recent versions of Ripple will support Angular2. If you have used Ripple before you should delete the cordova cache and build again. More info in the TACO Developer blog

Known Issues with Ionic 2 and Visual Studio

There are some cases where the Task Runner Explorer can't list the gulp tasks, and fail. tre_error To see the error details you need to go to the Output Window and select the Task Runner Explorer Log. nodesass To solve this issue, delete the node_modules folder and try to restore it again from Visual Studio

Use VS for editing only, and build & debug using Ionic Serve

Unfortunately, you can’t use Ionic Serve to debug in the Browser at the same time as Visual Studio. Ionic serve uses a build process that creates files in node_modules\ that is incompatible in Visual Studio. So, if you want to use Visual Studio Intellisense, but not to build and deploy, here is how you build your project from the command line:
  • Starting at the root of your project folder, enter node_modules\.bin\gulp build to get your output in your www folder
  • Or enter node_modules\.bin\gulp watch to get your output in your www folder with live reload
  • Then, entering ionic serve will build, monitor for changes, and also launch your default browser
From here you can import the project in Visual Studio using the File->New->Project from existing code (or my tool ocpief), and can start editing your project.

A note on Node versions and Visual Studio

As any other JavaScript tooling Node and NPM becomes the de-facto standard to get your JavaScript dependencies, however there are some limitations based on the version of NPM you are running.

Default versions installed with Visual Studio

If you installed TACO (Tools for Apache Cordova), you will have a globally installed version of node 0.12.2 and NPM 2.7.4. However the NPM Dependency Manager and the Task Runner Explorer will use node 0.10.31 and NPM 1.4.9. You can find these versions here: C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\
UPDATE. If you installed the new Web Tools version (as described here), your node version will be 5.4.1 and npm 3.3.4, both located here: C:\Program Files (x86)\Microsoft Visual Studio 14.0\Web\External

Recent Node versions and Visual Studio

You can configure the npm package restore and task runner explorer to use a custom version of node, as described here. In this case you won't need to configure the ES6-Promises, but if you go this route, remember that you should delete and restore your node_modules folder every time you change your node version.]]> OCPIEF means Open Cordova Project in Existing Folder https://docs.microsoft.com/archive/blogs/rido/ocpief Tue, 10 May 2016 22:25:21 GMT https://blogs.msdn.microsoft.com/rido/?p=2286 Apache Cordova, probably you are using Command Line tools to scaffold your project, some examples are cordova, ionic, angular-cli etc... Once you have your project created you want to open the project and start making changes.

Open in VSCode

If you use VSCode you can use the Cordova Extension and with a simple code . command you will open your editor in the current folder.

Open in Visual Studio

But if you are using Visual Studio with Tools for Apache Cordova (aka TACO), how can you open that project? The official way to do it is using the "New Project From Existing Folder", available in File -> New -> Project From Existing Code, then navigate to that folder, setup a name and you are ready to go. NewProjectTACO However, if you do these steps several times (like me), you probably need a faster way to do the same thing, and this is why I created the OCPIEF tool. To install it run: npm i -g ocpief So the next time you want to switch from you CLI to VS, just type ocpief and the tool will create a jsproj file and will open it in Visual Studio. The tool is available in NPM and you can contribute to the source code in GitHub]]> Cordova demo app for Build 2016 https://docs.microsoft.com/archive/blogs/rido/cordova-demo-app-for-build-2016 Thu, 31 Mar 2016 19:42:03 GMT https://blogs.msdn.microsoft.com/rido/?p=2263 Channel9 You can find the code in github https://github.com/microsoft/build2016-vsmobile ]]> Serving Static Content With IISExpress https://docs.microsoft.com/archive/blogs/rido/serving-static-content-with-iisexpress Wed, 30 Sep 2015 17:08:00 GMT https://blogs.msdn.microsoft.com/rido/2015/09/30/serving-static-content-with-iisexpress/ If you work in a modern frontend, you probably use node to server your static content.

Why not use IISExpress to do the same thing? Running iisexpress.exe with the /path parameter should be enough, but the path should be an absolute path, so to do so in dynamic way you can use

"%ProgramFiles(x86)%\iis express\iisexpress.exe" /path:%cd%

]]> New Era of this blog https://docs.microsoft.com/archive/blogs/rido/new-era-of-this-blog Wed, 30 Sep 2015 16:52:45 GMT https://blogs.msdn.microsoft.com/rido/2015/09/30/new-era-of-this-blog/ This week is a very special week. Me (and my family) decided to move to Redmond to join the VS team.

I expect to start blogging again, so stay tuned.

]]> App Studio at Build 2014 Conference https://docs.microsoft.com/archive/blogs/rido/app-studio-at-build-2014-conference Thu, 24 Apr 2014 15:18:00 GMT https://blogs.msdn.microsoft.com/rido/2014/04/24/app-studio-at-build-2014-conference/ Several people is asking for the code I used in the App Studio @//build:

https://channel9.msdn.com/Events/Build/2014/2-565

Here it is.

]]> Updated Traces for .Net https://docs.microsoft.com/archive/blogs/rido/updated-traces-for-net Wed, 02 Oct 2013 12:25:00 GMT https://blogs.msdn.microsoft.com/rido/2013/10/02/updated-traces-for-net/ Loooong time ago I wrote: https://blogs.msdn.com/b/rido/archive/2004/05/07/logsandtraces.aspx

Today I've updated with a revision to use some features that were not available then, like the TraceEventType

As usual it's in my Gist: https://gist.github.com/ridomin/6798405

]]> .Net for Business (a Tech Guide) https://docs.microsoft.com/archive/blogs/rido/net-for-business-a-tech-guide Wed, 03 Jul 2013 13:49:16 GMT https://blogs.msdn.microsoft.com/rido/2013/07/03/net-for-business-a-tech-guide/ In case you missed the announcement in last build, Microsoft Corp have released a set of whitepapers to help organizations make proper use of .NET related technologies:

https://www.microsoft.com/net/nettechnologyguidance

It's a valuable resource in case you need to understand how to use .NET inside a big organization 

 

]]>