Saturday, November 30, 2013

Setting up EmberJS to have more than one giant app.js and index.html

The Challenge
To provide direction on how to setup an EmberJS project that won't just consist of a couple giant files.  Once you've watched several of the many EmberJS tutorials out there, you start to come across a common theme - everything is coded in 2 files, the app.js and the index.html. This is great in the early part of the learning process, but at no point having 3 developers all working in the same file is going to work.   Here's a few options.

Option 1
It's really simple to to just include all the individual files in the index.html. It's not pretty but it's certainly the fastest way to get this going. Setup the folder structure as desired, break up the files however you want, and then do something like this:
 <script src="js/models/note.js"></script>
 <script src="js/controllers/notesController.js"></script>
 <script src="js/controllers/selectedNoteController.js"></script>
http://stackoverflow.com/questions/10396677/is-there-any-way-to-split-an-ember-js-app-across-a-few-files 

Option 2
Combine RequireJS with EmberJS.  I found a really good post on how to do this, but it felt like a step backward.  I like the idea of RequireJS, but the implementation felt messy.  You can read up on this here:  http://www.thecollman.com/blog/2013/06/20/integrating-emberjs-and-requirejs-part-1
But then right after I would highly recommend reading Tom Dale's thoughts on why they didn't just add this into Ember in the first place: http://tomdale.net/2012/01/amd-is-not-the-answer/   Now since I'm coming at this from a high level, I'd say after reading the first post, and being unfamiliar with the inner workings of RequireJS, I tend to agree, and going to a build system seems much more appealing, as it does come with a plethora of other benefits.

Option 3
Use a build system.  Sadly there's no real winner in this space, no defacto standard I can lean on.  But having said that, I like what the folks behind Yeoman have been doing and although the installation and setup is a bit tedious, it does work.  It uses technologies like Bower, Grunt and Compass to basically run an emberJS specific generator which sets up a project to the point that you can start coding right away and have a server live reload your web page as you code.  You can get started by following the instructions here:
https://github.com/yeoman/generator-ember/blob/master/readme.md

I tried to avoid installing Ruby but in the end I did need it to get everything working.  There are a few assumptions made by the authors (whom I would guess to be serious Ruby coders) that someone new to this whole thing would not know, regarding primarily Ruby and Compass.  And that is on how to install them:
Now run through the remaining steps as outlined in the readme.md for the generator-ember, and everything should work as intended, and you'll have a project ready to roll and served up in the browser in no time.

One thing you may notice is that several of the libraries, including Ember and Handlebars, are a bit out of date.  If you put your command prompt inside the project folder and run "bower update", it will go out and get updated versions of these libraries.  HOWEVER, bower looks to a file called bower.json when updating to find out what the update rules are:
[...]
  "dependencies": {
    "ember": "~1.2.0",
    "ember-data-shim": "~1.0.0-beta.2",
    "bootstrap-sass": "~3.0.0"
[...]
So be sure to update these version numbers to the versions you would like the project to be built on, then run "bower update" again.

Conclusion
You can use Yeoman to setup pretty much any project type you want, it's not restricted to just Ember.  It's a great little tool for evaluating the tons of frameworks that are out there today, often in several different implementations.  I've used it to setup Angular projects, Backbone, etc.  Here's a list to peruse:  http://yeoman.io/community-generators.html

In closing, I'd like to point out that ultimately the choice is yours on how you structure your next EmberJS project.  This will maybe aid in making that choice easier.

Handy Sublime Text Tip when working with Ember & Handlebars
By default, Sublime does not recognize .hbs files - which are effectively just HTML files, so you lose the pretty color coding and such.  Just remember to install the Handlebars package in Sublime and all will be well again in the world.  There's also Ember.JS Snippets which has some nifty auto-completion stuff, and of course Emmet. 



Friday, November 29, 2013

Setup IIS in Win7, an ASP.NET MVC 4 site with Windows Auth and SQL Auth using Identity

Today's Challenge:
Enabling IIS 7.5 on Windows 7 x64 for ASP.NET MVC 4 projects developed using Visual Studio 2012, using Windows Authentication, and passing user identity to SQL Server.  We need to be able to access the site remotely to test various versions of IE against the site.  

Haven't blogged in a while (like years and years), and this will hopefully be useful to others who run into similar issues.  I plan to cover a wide spectrum of technologies in this blog, mainly on a high level, as my general purpose is to evaluate technologies, understand their environments and empower my team to be efficient at implementing them.

Step 1:  Install IIS on Windows 7
  • Click "Start button"
  • in the search box, enter "Turn windows features on or off"
  • in the features window, Click: "Internet Information Services"
  • Check off "World Wide Web Services"
  • Hit OK
Let Windows do it's thing, then open up localhost in a browser, should see II7 splash screen. 
Success!

Step 2: Allow through windows firewall from remote browsers
Even after installing IIS, the windows installer will not open ports in the firewall for you.
  • Click "Start Button"
  • in the search box enter "Allow a  program through Windows Firewall"
  • Click "Change Settings"
  • Scroll to bottom and check both boxes for "World Wide Web Services (HTTP)", click OK.
Step 3: Create new Application in IIS
  • Click "Start Button"
  • in the search box, enter "Internet Information Services Manager"
  • Expand  left tree to get to Sites\Default Web Site
  • Right Click on Default Web Site and select "Add Application"
  • Enter an Alias "myaspsite" and set the physical path to something like c:\users\user\web\myaspsite
  • Hit OK
To test this, put a simple index.html file into the above folder and then browse to it:
http://localhost/myaspsite/index.html

Step 4: Publish your ASP.NET site
First ensure site runs on IIS Express (the default in VS)
Now publish the site by clicking Build/Publish Project
  • Create new profile
  • Select Publish method "File System"
  • Set target location to c:\users\user\web\myaspsite
  • Click Project \ Publish
(ran into an issue here where publish would fail with this error:
Error 4 Data at the root level is invalid. Line 1, position 1.
Had to re-save files in UTF-8 without BOM in Sublime)
Delete the index.html 
To test this, delete the index.html file in c:\users\user\web\myaspsite and then browse to it:
http://localhost/myaspsite

Step 5:  The first ASP.NET Error
Chances are you will get this error message if you followed the above steps exactly. If you have done this before you probably knew that certain less obvious steps need to be taken and won't see this.
The requested page cannot be accessed because the related configuration data for the page is invalid.
This configuration section cannot be used at this path. This happens when the section is locked at a parent level. Locking is either by default (overrideModeDefault="Deny"), or set explicitly by a location tag with overrideMode="Deny" or the legacy allowOverride="false".


Solution:
The problem is that you need to be far more specific in your installation of IIS:
  • Click "Start button"
  • in the search box, enter "Turn windows features on or off"
  • in the features window, Click: "Internet Information Services"
  • Click: "World Wide Web Services"
  • Click: "Application Development Features"
  • Check (enable) the features. I checked all but CGI.
NOTE: Enabling default IIS server does not enable ASP.NET
Resources:

Step 4:  The Second ASP.NET Error
Challenge: Asp.net still not working after above solution, but we now have a new error message:
HTTP Error 403.14 - Forbidden
The Web server is configured to not list the contents of this directory.
This time we need to either setup a new application pool or configure the default one to use ASP.NET 4
  • Click "Start Button"
  • in the search box, enter "Internet Information Services Manager"
  • Expand left tree to get to Application Pools
  • Select DefaultAppPool, then click Basic Settings... in right column
  • For .Net Framework version select .Net Framework v4.0.30319
  • Hit OK
Resources:
You need to assign the right version of ASP.NET to the application pool your application is using in IIS.

Step 5:  The Third ASP.NET Error
ASP.NET still not working, new error now:
Handler "ExtensionlessUrlHandler-Integrated-4.0" has a bad module "ManagedPipelineHandler" in its module list
This one took a while to solve.  Eventually the following solution worked for me:
Solution:
Try to re-register ASP.NET with aspnet_regiis -i. It worked for me.
A likely path for .NET 4 (from elevated command prompt):
c:\Windows\Microsoft.NET\Framework\v4.0.30319\aspnet_regiis.exe -i
Restart IIS service

Resource:

So now your asp.net application, if it does not have Windows Authentication enabled, should work.  If you don't need WinAuth, you can stop here :)

Step 6: Enabling Windows Authentication

We have Windows Authentication enabled in our asp.net project:
To make sure it works in IIS Express, in project hit F4:
  • Enable windows authentication
  • Disable anonymous authentication
Then edit web.config changing this:
    <authorization>
      <allow users="*"/>
      <!--deny users="?" /-->
    </authorization>
Make sure the user account you will be using to test has a password set.  Blank password will fail.

Issue:
Running it in IIS Express pops up the windows login prompt, however running it in IIS7 either fails or just comes up without prompting for login.  
The first step is to disable anonymous login for your Application in IIS:
  • Click "Start Button"
  • in the search box, enter "Internet Information Services Manager"
  • Expand  left tree to get to Sites\Default Web Site\myappsite
  • Click on myappsite and then click on Authentication.
  • Select Anonymous Authentication and then click Disable in right column.
But disabling anonymous login just brings up this message:
You are not authorized to view this page due to invalid authentication headers.
We need to first go back into Windows Features and turn on Windows Authentication for IIS:
  • Click "Start button"
  • in the search box, enter "Turn windows features on or off"
  • in the features window, Click: "Internet Information Services"
  • Click: "World Wide Web Services"
  • Click: "Click Security"
  • Check  Basic, Request, URL and Windows Authentication.  Hit OK.
Refreshing the app shows the same error.  Turns out that we need to edit some system files first, as this was not done by Windows in the above procedure.  Go into the application host config file located at <%SystemDrive%>/Windows/System32/inetsrv/config and change the below settings.  They are by default set to false.

<basicAuthentication enabled="true" />
<windowsAuthentication enabled="true"> <providers>
      <add value="Negotiate" /> </providers> 
</windowsAuthentication>
<windowsAuthentication enabled="true" useKernelMode="true" useAppPoolCredentials="true"> 
     <providers> <add value="NTLM" /> 
     </providers> 
</windowsAuthentication>

Restart IIS.
Refreshing the app should now prompt you to log in.  Anonymous authentication for the site should stay disabled!
Resource:

Step 7:  Passing User Identity through to SQL Server via ASP.NET app

You are trying to pass the user credentials that just logged into your asp.net app through to the database, rather than impersonating or hard-coding a specific login.  You get this error:
Login failed for user 'NT AUTHORITY\NETWORK SERVICE'
Issue:
iis7.5 sql integrated security not passing through

Solution:
Insert this into your asp.net project's web.config under system.web:
<identity impersonate="true"/>

Resources: