VMWare Fusion: Access SharePoint App from Mac Host

If you are a SharePoint App (Add-In) developer who uses a Mac and VMWare Fusion for VMs, you may wonder whether you can access your app from host. May be you want to test your app in Safari on Mac, or may be, just may be your VM is too slow when Chrome running on it (that was my case ūüėČ ). For what ever the reason, if you want to access your app from Mac, this is the guide for you.

First step of this guide is basic configuration of your VM, SharePoint and host Mac OS to make it available.

Add network adapter¬†to your VM and set its connectivity type to NAT (Share with my Mac on settings). You don’t have to do this if you already have a NAT adapter.¬†Now if you goto Network Connections on Windows, you must see an adapter which have IP begins with 172.xxx.xxx.xxx.¬†If you want to use the subnet as it is, you can ignore next steps¬†and¬†make IP address static on it to make sure it won’t change later. Remember to add the default gateway¬†when you add static IPs.
vmware-fusion-sp-app-on-mac-static-nat-ip

To change the subnet of your network adapter, you have to update internal settings of the NAT adapter. When you set connectivity type to NAT in any network adapter, it automatically point to vmnet8 internal adapter. What we are going to do is to update its settings so that you can add subnet mask you want.

  1. First turn off all the VMs running and quit VMWare Fusion
  2. Goto folder
    In Fusion 4.x and above:  /Library/Preferences/VMware Fusion/
    In Fusion 3.x and earlier:  /Library/Application Support/VMware Fusion/
  3. Open networking file and update subnet and mask as appropriate
  4. Goto folder  vmnet8  and open  nat.conf
  5. Update NAT gateway address which aligned to above subnet and mask
  6. If you are using Fusion 4.x, just start VMWare Fusion, 3.x and below, run below command

    Note: When using 4.x and above, do not use the boot.sh –restart command because it may result in unexpected behaviors. Instead, restart Fusion.
  7. Goto SharePoint VM, make NAT network adapter configuration static and update IP and gateway IP which aligns to above configuration.
  8. Disable firewall settings or allow access from host to Windows.
  9. Run ping on your IP from terminal to make sure it works.

This is not required, but if you want to access one of your web application from IP, you can update alternative access mapping of your web application to IP address and check whether it’s accessible via host. This is not recommended because, in this way you can only point to one web application, but you want all of your web applications accessible from the¬†host.

In my case, I have two completely different domains to web applications and apps.

Web applications: *.zeus.com
Apps: *.apps.contoso.com

What I want to do is to access both of these from my host. If you may notice, if I need to access only web applications and I only have few number of web applications, I can just update¬† hosts¬†file in Mac OS¬†and access it via host. But the issue is accessing apps, when you develop SharePoint Apps, each time you deploy it to SharePoint, it changes the domain name of the application, and we can’t add wild card domain names to¬† hosts¬†file. Because of this reason, we goto next stage of this tutorial.

  1. Install ¬†Homebrew¬†if you don’t have it on your Mac
  2. Install  dnsmasq , using this tool, you can setup your DNS resolver. Read more about dnsmasq here.
  3. Make sure you have  /usr/local/etc folder exists.
  4. Now I want to point above mentioned wildcard domains to my VM IP (172.16.36.132).

    Purpose of this command is to create  dnsmasq.conf file in   /usr/local/etc which have following lines.

    From this what is says is to point all traffic from *.zeus.com and *.apps.contoso.com to IP 172.16.36.132.
  5. Now we want Mac OS resolver to use  dnsmasq only for above wildcard domains. First we have to create folder which contains custom resolver domains.

    Add custom domain to use resolver in localhost.

    Now you have resolver pointed to  dnsmasq only for domains we need.
  6. Now we want to launch dnsmasq and restart it with Mac OS startup.
  7. Run pings on few¬†domain names under your wildcard domains to see the beauty. ūüėČ

Now you can peacefully try your SharePoint domains from Mac OS browsers and verify your application works on all environments.

Adding bookmarks to Azure Subscriptions

For sometime, we had 2 Azure portals, called classic portal and new portal. Time to time you may be a administrator who manages multiple subscriptions. In that case, you may be tired with navigating one subscription to other because, by default in both portals, when you log-in using your credentials, it navigates to default subscription, in most cases, it’s the first subscription you mapped to your account.

In both portals, it creates it’s own Microsoft account to manage subscription information in the system (¬†Updated:¬†Now you can map it to account in your own Azure AD or AD of your organization, so you can login from organization account to manage your organizations Azure subscription¬†).

Classic Portal

For classic portal, it’s easy to add bookmark to your subscription because when you change your subscription in the portal, you can clearly see the URL change for it. You will probably see something like this in the URL,

where {your-account-name}¬†is usually your email address without @ and top level domain. It will look something like¬†samwoutlook (samw@outlook.com) or¬†samwgmail (samw@gmail.com). Anyways it does not matter how it comes because if you remove unwated parts from URL and add it as bookmark, it’ll work without any issue.

New Portal

For new portal, as you may already noticed, you can’t add URL you see as bookmark because it’s not mapped to your subscription. You have to make sure that you are logged in from the credentials which mapped subscription to make sure that you see the correct subscription on load. But let’s say you are administer of multiple subscriptions, which doesn’t mapped to your credentials, in that case, you may have hard time logging into the correct subscription because it always goes to default subscription and then you have to navigate back from the portal itself to change the subscription.

Even-though you don’t see bookmarkable URL when you logged in, you can create bookmark which make it automatically logs into correct subscription.

{your-subscription-name}¬†can be found when you click on your account icon in top right, there you can see list of subscriptions you have. There you can find the subscription name which you can used to add to your url. It won’t necessary be derived from email address , it can be organization name as well.

Happy bookmarking people! ūüėČ

 

Visual Studio 2015: npm, Bower and Grunt – Part 1

Few days back Microsoft released Visual Studio 2015 CTP¬†6, I have been using Visual Studio 2015 since the early previews and when it comes to new changes they brought to Visual Studio and Microsoft ecosystem, it’s mind blowing. It’s really nice to see where the company goes with all the new things.

But this blog post series not about¬†Microsoft change, it’s about three¬†small components they integrated to Visual Studio 2015. These were there¬†in Visual Studio 2013 as well but wasn’t inbuilt.¬†Those are npm, Grunt, and Bower. This blog post is for people who have trouble understanding what these are¬†and would like to use these in Visual Studio 2015. First I’ll give introduction to each component and then I’ll show you how to use it in Visual Studio 2015.¬†This blog post is purely used to describe each component and what are key features in each component. In next blog post, I shall describe how to use each in Visual Studio 2015. If you know what these are, you may skip to next post.

  1. Visual Studio 2015: npm, Bower, and Grunt –¬†Introduction
  2. Visual Studio 2015: npm, Bower, and Grunt –¬†Practical usage

Package Managers

Before I talk about each component, I want to talk little bit about package managers. Think of a scenario where you develop an application which uses external libraries. In early days, what we have done was to go to developer site and download required library and add it to our project as a reference. There are two major questions we face when we download libraries from websites.

  • What about dependencies?
  • What if this packages got updated?

Usually we get all dependencies from developer site, but it really can be a headache to add those to project. And about updates, we usually won’t check developer site for updates if it isn’t absolutely necessary. You may argue that updating the package may break the code, true there’s possibility for that. But what if there’s critical update in the package, may be security related, or change in back-end API which got updated in library, we don’t have any option but to update the package. Issue is, in such scenario we may not know the required change until our application starts to fail.

This is where package manager¬†comes in. We can use the package manager to download and install required library to our project. Package manager will automatically download and install dependencies. When an update¬†comes, the package manager will notify us about the update, if we need, we can update it, if we think it’s not necessary we can ignore it too. But at¬†least we know we ignored it and we know what we are getting into, this is much better than not being aware of it.

One package manager we used since Visual Studio 2010 is NuGet package manager.

npm

npm is a package manager for JavaScript. Note that¬†npm only works for JavaScript libraries, in¬†npm context, we all these libraries as¬†packages. Limitation is we only can use¬†npm¬†to install these predefined packages which supplied by a repository. If we want something other than these packages, we can’t use npm for that task. Now you may ask, what do we need other than these packages, if this is such a sophisticated system, it should have all the libraries we want right? Answer is Yes and No.

Yes, because it has almost every commonly used JavaScript library¬†in it.¬†No, because if we want any other library which have¬†html,¬†css¬†or¬†images we can’t use¬†npm for that. To understand the reason for this, we should dig into the concept of¬†npm and understand what’s really behind it.

Even though we only see npm in Visual Studio, it really comes with Node.js. Now you may hear about Node.js, it is a server side JavaScript engine (like Apache, IIS). When we install Node.js, npm comes as default package manager for Node.js. When it comes to Visual Studio npm integration, we use npm to install developer dependency libraries. For example, we use npm to install both grunt and bower. 

When we work with¬†npm, understanding¬†package.json¬†is very important.¬†package.json¬†is the file which contains settings for given¬†npm package. In our context, this file contains¬†npm settings for our project.When we use¬†npm¬†with¬†node.js, name and version required and plays a major role, but in our case, even though those are required, it doesn’t matter what the values are. What we have to worry is¬†devDependencies¬†property of the configuration. There are actually two types of dependencies in¬†npm, those are application dependencies (dependencies) and developer dependencies (devDependencies). Difference between these two is, application dependencies will get published to your build output, developer dependencies only work on developer environment, they will not get published to build output.

One special thing to note in npm dependencies is that, we can use nested dependency libraries inside our application. This can cause duplication of libraries inside the application. This can be both advantage and disadvantage given the scenario.

There are few annotations you should know when mentioning version of the package you are going to use. I will describe each annotation below.

Version  Description of version
* any version
“”¬†(empty string) any version
 1.2.5 must match the exact version given
>1.2.5 must be greater than given version
>=1.2.5 must be greater than or equal to given version
<1.2.5 must be lesser than given version
<=1.2.5 must be lesser than or equal to given version
~1.2.5 should approximately equal to given version
^1.2.5 must compatible with given version
1.2.x must be subversion of 1.2 (not 1.3 or 1.4)
1.2.3 –¬†1.2.7 (range) ¬†must be between given range¬†(>=1.2.3 and <=1.2.7)
range1 || range2 || range3 must satisfy one of range given range
http://…….. url must point to tarball, tarball will be downloaded and installed to project (ex: https://bitsnorbytes.com/packages/abc.tar.gz)
git….. git project will be downloaded and installed to project
ex:
git://github.com/user/project.git#commit-ish
git+ssh://user@hostname:project.git#commit-ish
git+ssh://user@hostname/project.git#commit-ish
git+http://user@hostname/project/blah.git#commit-ish
git+https://user@hostname/project/blah.git#commit-ish
 user\repository download given repository from given user at GitHub
file:….. get package inside give folder. Folder must be either relative to project or absolute path

When we use¬†npm in Visual Studio 2015, ASP.NET 5 projects, we only use devDependencies,¬†there isn’t any restriction not to use¬†dependencies¬†in the project, but we have alternative way to manage application or client dependencies.

You can read more about package.json properties and specifically about dependencies property from below URLs.

Bower

I think you may have idea about what¬†bower is. It’s simply the tool which we use to install any library which going to need to application itself. This is the description given for library in official site.

Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for. Bower keeps track of these packages in a manifest file, bower.json.

Unlike¬†npm bower designed to work specifically for client side libraries. Still you don’t feel like it doesn’t justify the reason to use¬†bower instead of all other libraries right? Main reason to use bower¬†to client side libraries is because it doesn’t support nested hierarchy of libraries. It only support flat hierarchy and does not allow duplicates. In other words, you never can add multiple versions of same library for one project.

Same like npm, bower also have a configuration file.

In bower.json file, name is the name of the application. Property private is to inform bower that this application is a private application and not to publish it to bower registry (if application get registered in bower registry, other users can download application using bower). We can list all dependencies in dependencies property. We can use same version annotations as npm inside this to mention version of library. What specific to bower is the property exportsOverride. This property tells bower what kind of files should be downloaded from each package. This gives developer flexibility remove unwanted files from the package before deployment.

Grunt

Grunt is a JavaScript based task runner. We can use task runners to run predefined set of tasks repetitively on a project. A task can be either minifiying JavaScript, CSS files, compiling, unit testing or may be check code for errors (linting). For grunt also we have separate configuration file called Gruntfile. But unlike npm and bower, configuration file for Grunt can be either a JavaScript or CoffeeScript file. In Visual Studio we use gruntfile.js file to configure Grunt.

There are few sections in Gruntfile we need to understand. First part is the wrapper function. This function encapsulates the Grunt configuration.

This function also a comes from node.js, if I quote definition from node.js documentation,

The module.exports object is created by the Module system. Sometimes this is not acceptable; many want their module to be an instance of some class. To do this, assign the desired export object to module.exports. Note that assigning the desired object to exports will simply rebind the local exports variable, which is probably not what you want to do.

In simple terms, if we want to expose something inside script file to use outside of file it self, we can use module.export to do that task. You can learn more about functions of module.export from this blog post.

Second part of Gruntfile to understand is the grunt.initConfig section.

As method name says, this initialize the Grunt configuration for each task. For example in here it configures bower task. Now the question you should have is what is a task and how we configure them. When it comes to Grunt a task can be anything. We can create tasks as we desire. In Visual Studio 2015 web project, it only configure the bower task. If you check little bit below, you can see how it create new task.

From this line it says that Grunt should register bower task passing install parameter to it. Basic syntax of registering task is,

You can enter a task name, this is actually a task collection name, whenever you load tasks with this name, Grunt will run all the tasks registered under this name. Task description is optional. When you name a task, you can name parameters of the task using “:” notation. For example, “bower:install”, in here task name is bower and parameter is install.

And final line of Gruntfile,

This allows up to manage bower packages through Grunt, for example, minifying, testing and testing packages through tasks.

This is the end of the introduction to npm, bower, and Grunt. I’ll talk more about how to use these in Visual Studio 2015 in my next post.

ScottGu’s Blog – Introducing ASP.NET 5

ASP.NET 5 is an open source web framework for building modern web applications that can be developed and run on Windows, Linux and the Mac. It includes the MVC 6 framework, which now combines the features of MVC and Web API into a single web programming framework.  ASP.NET 5 will also be the basis for SignalR 3 Рenabling you to add real time functionality to cloud connected applications. ASP.NET 5 is built on the .NET Core runtime, but it can also be run on the full .NET Framework for maximum compatibility.

via ScottGu’s Blog – Introducing ASP.NET 5.

Azure Site Extensions

It’s not been a month since I’ve started blogging, and when I had to choose where to host my blog, I thought “Why Not Azure?”, I like Azure and I already have some experience using Azure. So, I created WordPress site on Azure and started blogging.

My first adventure with Azure and my blog was to setup CDN for my blog. I tried few CDN providers but none able to satisfy me, some had too much features which I don’t need, some were too expensive for me. Then I read about Azure CDN, I thought “Why Not Azure CDN?” and here I am, using Azure CDN for my blog. True it’s not featuristic as other CDN providers, true it does not have much control either, but still it works perfectly for my blog and was able to improve speed of my blog. When I compare pricing, it’s much cheaper than any other CDN provider because Azure bill you only for usage.

But today I experienced new thing in Azure. I never new this feature and it is something to be expected from new Microsoft. It all started when I as running around new Azure Portal. it’s been few days since I noticed that all new features to Azure isn’t available on old Azure portal. For example, search preview isn’t there on old Azure portal.

As you can see in my topic, this is about Azure WebSite extensions. It’s not something many people talks about, but I think it’s something every Azure WebSite owner know about. Reason? It give more options and features to site owner which are necessary to control the site.¬†First of all I’ll show you how to see these site extensions.

1. Goto your site on new Azure Portal.

2. Goto Settings of WebSite, there you can see Extensions.

3. There you can see list of extensions, for me I installed, “Site Admin Tools”, “phpmyadmin” and ¬†“phpmanager”

4. After the installation, you can navigate to extension by clicking browse.

Now as you may can see, it does have many powerful tools you may need, phpmyadmin, it’s must when comes to managing MySQL databases, and phpmanager, can be used to import¬†.htaccess¬†files to¬†web.config¬†and there are many other tools you can use to administer your site. There are extensions to get logs of your site, file and image minifiers and many more.

Try and let me know your experience. Have fun with Azure Extensions!! ūüôā

Getting started with ASP.NET 5/ vNext and MVC 6

Today I came across with good white paper written by Telerik, it discusses about some of the burning questions we have about ASP.NET 5. For me, it answered lots of questions I had about ASP.NET 5. This is the link for white paper.

After I read this white paper, I thought to compile a list of resources to get insight about ASP.NET 5/vNext and other related technologies like MVC 6.

First of all I’ll share this course from Microsoft Virtual Academy about ASP.NET 5, this is a¬†lengthy course about ASP.NET 5 but it definitely worth the time.

These are some of blog posts I found from various locations.

This is another set of blogs about ASP.NET 5 and MVC 6 by Stephen Walther, since world now move towards client-side MVC frameworks, I think this is good set of tutorials about how to use ASP.NET 5 with AngularJS.

I will update this post time to time with new resource I see. Hope this helps you. ūüôā

[Update 2015-02-10]

Good article about debugging ASP.NET Framework libraries using VIsual Studio 2015.

[Update 2015-02-24]

Found new set of blogs by Filip W about few advanced topics on ASP.NET 5 and MVC 6

ASP.NET MVC Controller Vs. Web API – 5 Things You Should Know – BinaryIntellect Knowledge Base

ASP.NET MVC allows you to expose functionality through action methods. One can also expose the functionality as a Web API. Beginners often find it confusing to decide when to go for an MVC controller driven approach and when to go for a Web API. Here are five main considerations that can be helpful while taking a decision.

via BinaryIntellect Knowledge Base | .Net & Web Development – ASP.NET MVC Controller Vs. Web API – 5 Things You Should Know.

One reference architecture in PaaS cloud solution. – Jian Wu’s Blog

It is from projects to demonstrate cloud energy and relieve big headaches in traditional solutions, the architecture can be realized smartly with public cloud while keep connected with local network, and the reference may help in Windows Azure, Amazon Web Service and more cloud platforms.

One reference architecture in PaaS cloud solution. - Jian Wu's Blog. - Site Home - MSDN Blogs

via One reference architecture in PaaS cloud solution. – Jian Wu’s Blog. – Site Home – MSDN Blogs.

Jeff Putz – Repositories gone wild

One of the very beneficial side effects of the rise of MVC in the ASP.NET world is that people started to think a lot more about separating concerns. By association, it brought along more awareness around unit testing, and that was good too. This was also the time that ORM’s started to become a little more popular. The .Net world was getting more sophisticated at various levels of skill. That was a good thing.

via Jeff Putz – Repositories gone wild.