Tarkus

Web and cloud development

How to Customize Twitter Bootstrap with Git and NuGet in Visual Studio

The following workflow can be used for advanced customization of any 3rd party library containing source code and is available on NuGet package gallery. Like, for example, Twiter.Bootstrap.Less NuGet package.

Assuming you have a Visual Studio solution with a web application project in it. This solution is already under Git source control.

Before installing a new NuGet package, you create a special branch for it.

Create a new Git branch in Visual Studio

Install Twiter.Bootstrap.Less NuGet package, commit these changes to the ‘bootstrap’ branch, and merge it with the ‘master’ branch.

Merge Bootstrap branch into Master in Visual Studio

From there on you can make any customization you want to Bootstrap files (*.less) in your ‘master’ branch - move them around to suite your preferred project structure, change file contents, add or remove files etc. And whenever a new version of Bootstrap library released, you update it in your project via NuGet on a separate ‘bootstrap’ branch, then merge it with the ‘master’.

Customized Bootstrap project structure

Finally, for automatic compilation of .less files in your project you may want to use Node.js and RECESS (recommended by Bootstrap team).

Windows Azure VMs Remote Management

The regular way to manage Windows Server machines is to setup and use Remote Desktop. However, sometimes that’s not the most convenient way of managing your servers. Let me show you how to manage Windows Azure VMs from a local machine using Server Manager and PowerShell Remoting.

Step 1. Download and install Remote Server Administration Tools for Windows 8.1 aka Server Manager (assuming your local machine is Windows 8.1; or choose an appropriate version of this tool)

Step 2. On each VM go to Server Manager > Local Server > Properties and enable Remote management (assuming you have Windows Server 2012 R2 installed on your Windows Azure VM roles):

Enable remote management

Then open Windows Firewall with Advanced Security > Inbound Rules > Windows Remote Management (HTTP-In) (Public Profile) > Properties:

Windows Remote Management (HTTP-In)

Add your public IP (from which you’ll be connecting to your Azure VMs) to the scope:

Remote IP address

Step 3. For each Azure VM add WinRM (TCP 5985) endpoint via Windows Azure Management Portal:

WinRM Endpoint

Step 4. Add your Azure VMs to the trusted hosts list by running the following PowerShell script:

Set-Item WSMan:\localhost\Client\TrustedHosts SERVERNAME.cloudapp.net -Concatenate -Force

Step 5. Open Server Manager on your local workstation and add remote VM servers to the list (by DNS name):

Add Remote Server

Right-click on a newly added server in the list > Manage as… and enter your VMs administrator credentials:

Manage as...

That’s it! Now you can manage your Azure VMs from a single place.

Remote Servers

If you need a command line access just right-click on a server > Windows PowerShell, which will start up a PowerShell Remoting session:

PowerShell Remoting

Lean Startup / Business Model Canvas

For those of you exploring the nice world of entrepreneurship and startups I want to share a Word document template of a business model canvas optimized for Lean Startups. For more info read the «Running Lean» book by Ash Maurya and «The Lean Startup» by Eric Ries.

Lean Startup, Business Model Canvas, Lean Canvas, Template

Download: Business Model Canvas.dotx (Microsoft Word template)

AngularJS, ASP.NET MVC and SEO

What if you want your single-page app to behave like a regular multi-page website when the client’s browser doesn’t support JavaScript? Here is an example of how to implement it with AngularJS and ASP.NET MVC:

Demo: http://angularjs-seo.tarkus.me/

Create a new ASP.NET MVC 4 project. Extract HTML from within the <body> tag of the /Views/_Layout.cshtml file into a separate layout (_BodyLayout.cshtml).

At the top of _BodyLayout.cshtml, specify the parent layout and make sure it will be set to null if the request is made with the “X-Requested-With: XMLHttpRequest” header by using Request.IsAjaxRequest()

Update the default layout name in /Views/_ViewStart.cshtml.

Add a reference to angular.js and your custom app.js files in the parent layout (_Layout.cshtml). Add <ng-view>@RenderBody()<ng-view> into _Layout.cshtml.

Add the ng-app=”App” attribute to the <html> tag and insert the following code into your app.js file with routing information:

var app = angular.module('App', []);

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $routeProvider
        .when('/', { templateUrl: '/home/index' })
        .when('/home/about', { templateUrl: '/home/about' })
        .when('/home/contact', { templateUrl: '/home/contact' });
    $locationProvider.html5Mode(true);
}]);

That’s it!

Sample project - AngularJS SPA Template for Visual Studio

AngularJS + ASP.NET MVC: Q and A

In this blog will I try to answer a few questions you may have if you’re starting single-page web application (SPA) development with AngularJS and ASP.NET stack of technologies (ASP.NET MVC, ASP.NET Web Pages, ASP.NET Web Api, SignalR, Entity Framework, TypeScript…)

Q: Will I have any issues if I choose ASP.NET on a back-end for my single-page app? What are the alternatives?

Many folks are happy using Node.js + Express on a back-end. But if you’re already familiar with .NET you may take an advantage of using Visual Studio IDE + Visual Studio Online (formerly TFS), which gives you almost all the required tools out of the box like - great code editor and debugger, Git source control, agile/scrum planning, unit / load / UI testing, continuous integration, automated deployment, Windows Azure dev tools (see what’s new in Visual Studio 2013).

Also with ASP.NET you have a choice of using most of the required libraries and components required for building single-page apps from a single vendor, built on a common architectural ground (see OWIN). In overall I don’t think you’ll have any issues if you go ASP.NET route.

Q: Which project template to choose for an AngularJS web app?

Starting with an “Empty” project template is good I think, it will keep your project clean and free of some artifacts you may never use (for example, are you sure you need ASP.NET MVC-based help pages for your RESTful service if you choose “Web Api” template?)

AngularJS SPA Template for Visual Studio

Q: Should I use ASP.NET MVC, ASP.NET Web Pages or just plain HTML pages for my AngularJS views (templates)?

If you choose ASP.NET MVC, you may end up implementing two MVC code bases - one for server-side and another for client-side. I lean towards keeping things simple and avoid using ASP.NET MVC on the server side unless you’re really need one; use ASP.NET Web Pages intstead. ASP.NET Web Pages (.cshtml) also give you more flexibility in comparison to plain HTML-based templates (.html) - Razor HTML helpers, an ability to have nested templates, layouts, easier to optimize website for search engines (SEO).

Q: OK. How do I add ASP.NET Web Pages support to my project?

Right-click on the project in Solution Explorer > Manage NuGet Packages:

Microsoft ASP.NET Web Pages NuGet Package

Other than installing “Microsoft ASP.NET Web Pages”, you need to include an appropriate sections to your Web.config file:

ASP.NET Web Pages Web.config

Here you may want to add some other namespaces you want to make available by default inside Razor pages.

Q: OK. I’m using ASP.NET Web Pages instead of MVC. Where are the @Model and other HTML helpers?

ASP.NET Web Pages has a different set of HTML helpers, for example, instead of @Model you can use @PageData etc.

For more info, visit this: http://www.asp.net/web-pages

Q: How to set page titles with AngularJS?

The easiest way is to store page titles alone with your route information (in case you’re using ngRoute ur UI Router). Then you can attach a handler on ‘$routeChangeSuccess’ event and update the title of a page whenever URL path is set or updated.

If your page titles are not static (you don’t know them upfront, but generate based on a response from a server) then a good place to set them would be - inside controllers. For example:

AngularJS Page Title

And you would need to add ng-bind attribute to the <title> element in a layout template:

ASP.NET Web Pages Title

Finally, for SEO reasons, you may also want to set page titles in partial views as well:

AngularJS Page Title

I’m currently updating this post. Please, come back later.

For code samples visit: AngularJS SPA Template for Visual Studio