Alex's Tech Blog

I have spent a lot of time organizing the directory structure of my Angular 2 / 4 project to achieve the following: Developing new sections with ease by adding lazy loaded modules. Keeping modules organized in a single folder. Separating public and secure layouts and their related code Organizing global and re-usable assets Having lots of granularity with many files (not putting all the code in a single file, that's Webpack's job) I run my Angular projects using a full MEAN stack on Heroku from a single project. I have omitted all the Express/Mongo (server-side code) to focus on Angular directory structure. I currently run 3 public modules and 9 secure modules in production and feel like this will scale nicely as my project grows: config/ -----cluster.js // Process Forking Support for NodeJs -----express.js // Express.js Setup -----settings.js // Server side settings from ENV vars and other defaults. -----web.js // Main entry point -----webpack.config.js // ...

When developing a Single Page Application we want to deploy frequent changes, and do not want a user stuck at a stale version. We also do not want to interrupt the user if they are in the middle of a process to refresh the entire website. Here is my current solution to solve this problem: System Specs/Configuration Angular 4.0.1 Webpack 2.3.3 Webpack builds go into "/dist" folder webpack.config.json is in the "/config" folder Step 1: Use Webpack to generate a hash.json after every build My webpack config adds different plugins based on environment. It always adds the following plugin to grab the hash: plugins.push( function() { this.plugin("done", function(stats) { require("fs").writeFileSync( path.join(__dirname, "../dist", "hash.json"), JSON.stringify(stats.toJson().hash)); }); } ); /dist/hash.json is my version. When any code file changes, th...