Capital Bikeshare app with React and Webpack

I put together this app to try out a few things together:

  • React
  • Webpack
  • Node.js and Express
  • Bootstrap
  • Deploying to Heroku
  • geocoded locations of DC Metrorail stops

It started primarily as an exercise in React and Webpack. Originally I had planned for this to be completely client-side, with no server, with the browser directly accessing the Capital Bikeshare data over AJAX. Unfortunately, I ran into CORS issues, and I decided I would need to address that was through some kind of server-side proxy. As a bonus, I could filter the responses coming back from Capital Bikeshare so the browser response only gets a subset of the 5 closest bike stations.

I used Node and Express for the server components. This is the best option for a number of reasons:

  • it’s lightweight
  • the server is doing almost no work of its own – it’s only a proxy for Capital Bikeshare’s own API
  • the bundling of client-side resources through Webpack can be directly integrated into the Node/Express server during development, rather than having a separate console up with webpack -w

Deploying to Heroku (see end result here) was a byproduct of needing a server runtime to try out and see how this would behave on my phone. There is still work to be done in mobile optimizaton, for sure. If I could have done this all browser-side I could have just accessed it through github. Once you have a Heroku account set up, though, it turns out deploying to Heroku is just a matter of getting the right scripts in package.json and pushing to an additional remote.