Build a React web app with Parcel.js lightning fast

01 January, 2019.

I have been using Webpack for quite some time now, and I have found it to be slow, frustrating to configure and debug, tedious to change and upgrade (and do not even get me started on the documentation!). I have had the exact opposite experience with Parcel.js. I have found Parcel.js to be fast , easy to configure and the documentation has been excellent so far. Build a React app with Parcel.js from scratch We can create a React app from scratch with Parcel with minimal effort. To get…

Continue reading

Getting started with Webpack Dev Server

31 December, 2018.

So far, our application writes out to the console, which is not terribly helpful. Let’s get something up and running in the browser before we configure our React code. To get our website up and running, we will need Webpack Dev Server, which is a simple HTTP server. We will also need a couple of plugins to make everything work properly. Start by creating an file in and add the following code; Now we need to configure Webpack to inject the path to our JavaScript bundle directly into the HTML…

Continue reading

How to add Hot Module Reloading (HMR) to a React app

31 December, 2018.

Before we can add Hot Module Reloading to our React project, we need some React code! Let’s do that first. Create a simple React application We are not trying to win any awards here, we only need to get React rendering out something so we can move on. This is not a tutorial about how to build a useful React website, after all. Start by installing React, and ReactDOM. Both are required to render a React browser-based web application. Note : These are runtime dependencies, so we use instead…

Continue reading

How to configure SCSS modules for Webpack

31 December, 2018.

Your website will look pretty plain without some styles. SCSS is a popular choice for styling and is fairly straightforward to configure. We will focus on SCSS modules and global SCSS, so let’s get started. Run the following command in your terminal to install Sass and related tooling; What are these packages for? provides binding for Node.js to LibSass, a Sass compiler. is a loader for Webpack for compiling SCSS/Sass files. injects our styles into our DOM. interprets and and resolves…

Continue reading

How to create a production ready Webpack config

31 December, 2018.

We have seen the basics of a Webpack config, but let’s take a few steps to make the config more production ready and useful for development. First, we need to set a Webpack . We have touched on this a couple of times so far as part of this tutorial. The will determine if Webpack minifies/compresses our code, or not. This is important to get right because it makes a huge difference to the resulting bundle. Set the wrong , and you will not be able to debug your code in the browser, or worse…

Continue reading

How to process images with Webpack

31 December, 2018.

With a couple of small Webpack plugins we can add the ability to be able to import images directly in our JavaScript files, and also process those images (compress them). Run the following command in your terminal to install the required plugins; What are these packages for? resolves your s and copies the file to the output directory (usually with a randomly generated name, for cache busting) processes the images using another package called Note that takes many options. For a more…

Continue reading

Webpack 4 from absolute scratch

31 December, 2018.

Writing your own Webpack 4 configuration from absolute scratch is not strictly necessary. You could go online, find a basic Webpack configuration file and fork it/copy it to your project and use that as your starting point. Whilst using a starter project is good for getting started quickly, it is better to have a more indepth understanding of what is happening, to help with customisations and debugging later. We will configure Webpack to do the following; Build our JavaScript, use Babel and…

Continue reading

How to use AWS Cognito with .NET Core

09 December, 2018.

I never would have believed just a couple of years ago that I would be typing these words. With just a few lines of code you can add authentication and authorisation to your cross platform .NET web application in a secure way using Amazon Web Services (AWS) Cognito API. You can either call the API directly with requests, or take advantage of the built in user interface. As an added bonus, Cognito supports federated identities, allowing you to use external identity providers such as Google and…

Continue reading

Microservices on the front-end - Building front-end apps that scale

21 November, 2018.

Overview This post details a presentation I gave at my local Manchester Web Meetup on 21st November 2018 at The Hut Group in Media City, Salford, UK. Below are the accompanying notes I wrote that acted as a rough speaking guide, and may or may not have been spoken during the event itself. Who am I? Developer at RC, this is where I have learnt about frontend microservice architecture I like to experiment with new ideas, and I make available what I can through my public GitHub repo I have…

Continue reading