React server-side rendering with Webpack

There are times when the initial blank html page being download for a React application is not perfect. One reason might be Search Engine Optimization, another might be a slower initial render, especially on mobile devices. Search Engine Optimization (SEO) is a good reason you might want to do server-side rendering. While the Google bot executes JavaScript these days, and can potentially index your React application, other search engine bots don’t do so. The result is they just see the empty div where your application will be rendered on the real client and nothing worth indexing at all. The end … Continue reading React server-side rendering with Webpack

Developing Angular applications using Docker

Using Docker to deploy applications is great but there is so much more you can do with Docker if you want to. And it can solve some interesting problems along the way. One problem when developing with NPM to manage dependencies is keeping all dependencies in sync. If I pull a repository from GitHub and an NPM install I will get a local copy, on my hard disk, of all dependencies. Fine, great that is just what it should do. But if you pull exactly the same commit 10 minutes later you might end up with a different result. Sure … Continue reading Developing Angular applications using Docker

What should be in a Single Page Application?

Single Page Applications (SPA) are really popular these days. And that is understandable as React, Angular and similar libraries with browser based routing make it quite easy to do so for developers. End users like SPA’s as well because navigating around is really fast. Much faster than the traditional browser-based applications that do lots of postbacks. So everyone is happy right? Well everyone is happy if SPA’s are done right but quite often they are not   The problem with SPA’s The problem with SPA’s is quite typical: If a bit of something is good then more of the same … Continue reading What should be in a Single Page Application?

Lazy loading and Angular routing

One problem with creating a Single Page Application (SPA) is that you might load the entire application when the user first starts the application but most of it is never used. Sure navigation is nice and fast after the initial load but that slows down the initial load as that becomes larger. And that might be worth it if the user navigates to all, or most, routes loaded. But when most routes are never activated that is just a big waste. Fortunately with Angular that is easy enough to fix with lazy loading. And lazy loading is really easy to … Continue reading Lazy loading and Angular routing

Angular 2 and HTTP Request headers

Angular 2 does a lot of awesome work for you. But it doesn’t do everything you might expect. One thing it doesn’t do is set a lot of HTTP request headers. Now that makes sense as Angular doesn’t know what you are doing with a request so you really need to do so. But most Http request made with the Http service are going to be for JSON serialized data. The default request however add no headers to let the server know this. The result is that different browsers will do very different requests. This is an example of an … Continue reading Angular 2 and HTTP Request headers

Creating a React based Chrome extension

Creating Chrome extensions is quite easy. In fact it is so easy I found it hard to believe how quick I had a sample up and running. And given how useful Chrome extensions can be I wondered how hard it would be to create one using React. It turns out that it is easy   Creating a basic React app To get started I decided to create a React app using create-react-app.  This gave me a working React application to get started with. To turn an HTML page with JavaScript into a Chrome extension you need to add a package.json … Continue reading Creating a React based Chrome extension

Bring your own React

React is a a great UI library from Facebook that works well for creating fast browser based user interfaces. Working with it is quite easy. Once you learn the basics you can be quite productive. But to create great applications it is helpful to understand some of the internals of React. But that is where things become a bit more complex. The React source code is not easy to understand. There are a lot of performance optimizations that make code harder to read. Also there are  a lot of browser related issues. Small differences that add a lot more complexity. … Continue reading Bring your own React

Introducing the React Tutorial

React is hot and it seems that almost every front-end web developer wants a piece of it. Not surprising maybe because Facebook created and open sourced React. And React not only powers the Facebook website but also many others like Netflix and Airbnb. Because I have been using and teaching React for the last year I decided to try doing things a bit bigger. If you want to learn React I want to help you with a series of online video tutorials. Each video covers one part and the whole series will give you a deep understanding of React. Of … Continue reading Introducing the React Tutorial

Turbocharging Docker build

Building a Docker image can take a bit of time depending on what you have to do. Specially when you have to do something like DNU Restore, DotNet Restore, NPM Install or Nuget Restore builds can become slow because packages might have to be downloaded from the internet. Take the following Dockerfile which does a DNU Restore. FROM microsoft/aspnet:1.0.0-rc1-update1-coreclrMAINTAINER Maurice de Beijer <>COPY . ./app WORKDIR ./appRUN dnu restoreEXPOSE 5000CMD [“–server.urls”, “http://*:5000”]ENTRYPOINT [“dnx”, “web”] Running the Docker build multiple times without any changes is quite fast. To time it I am using the command: time docker build -t dotned . … Continue reading Turbocharging Docker build