Askmike.org

I’ve been building out a web app using Create React App, developing and deploying is a breeze. But now I need a server side rendering solution for my specific sitation. All the solutions around the web I have found are great, but they don’t address the issue I have. So in this post I’ll share my own “from scratch” solution. The problem I am solving is:

Google has trouble with my single page app written in javascript, I want to create a static HTML render of all pages inside my app. I want to serve these static pages to googlebot (and other crawlers). Since my app displays a lot of dynamic information (pulled in from an API, updated hourly) I want to be able to easily rerender the complete UI with minimal effort (and compilation steps).

So this is NOT a SSR solution that prerenders an initial page for a user, instead it statically “compiles” a large number of pages in my app whenever the API data changes into plain HTML files which are served through a webserver (to crawlers, not to users). I’ve build my solution for the create-react-app version I am using, which is react-scripts 2.0.3 and uses react 16.4.1. If you are using another version everything below might not work.

Note that my approach is NOT recommended, it requires you to put monkey patch components in your app and forces you to break promises (out of spec compliance). As soon as React updates their lifecycle hooks (again) you will need to come and fix this or you might break everything below. Here by dragons.

more

For a project I need to run geth 1.6 in a docker container on my Raspberry Pi that has raspbian jessie installed. I was looking online for such a docker image, but after some searching I gave up and just created my own docker image.

I am using this image as a basis for other docker images that set a geth node up for a private ethereum blockchain. There are a dozen of Ethereum docker images already, but none (that I could find) played nice with the ARM architecture of the rpi.

You can find the prebuild image on dockerhub/askmike/ethereum-raspbian.

Running ethereum in docker on your rpi is as easy as:

docker pull askmike/ethereum-raspbian:latest
docker run -t askmike/ethereum-raspbian:latest

Note that if you are going to use this for anything serious (or if money is involved) always compile from source! The Dockerfile can be found on github/askmike/ethereum-raspbian-docker. It builds on top of an image that installs golang (so geth can be compiled), you can get that from dockerhub/askmike/golang-raspbian (dockerfile on github/askmike/golang-raspbian).

If the images don’t work for you, please post an issue on github :)

Now we’ve set up Prometheus we can very easily start logging interesting metrics from our nodejs app.

The idea is that we will include an external node module in our app, that module will provide easy functions for the by Prometheus supported metric types. In this post we will use the metric types Counter and Gauge. The module will then expose the statistics using a lightweight express server, which Prometheus will scrape.

more

Prometheus is a great open source monitoring system by soundcloud. I personally use it on a single server to:

• Monitor the health on the server
• Monitor web traffic (nginx)
• Monitor the backend of my apps (written in nodejs)

In this post I’ll install Prometheus (version 1.1.3) and Promdash (a graphical UI from the same creators).

more

I just open sourced the globe behind the Realtime Bitcoin Globe. When I published the globe almost a year ago it was based on this awesome project by the Google Data Arts team. That project is great for plotting data in a very specific way (a barchart plotted in 3d on a 3d earth. At that time it took me quite a bit of hacking to make it work for my needs.

I just got around to rewriting the globe from scratch (well, on top of three.js) and I figured why not open source it.

The main idea is that you can use it as a base for showing something that is happening in realtime somewhere on earth. It currently only supports two different block types (a static one, and a “levitating” one that gets pulled out of the earth), but adding more should be fairly straight forward. I am open to pull requests.

I already made one for showing realtime bitcoin transactions, but you can use the globe as a base for:

• Showing tweets with a specific hashtag in realtime.
• Showing instagram posts with a specific tag in realtime (with a preview for example).
• Showing visitors on your website in realtime.
• Showing realtime airplanes in the sky.
• Showing realtime foursquare checkins at fish restaurants.
• Showing users of your app in realtime.
• Whatever you can think of!