Tablo is an app that displays real-time UK train departures and it's available at tablo.taknado.com. It's my playground for experimenting with various front-end tech. I intially wrote it to get up to speed with modern javascript and related stuff.
The app displays live departure boards from a specified station with an option to specify a destination station.
Tablo is an SPA built with Vue.js and Bulma. It's bundled using Webpack and hosted on Netlify. Automated tests are written using Jest.
Live train times are provided by TransportAPI. It's possible to use the API directly from a client-side app, but to keep the API credentials private (and retain control over API usage) Tablo is using AWS API Gateway as a proxy. The proxy is provisioned using Terraform.
The app uses the API proxy in development mode as well, so the first step is to provision it:
- Populate AWS and TransportAPI credentials:
cp api_proxy/terraform.tfvars.example api_proxy/terraform.tfvars && editor api_proxy/terraform.tfvars - Provision the proxy:
cd api_proxy && terraform init && terraform apply
I use docker for development mainly to not worry about versions of dependencies (e.g. node). There is a bin/npm binstub that starts a docker container using the official node image, mounts the current directory and exposes port 8080. To start webpack dev server do:
- Run
bin/npm installto install all dependencies - Run
bin/npm startto start webpack dev server which will be available at localhost:8080 - Run
bin/npm run testto start jest in watch mode
- Provision the API proxy:
cd api_proxy && terraform apply - Run
bin/npm run buildto create a bundle - Commit & push to Github to trigger a deployment in Netlify.