Creating a MEAN prototype - part 5

This is the fifth part in a series of posts about building a prototype for the ALSL project. The complete list of posts in the series are

In the previous posts in this series I discussed the some of the reasons for building a prototype, and introduced the MEAN stack. I covered what I found when I tried to follow this guide to build a MEAN prototype that is integrated with the StormPath user management service I have decided to use, but there were some tweaks I needed to make along the way, especially in order to get the tests working. In the most recent post I built a deployment pipeline for the prototype.

I thought this would be the final post in the series, where I finally got around to adding at least another form to the application. As I was thinking about what need to be done I discovered that there was too much little stuff to be resolved, including the technical debt incurred by using a yeoman generator. I managed to clean up a lot of things working on this post which should make delivering new features to the deployed prototype faster in the future.

The first thing I did was configure social login from Facebook or Google using this as a guide. Things worked relatively well, but I discovered a minor issue with the default login page html template from the Stormpath Angular JS SDK, so I created and called my own modified template. You can have a look at what I did in these two commits:

I am considering submitting a pull request to the Stormpath team to get this fixed. While I was doing these changes I decided it would be easier to switch off the Grunt steps that minify the JavaScript and CSS, so I can use debugging tools even on the deployed application. I did that by simply commenting out some lines in the Gruntfile.js.

Next I modified the registration process to accept a username field. In my opinion it is a shame that the sp-registration-form directive doesn't produce a form that displays the fields based on the configuration. I guess that is another potential pull request I could submit. Anyway, the change I made was done in these two commits:

One of the tasks I had set myself previously was to set things up so that the front-end web application could be deployed separately from the back-end API application. I wanted to do this because serving these two things may scale differently, and because I want to remove any temptation to share any code or tools between the two applications as that would couple them too tightly. Because the front-end calls the back-end using client side JavaScript, deploying the applications separately requires configuring CORS correctly. To get this working server side I added the following to my server/app.js.

var cors = require('cors');

var whiteList = JSON.parse(process.env.CORS_ORIGIN_WHITELIST || "[]");

app.use(cors({
  origin: function(origin, callback){
    var originIsWhitelisted = whiteList.indexOf(origin) !== -1;
    callback(null, originIsWhitelisted);
  },
  credentials: true
}));

The client side change were a bit more complicated but this change introduces the grunt-ng-constant package and uses it to build environment specific configuration files. Once that was done I also added another grunt buildcontrol target and added that to my deployment pipeline, so the front-end static web pages are now hosted in Github Pages.

I feel almost ready to extend the prototype now but a couple of niggling things still needed to be taken care of. First I installed npm-check-updates and ran it to make sure all my npm and bower packages are at the latest version. Finally, I moved away from using Trello to organize my tasks and decided to use Github Issues supplemented by waffle.io instead.

Next time I am definitely ready to add a new form to the prototype.

Leave a comment