I decided to build a simple ReactJS webpage to render my personal Gists from GitHub as an basic kata.
Obviously in a production situation this isn’t what we would rely on. Reverse proxies like Nginx, HAProxy or Apache are much better suited to revolve these types of issues. Ideally we would setup a reverse proxy on “api.github.com” so that we can share a common domain for the client side requests. For example if your web page url was http://my.gists.com/index.html you might setup a reverse proxy like http://my.gists.com/api/m-x-k/gists.
Note: while its possible to mitigate the problem with headers it’s not an ideal solution as it depends on browser support.
Recently I needed to build a photo gallery for a website built with ReactJS. I came across a convenient react library “react-photo-gallery” which was ideal for this purpose. As a proof of concept I built a small Spring Boot app with ReactJS support:
The application contains a few sample images which can easily be orientated to fit various devices and screen sizes for responsive behaviour.
I also needed to provide a demo to show off some of the functionality before implementing further. Luckily Heroku provides a great environment for sample demo sites. As usual Heroku can be a little slow on the first load as it builds the app on demand. You can reach the demo site below:
The code implementation was straight forward to setup with the project split into two separate folders. One for the spring boot ‘src’ code and the other ‘ui’ folder for the ReactJS code. Support for Docker has been included as well as details and scripts on to upload the app and any photos to a Heroku account. The only tricky part was getting the folder permissions just right for the photos to load successfully.