Running a React app in a Docker container

I started converting my AngularJS AddressBook app into React. Since this is part of a larger project to run all the parts of my app in Docker containers with Docker Compose, I needed to look at how I can run my React app in a container.

For development, using the webpack dev server works well locally. Running this from within a container though requires doing an ‘npm install’ and a ‘npm run build’ inside the container, which probably doesn’t make sense to run every time, as with all the npm dependencies from create-react-app this take some time to run.

The other option is to build the app locally and then just build a container with the webpack output, and serve it with an HTTP server like nginx.

Let’s take a look at each of these options.

The easiest and simplest approach is to build the app locally first, as you normally would:

npm install
npm run build

A Dockerfile to build the container using the output from ‘npm run build’ then looks like (using an nginx image as a starting point):

FROM nginx
COPY build /usr/share/nginx/html

You build this with:

docker build -t addressbook-react-web-nginx .

And then run with:

docker run -it -p 80:80 addressbook-react-web-nginx

Next up, for a comparison, the Dockerfile to push everything into the image and run with ‘npm run start’ inside the container would look like:

FROM node:6.10-alpine
RUN mkdir -p /home/web
COPY *.html /home/web/
COPY public /home/web/public/
COPY src /home/web/src/
COPY *.json /home/web/
WORKDIR "/home/web"
RUN npm install
ENTRYPOINT npm run start

This is starting from one of the official node images. It copies in all the source files, runs npm install and then sets the entrypoint for when the container starts to run the webpack dev server.

An improvement on this approach could be to build an intermediate container with the package.json and npm install already run, and then build new images from this incrementally adding just the changed source files. Plenty of options to explore depending on what you need to do.

Next up, modify my previous docker compose file to include one of these new images containing my React app and now I’ve got all the pieces ready to go.

Project Jigsaw for Java has been a long time coming – are we really going to see it in Java SE 9 this year?

Java SE 9 general availability date is 7/27/17, per the release schedule here. Project Jigsaw been a long time coming and been postposed from release to release (it was originally planned for SE7, pushed to SE8, and now SE9), but this year we’ll see Project Jigsaw come with SE 9.

It’s funny what you find unexpectedly when searching for stuff online – reading around for Jigsaw related articles I found this Jigsaw mailing list post by Mark Reinhold back in 2012 including a link to one of my blog posts, discussing the Jigsaw ‘plan A’ vs ‘plan B’ options back when Jigsaw was pushed out from SE 8 to 9. Hopefully we really will see Jigsaw in SE9 later this year.

BASIC 10liner 2017 contest entry – Boulder Jumper

I’ve seen posts about the BASIC 10Liner contest before, but this time I spotted posts for the 2017 contest with time to put an entry together. This weekend I spent a few hours putting together an entry using Sinclair BASIC on an emulated Spectrum, using Fuse for MacOS.

My entry is a take on the infinite runner style games, like Temple Run, but re-imagined in glorious 8 bit Sinclair BASIC style, I’ve called it ‘Boulder Jumper’.

If that’s not enough I went completely retro and implemented the graphics using only characters. This is my first entry to the BASIC 10Liner contest, and the first time I’ve written any Sinclair BASIC for maybe 33 or maybe more years.

My first thoughts were how can you possibly write a fully functioning game in 10 lines of code, but you can have multiple statements per line, and enter in either the 80 chars, 120, or 256 characters per line category. I think I’m just about squeezing into 120 per line.

Here’s a screenshot of the awesome gameplay:

Your character is a ‘b’ character, and rocks come from the right moving to the left, as ‘o’ characters. You press ‘m’ to jump and jump over the rocks or get squashed. You get points per rock you jump over, and have 3 lives.

Here’s the code in all it’s Sinclar BASIC glory:

And here’s the 10 lines in the Fuse emulator:

It’s not great and you could do a lot better (this is probably better suited to a ZX-81 than the ZX Spectrum), but it’s my first attempt for the 10Lines contest, and I had run writing and playing it!