A bare bones React boilerplate, featuring Webpack 4, React, Redux, Jest, and Babel 7

I love template projects. In fact, I use them all the time. Template projects, seed projects, starter projects, whatever you want to call them, they are fantastic. Starter templates help you get up and running very quickly and can be very useful and powerful when learning something new. Many template projects I see around the web are bloated with every feature under the sun. Having a long list of features can be amazing, however, some projects have grown significantly… which can increase complexity, the learning curve, bundle size, and reduce performance. Under no circumstances am I suggesting that using a popular open source larger starter project is a bad idea. However, when working on projects I like to start with the minimum feature set required to get the project off the ground, and then add features on demand. I created a repository on GitHub to cater for my exact needs, webpack 4 scratch . The post provides an overview of the out-of-the-box functionality and reasoning behind decisions made. Overview Before we get into the details, lets answer the most important question first. What functionality does this starter provide? React, Redux and React Router pre-configured out-of…

A high level look at Angular 2

Developed by Google, Angular 2 is the newest version of the popular Single Page Application (SPA) framework. Angular 2 is a step in a new direction compared to previous versions, but has keep all the best characteristics and “lessons learnt” to deliver a fast, fully featured and rich ecosystem. About Angular 2 Angular 2 impacts your whole application, or at the least, a section of it, rather than specific pages. Angular 2 is best suited to new (“greenfield”) development, as it can be relatively tricky to migrate legacy code (Angular 1.x code) to the new version. Angular 2 has new concepts, syntax, methodologies, and opinions, but is comparable to as previous versions in the way it works. If you have been following Angular development since “the early days” of beta 1, then its been a very rocky road for you. Even now (this post was written around the release of RC5), the API is still evolving and new features are being added. Whilst this experience has been hard for early adopters, I believe the end result will be a fantastic, easy to use, and performant framework with a lower barrier to entry for all. Overview The purpose of this post is to discuss the core concepts of Angular…

Angular 2 server side paging using ng2-pagination

Angular 2 is not quite out of beta yet (Beta 12 at the time of writing) but I’m in the full flow of developing with it for production use. A common feature, for good or bad, is to have lists/tables of data that the user can navigate through page by page, or even filter, to help find something useful. Angular 2 doesn’t come with any out of the box functionality to support this, so we have to implement it ourselves. And of course what the means today is to use a third party package! To make this happen, we will utilise n2-pagination , a great plugin, and Web API. I’ve chosen Web API because that is what I’m using in my production app, but you could easily use ExpressJS or (insert your favourite RESTful framework here). Checklist Here is a checklist of what we will do to make this work; Create a new Web API project (you could very easily use an existing project) Enable CORS, as we will use using a seperate development server for the Angular 2 project Download the Angular 2 quick start, ng2-pagination and connect the dots Expose some sample data for testing I will try to stick with this order. Web API (for the back end) Open up Visual Studio ( free version here ) and create a new Web…

Create a RESTful API with authentication using Web API and Jwt

Web API is a feature of the ASP .NET framework that dramatically simplifies building RESTful (REST like) HTTP services that are cross platform and device and browser agnostic. With Web API, you can create endpoints that can be accessed using a combination of descriptive URLs and HTTP verbs. Those endpoints can serve data back to the caller as either JSON or XML that is standards compliant. With JSON Web Tokens (Jwt), which are typically stateless, you can add an authentication and authorization layer enabling you to restrict access to some or all of your API. The purpose of this tutorial is to develop the beginnings of a Book Store API, using Microsoft Web API with (C#), which authenticates and authorizes each requests, exposes OAuth2 endpoints, and returns data about books and reviews for consumption by the caller. The caller in this case will be Postman , a useful utility for querying API’s. In a follow up to this post we will write a front end to interact with the API directly. Set up Open Visual Studio (I will be using Visual Studio 2015 Community edition , you can use whatever version you like) and create a new Empty project, ensuring you select the Web API option…

How to debug websites on your mobile device using Google Chrome

I can’t believe I have survived this long as a web developer without knowing you can debug websites (JavaScript, CSS, HTML, TypeScript etc.) directly on your mobile device using Google Chrome developer tools. If you are currently using emulators/simulators or testing solutions such as Browser Stack, you will love this easy and free solution. Be warned, however, you will be expected to download 6+ gigabytes of stuff before the magic begins. I’ve only tested this on my Samsung Galaxy S6 Edge (running Android 5.1.1) but I believe it also works on an iPhone. Prerequisite Software Before connecting your phone to your computer, please ensure you have all of the following software installed; A recent version of the Java Development Kit (JDK) Android Software Development Kit (SDK) Android SDK Platform Tools If you have a Samsung mobile device, ensure you have the Samsung Android USB Driver for Windows installed. If you don’t please download a suitable driver for your device. Google maintains a helpful (although not comprehensive) list of drivers to help you out. Set up your device Setting up your device is pretty simple. Start by connecting it to your computer with a USB cable and…