A deal between Angular2 and Sails
So I started working on this open source project 2 weeks back, in a bid to compare Sails with Adonis, kinda got stuck on Sails for a while, well this was mostly due to the fact that setting up Sails with Angular2 (which was the chosen front-end framework for this experiment) proved a bit difficult.
Sails is an open-source nodejs framework built with simplicity and project focus in mind and as that, it comes with a lot of packages to aid this process.
It uses express, passport and a whole lot of interesting features.
The Thought Process
The most difficult part was deciding the work flow of the application, basically there are two ways a package like this could function.
- A front-end framework serves on a separate directory, port and address, while the sails back-end framework serves separately on a different port. therefore its simply a matter of setting up both frameworks separately and keeping them clean . This would have been cool for me but there were some problems.
Sails uses embedded js for templating, that was not a cool way to go. angular2 isn’t built to work with embedded js off the box.
So what to do…..
- Well we have approach 2, set up angular2 from scratch to work with sails. So it was time to take a peek under the hood of angular2.
Well as with every learning process, I spent about 3 days being lazy and negligent, but i finally came around.
Research Phase
So the first step… Check if someone has already done this. Well I found some great projects, lets have a look.
- Joeherold/angular2-sails okay this was a cool package but it focused on the socket connection and not the overall set up.
- janpantel/angular-sails This package was the same as the above, but its focus was on angularjs not angular2.
- tarlepp/angular-sails-boilerplate Another cool project focused on the angular set up, but the interesting part was it was focused on angularjs.
So it was apparent, if I wanted to continue on this project, I have to build something.
The requirements
So I had a few things I wanted to check on my checklist, some of the most important features for me were as follows….
- It actually works, super important
- Uses webpack
- Live reload functionality.
So with getting it to work….that’s a necessity, so I’m not gonna dwell on that.
First and foremost, I had to set up webpack on the sails project to handle operations on sails lift. Therefore it requires the package sails-hook-webpack this sets up webpack on the project allowing you to use sails lift to run the project with webpack.
When the package was installed, I proceeded to set up the hook for webpack and disable grunt’s operations on the .sailsrc file.
This sets up sails lift command to run using webpack. So with this, the base is set. Its time to figure out how angular would fit into all these.
The next step was to figure out how to integrate angular with webpack from scratch, thus setting up the angular project from scratch. As usual it all starts with the dependencies.
First setting up the angular dependencies
then setting up the webpack compilation dependencies.
Okay, so as its seen the package uses quite a few projects to compile and integrate fully with webpack.
The angular2-template-loader is used with the ts-loader to set up and compile the components and require the html templates specified in the components via the templateUrl parameter.
To compile these into a usable pack, sets of entries had to be specified. So I created the following files in the app directory.
The first being the vendor.ts and the second being the polyfill.ts. These files essentially package the third party codes for the applications progress ( angular/platform-browser, angular/core, angular/http,. etc). These were to be compiled separately.
In setting up the angular’s app codebase, this is done in the assets directory, as sails is meant to compile from the assets directory to serve on the .tmp/public directory.
So in order to set up the app directory, the following steps were taken…
Setting up the app.module.ts and app.component.ts
The setup for the app.module.ts was quite banal as any other
Using the router component, other components where loaded and loadable (see what I did there ?). So the app.module loads the app.component so that the rest of the components follows in like manner.
With the core components set to play…I needed to configure the entry points for the angular set up so as to be bootstrapped effectively.
So then comes the main.ts setup.
With these in place, it was time to set up the webpack configurations to work their magic. Setting up webpack with the sails hook requires one to set up in the config directory, so it’s config/webpack.js.
The full configs are as follows…
With these set up, the entries are directed to the app directory particularly focused on the main.ts, polyfills.ts and vendor.ts files.
The idea was to compile these into the outputs on the .tmp/public directory in 3 separate files.
and set up the loaders to compile these appropriately.
with the loaders set, it’s time to set up live reload, this is done by calling on the live reload plugin.
with these set, running
sails lift starts the server with sails operational and serving the angular project on the tmp/public directory.
So it’s simply a matter of the layout.ejs file calling the bundles in the right order.
With this set, the page gets served pretty easily
Conclusion
The project has been fun all the way, most especially with pulling my hairs, with converting from systemjs setup to webpack, but all the way its been fun.
The repository can be found on github, feel free to contribute, would appreciate the effort.
Current Issues
Well, as with everything, there are issues that need amendment and fix. The only one being the live reload module, this feature is currently being worked on and would be resolved soon, feel free to contribute.
Thanks for reading this far, well done.
