Arch Linux Installation

First of all, create a bootable USB (or CD) based on the ISO downloaded from the main Arch Linux website and boot it up.

The Arch Linux wiki is probably one of the best I’ve ever used, so the latest basic installation steps can be found here.

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.

React Native & Android: "Failed to Install the App"

I’ve been setting up a MacBook Pro to be able to work on a React Native mobile app and hit a stumbling block when running the Android app locally.

I had already installed all the relevant applications needed (Android Studio, a JDK etc.) but when I ran react-native run-android, it would give me the following error:

error Failed to install the app. Make sure you have the Android development environment set up

I tried a few different things until I came across a solution proposed by Menon Hasan on Stack Overflow where they proposed the following command to set the executable permission on the gradlew file:

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:

Stop your font sizes differing between Landscape and Portrait mode on iOS

Have you ever had the problem where you’re styling some content but when you rotate the device to change between landscape and portrait modes on an iOS device, the font size changes?

The simplest way to resolve it is to include this in one of your primary css rules such as html or body:

-webkit-text-size-adjust: 100%;

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.