Building a responsive photo gallery

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:

https://github.com/m-x-k/photo-gallery

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:

https://responsive-photo-gallery.herokuapp.com/

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.

At the minute I tend to favour Gradle for building Java projects it provides a robust DSL with various plugins and support for Maven etc … When it comes to Javascript building I tend to favour NPM/Yarn with Webpack especially for the ease of setup when it comes to ES6 transpiling. The combination allowed me to quickly setup an application which could allow the full stack to be built on demand.

Advertisements

Hosting Static Website on AWS S3 Bucket

Great little introduction on how to host a static website on AWS S3 bucket.

http://docs.aws.amazon.com/AmazonS3/latest/dev/website-hosting-custom-domain-walkthrough.html

Its really easy to setup and configure. I used a GoDaddy certificate and redirected with a masked url. All in all it took a matter of minutes to set it up but you have to make sure to make the site public each time you upload / re-upload content to the s3 bucket 😦