Storybook JS: 'Cannot GET /'

When you run storybook locally, you might encounter the error ‘Cannot GET /’ when browsing to localhost:6006.

The general advice given online is to delete all node modules for your project and re-install the packages using your preferred package manager. However, this doesn’t always solve the problem and I was in this position just a moment ago.

Luckily, in the Storybook CLI docs, there is an argument --no-manager-cache which says that it will disable the Storybook manager caching mechanism. They recommend not using this every time you run it, but it’ll help when you need to refresh the Storybook UI, such as when editing themes etc.

iOS APNs/APS Environments

At work, we’re working on a React Native mobile app. For our iOS deployment, we have our test builds (that consumes APIs in a testing environment) going to MS App Center, and production builds going to TestFlight, eventually being promoted to the App Store.

We use MS Notification Hub to handle our push notifications that are triggered by internal systems etc. but we wanted to achieve a situation where we were using a testing APNs environment (i.e. the sandbox) for our App Center builds, and the production APNs environment for our TestFlight/App Store builds.

Reduce a large JSON object down to only what you need

Sometimes you need to use an API that returns a large payload, but you may only need to use a small number of fields from that payload. Rather than try storing that data, or hand-balling the data yourself, there is an alternative solution.

In various other languages, such as C#, you can serialise and deserialise data and strip out what data you don’t want (by not declaring those properties in the models). This post explains how you can achieve the same thing in JavaScript with a little help from a pre-defined model, and some recursion:

Testing Mobile App in AWS Device Farm using Appium and Node

Warning: this post is quite code heavy as I offer our solution as an example

At work, we’ve been working on a mobile app for our customers. We’ve been looking at automated testing to interact with the app like a user would on a device and came across Appium and Detox as potential options that wouldn’t cost too much to run.

As we primarily worked on Windows machines, Detox was out of the running as it seems to be only guaranteed support on MacOS, so we started looking at Appium instead. AWS Device Farm supports this already, so this looked promising and a good place to start.

Configuring NGINX to work with React Router

When using the BrowserRouter that’s provided by React Router, you’ll find that if you’re navigating within the site to the various URLs, they will work. However if you bookmarked one of those URLs, or refreshed the browser on a URL, it will return a 404.

If you’re using Webpack’s devserver, then you can get around it with a setting in the webpack.config.js file:

devServer: {
  // your other webserver settings
  historyApiFallback: true
}

This setting makes webpack aware of the historyApi that is used by React Router and essentially just redirects any unknown URLs back to the root.

How to test a custom React hook component

As part of my GameBrowser side-project, I’m at the stage where I wanted to start improving the UI a bit. This included needing to define a way of filtering the servers in the list, because they’re all saved together at the moment. As a first attempt, I opted for a simple Dropdown control and decided to make it generic using a custom React Hook.

The result was the creation of useDropdown.

Basic Setup for React Projects in 2020

I’ve seen a lot of people using project initialisation tools to create their new React projects over the years, in particular create-react-app. While I do see there are some benefits to these tools (in particular for newcomers), these tools do have their disadvantages.

I cloned a repository the other day which was using create-react-app, and an npm i installed over 2000 packages! This is a hell of a lot to download just to be able to run some code locally. Yes, these packages will be cached, but if you take into account the time it takes for one dev, multiply that across a team of devs (also accounting for devs trashing their local repos and re-cloning), this could be a reasonable bit of time lost. This time is often lost at times where developers are feeling most productive too.

Convert JavaScript Number to Number Array

I had a number which I wanted converting into an array where each digit of the number was an item in the array. I tried a few different ways of doing this but always ended up with a string array which wasn’t what I wanted.

To get around this, you can use some of the new features introduced in ES6 as follows:

const theNumber = 432375;
const output = Array.from(theNumber.toString()).map(Number);

This results in output containing an array with the contents of [4, 3, 2, 3, 7, 5].

React.js Unit Testing with Jest and Enzyme

I’ve written loads of unit tests in my lifetime for C# and JavaScript, but never gotten around to writing any for testing the actual React components because there’s always been something more pressing. Time to put that right and take the plunge.

So I’ve picked up the project which resulted from the React.js Continued… State! tutorial as a starter for ten as it already has a lot of the boilerplate stuff in place.

Map() support in JavaScript ES6/ES2015

ECMAScript 6/2015 has brought a lot of new things to the world of JavaScript, and Map() is one of them. However, not all browsers are too keen on particular ways of using it.

I’ve been working on a UI project at work this week and encountered a weird issue with some code written by a colleague. We have some scenarios in our React app where we need to translate/map some values from an integer to a string (for textual display in the rendered screen). We tend to use Map() to do this and for the most part it works fine, until today!