Spring security and Cors with angularjs

I used this as the basis of what I was doing with cors and angularjs.

Cors and Angularjs

I ran into the problem that I was also using Spring Security.

In my web.xml originally my cors filter was included after the spring security filter.

This stopped my filter from being called and returning the correct headers.

 

I corrected it by moving the cors filter above the security filter like below.

 

<filter>
        <filter-name>corsFilter</filter-name>
        <filter-class>com.myproject.config.CorsFilter</filter-class>
    </filter>

<filter>
        <filter-name>springSecurityFilterChain</filter-name>
        <filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter-class>
    </filter>

    <filter-mapping>
        <filter-name>corsFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

    <filter-mapping>
        <filter-name>springSecurityFilterChain</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

Stubbing out angularjs backends for testing via fixtures simplified.

Original Blog post this comes from.

http://michalostruszka.pl/blog/2013/05/27/easy-stubbing-out-http-in-angularjs-for-backend-less-frontend-development/

 Previous Usage

I have been using the other solution that the article describes to create a fixtures service for testing purposes but that would mean including a grunt string substitution module to ensure I did not include it in the production app.

What I liked about the new style of doing things

Using the way from the blog you can stop changing your ng-app in your index.html file and just use ?nobackend on your urls to hit the fixtures service.

My Changes to make it more useful.

Changes to index.html to ensure it is not included in production

I have made a change to my index.html file to ensure it is not packaged when you run grunt build to get the minimised files.

The below tells the build task to exclude these files.

You have to add your angular-mocks to the app else it will not be able to hook into the $httpbackend for stubbing.

<!-- build:remove -->
  <!-- Local stubbing service for development -->
  <script src="bower_components/angular-mocks/angular-mocks.js"></script>
  <script src="scripts/mock/httpBackendStub.js"></script>
<!-- endbuild --></p><p>

Modification to the solution to continue to serve html files from angular app

Here is the modification to the httpBackendStub.js to allow the angular app to still route to the html files without having to run a separate server as the blog describes.

 ......

.run(function($httpBackend) {
  $httpBackend.whenGET(/^views\//).passThrough();
  $httpBackend.whenGET( 

.......

Protractor test changes.

Make sure to update your protractor tests to use the new ?nobackend url and fix any test assertions.

Protractor Issues

This may cause problems with any relative url links.  I have not investigated enough to find a good solution for this.

Grunt Proxy setup for Yeoman 1.2

Purpose

I was wanting to keep my front end project separate from my backend.  This meant that the back end was on a different port than the yeoman server.  This causes cross site scripting issues with the yeoman server.  I figured out the only way around this was via a proxy.

I found this article from Mike Partridge from Jan 2014 which was a good starting point but the yeoman build has changed so this is no longer working.

http://www.hierax.org/2014/01/grunt-proxy-setup-for-yeoman.html

Tools used

  • grunt-cli v0.1.13

  • grunt v0.4.5

  • yeoman 1.2.0

  • grunt-connect-proxy 0.1.10

  • angular-generator 0.9.1

Change to instructions

The only change to the directions in the post from hierax is the following.   I just changed the things that are pushed into middleware.  Live reload no longer has a base [ ] block.

Step 3 should now look like:

livereload: {
 options: {
 open: true,
 middleware: function (connect) {
   // Setup the proxy
   var middlewares = [require('grunt-connect-proxy/lib/utils').proxyRequest];

   middlewares.push(connect.static('.tmp'));

   middlewares.push(connect().use(
     '/bower_components',
     connect.static('./bower_components')
   ));
   middlewares.push(connect.static(appConfig.app));

   return middlewares;
 }
 }
 },
Link

Linux File system explained

I have struggled with why certain files are located where they are in Linux.  Finally found a link to explain why.  There will be some differences between distros but this seems to be a great reference. 

Yoman and installed generators not showing os x

I recently tried to install the ember generator for yeoman. I have been using the angularjs one for a while now and updating it as new versions became available.

I had installed the ember generator on the command line from npm

npm -g install generator-ember

I had yo on the command line. But when I ran this I would never see the ember generator.

yo --help

I tried cleaning the cache to ensure it was not a corrupted install from somewhere else.

npm -g cache clean
npm -g update

None of this worked so I had to go and remove yeoman completely and reinstall it

First I found the yeoman instance

which yo

Gave me /usr/local/bin/yo

ls -la /usr/local/bin/yo

Which returns that it is installed.

/usr/local/bin/yo -> ../lib/node_modules/yo/cli.js

I tried uninstalling from the npm

npm -g uninstall yo

The command completed successfully but I could still find yo on the file system.

ls /usr/local/share/npm/bin/yo

Only thing I could do at this stage is delete the yeoman as it was not removed by the npm uninstall command.  That means deleting the whole npm install in /lib/node_modules/ and the symbolic link to it in the /bin folder.

sudo rm -rf /usr/local/share/npm/lib/node_modules/yo
sudo rm  /usr/local/share/npm/bin/yo

and install it properly again.

npm -g install yo

and the next time I ran yeoman I saw my generators

yo --help
.....
Ember
  ember:app
  ember:component
  ember:controller
  ember:model
  ember:router
  ember:view

Twitter Bootstrap grid system with Yeoman, Angular, and IE8

Versions Used

Bootstrap 3.1.1

Yeoman angular-generator 0.8

Problem

I ran into this testing the IE8 rendering of the twitter bootstrap and the grid system with my angularjs app generated by yeoman.

What getbootstrap.com has

On the bootstrap site they have a block that checks your version of IE and if it is below IE9 then includes respondJs.

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- [if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
   <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->

Include respond in your project

Install in project

bower install respond -S

Include in the html via grunt

grunt bowerInstall

Move include from the  block to a if IE is less than IE 9

<!--[if lt IE 9]><script src="bower_components/respond/dest/respond.src.js"></script><!--<![endif]-->

Notes

You will have to remove the respond from your index.html <!–bower:js> if you rerun the following

grunt bowerInstall

Javascript page object pattern based functional tests via the browser with Protractor and Astrolabe

Update: 26/04/14 – added example github project showing an example project with config setup and simple test.

Example project on github: https://github.com/onekilo79/protractor-astrolabe-example

Purpose

Page Object Pattern

When writing browser based tests with selenium the test can become brittle if they are too attached to the xpath of the css selector when the page look and feel changes.  To limit your exposure to changes in the styling of the page you can use the Page Object Pattern.

Library that does Page Object Pattern in Groovy

In Groovy we have the excellent Geb by Luke Daily.

Continue reading