Creating a static photo gallery using next.js
In 2018, I wrote a .net framework 4.5, ASP.NET MVC 5.2.3 photo gallery app that showcases my brother's work in photography. It's main feature was a carousel that displayed the photos and it was built using blueimp-gallery. It used Razor View Engine to render the HTML pages, bootstrap as the frontend toolkit and it also had sendgrid and Application Insights integration.
In terms of functionality, the photo gallery app allowed anonymous views, didn't use any cookies and didn't require any login. It had the ability to display all my brother's photography projects, options of getting in touch via email, terms & conditions and `about us` information.
The photo gallery app was deployed in Azure App Services through Azure DevOps, used Azure CDN to host the images and had a custom domain and it was SSL/TLS enabled. It had the ability to deploy using deployment slots and, the app being a .net framework 4.5 app, it used a Basic Windows App Service Plan. The costs of running this site varied from £30/month up to £80/months under heavier loads.
In an attempt to reduce the costs of running, I figured out that I needed to change the current app service plan from a Windows based one to a Linux based one. The easiest way of doing this was to upgrade the photo gallery app from .net framework 4.5 to 4.8 and then to .net core.
Sadly, the latter part didn't succeed, I couldn't upgrade automatically without having to rewrite the entire site. So I took the opportunity to investigate other technologies in which I could rewrite the photo gallery app as a static website that I could host for minimum costs. I ended up using:
- next.js, react and typescript as the web development stack
- tailwind.css for the CSS framework
- react-slick for the carousel and react-masonry-css for masonry layouts
- Deploy as Azure Static Web App using Github Actions
As most of the accompanying infrastructure is still hosted in Azure ( like the Azure CDN), I decided to reuse Azure as the hosting provider and choose Azure Static Web Apps using it's Free tier to host the new version of the app. I've reduced the costs of hosting by 95% and the app runs smoother than the previous version.
The experience of rewriting the app in react was fun and highly engaging and it took only 10 hours to complete.
The biggest advantage of now having a static web app is the flexibility to deploy in the least costly options out there and if the current Free tier will not suffice, the idea of investigating the next best option is exhilarating.