The Modern Mean Stack
A Relationship between Angular2 and Node
So I've been working on mean stacked projects for a while, and last week I was opportune to take on one of those, When undergoing something of this nature first thing you come to notice about this is that there are so many ways to go about it, you could run angular cli on one end and node on your server (two seperate terminal operations in all) or you could look for one of those boiler plates or mean stacks created for the purpose of making things easier and more professional. There are quite a few MEAN boiler projects and many are rally well crafted. for example Vulgar which I admit is a really dope project.
Most of the projects had some really dope features, This included tests, integrations, and loads of packages, but there was something missing….the framework wasnt up to date with the modern improvements in both ends which include’
- angular modules
- webpack 2
- babel transpiling
- and some other stunts
But my problem with these projects were the fact that many of them are old and don’t implement the modern standards of Angular2/4 or the modern structure and some still use systemjs in their operations. So I decided to rebuild the wheel.
The Idea for me was to take the best of both and build something modern which I can use for my personal projects.
So over the course of the week period I worked on a project to handle just that.
So I present the Modern Mean Stack. It features the following.
- Modern Angular2/4 Structure
- Babel Transpiling on the go
- Hmr (Hot module replacement) — that thingy that keeps the page updated automatically when ever a change is made.
- Browser Sync — for development synchronization across multiple devices.
- Webpack-middleware-server for automatic bundling on node serve operation.
The last feature runs in the server and automatically does the bundling operation in the serverside, but note, this runs the served files from memory, it’s intended for development environment only and still highly experimental. More features would be added to the stack in time.
The Experience
Going through the process I got to learn a lot about the inner structure of these projects respectively, with the most interesting opportunites being.
- Setting up the Hmr on Angular2
- Setting up tslint to compile with awesome-typescript-loader
- Setting up gulp with babel transpiling and
- Setting up webpack-middleware-server as replacement for webpack-deve-server in express configs.
Progress
At the moment the project is usable and functional, although as with everything, its set to undergo improvement and if interested in contributing to it, efforts would be much appreciated.
you can find the project here
Conclusion
The Idea behind taking on a project of this nature was to understand and gain proper mastery of the internal operations of webpack and the bundling process, in relation to hot module replacement.
If this proved useful feel free to give a ❤️, thanks….
