JAMstack with Next.js, Netlify and Prismic CMS
The new Lighthouse Funds site
This article is the last of a three-part series. Make sure you’ve read part one and part two before reading on!
The Netlify Platform
“Netlify it all”
Netlify describes itself as “An intuitive Git-based workflow and powerful serverless platform to build, deploy, and collaborate on web apps”
The Lighthouse Funds UI is utilising three of the Netlify products:
-
Build — Automated builds & deployment
-
Edge — A global network to serve your front-end
-
Functions — Scalable serverless functions
Netlify Build
Netlify Build makes use of the following modern web development practices:
Atomic deployment
-
Make updates available only when they are complete and totally in place
-
The new version of the site only begins receiving requests when all assets and configurations are available
Immutable deployment
-
Guarantee the integrity of previous deploys by insulating them from future actions
-
Paired with atomic deploys, immutable deploys make it possible for sites to enjoy functionality such as instant rollbacks and versioning
Image source: https://www.netlify.com/products/build/
For the Lighthouse Funds site, Netlify automatically builds and deploys site previews based on Github pull requests. For a successful build of a commit within a PR, a deploy preview will be generated.
Netlify also automatically builds and deploys to the staging (development) environment when a pull request is merged into the staging branch, and in the same fashion, to the production environment when staging is merged into the main branch.
Netlify Edge
“A fast, resilient network for web apps. Connected to your development workflow and designed to handle the most complex tasks — or even to run your own custom logic.”
Standard content delivery networks (CDNs) fundamentally function as local asset dumps. Your images, videos, and other downloadable content is stored in numerous CDN nodes around the world, and ensure that when your browser requests assets, that they come from the closest server, not from halfway across the globe. They also provide high uptime — if one server goes down, traffic is rerouted to the next closest server. This helps prevent the severity of events like DDoS attacks.
Netlify Edge takes this concept even further by hosting your entire site on CDN. This means the HTML, JS and CSS etc. are also stored in numerous locations around the world. The Edge CDN utilises logic layers that add extra control — allowing instant cache invalidation and rollbacks, providing consistent site state through atomic deploys, and shaping traffing through custom rewrite, redirect and proxy rules.
In this project, I valued the Git-integrated CI/CD pipeline that Edge provides, and the easy file-based configuration that lives alongside the code in our Git repository. Having almost everything in one place (Git) keeps it simple and clear to anyone picking up the project in the future.
Image source: https://www.netlify.com/products/edge/
Netlify Functions
Netlify Functions are solely server-side code, for things like creating API endpoints, running code automatically in response to certain events, or processing complex jobs in the background.
When used with Next.js, Netlify creates a Function for each Next.js page that requires one.
Netlify Build log
You’ll see in this image, that there are icons next to each entry in the log. The lambda icon represents pages or APIs that require a function. The hollow circle represents a Statically Generated page with no props (JSON data), and the solid circle represents a Statically Generated page that does have props (JSON data).
To sum it all up
Operating costs
Prismic
We are on the Starter Developer plan, which is $84.00 USD ($121.32 NZD*) annually, or $7.00 USD ($10.11 NZD*) per month. This gives us three users, but is otherwise exactly the same as the free Community plan (one user) and the $180.00 USD Small plan (seven users). These Developer plans include unlimited API calls, documents, custom types, locales, assets, and image optimisations, as well as 100 GB bandwidth per month, served via an AWS Cloudfront Edge CDN. We use on average 12.6 MB of the 100 GB.
AWS S3
S3 Standard Pricing starts at $0.025 USD per GB, and the public bucket storing the documents contains 27.5 MB of data, meaning the monthly cost for storage is $0.0006875 USD ($0.00099 NZD*). This totals $0.01188 NZD annually, so is essentially negligible.
Mailchimp
The Essentials Marketing plan is billed at $19.55 NZD per month ($234.60 NZD annually). The main driver for upgrading from the Free plan was the extra seats — three versus one — and the ability to remove Mailchimp branding from emails sent to audience members.
Netlify
We are on the free Starter plan which gives us one team member, and 100GB of bandwidth and 300 build minutes per month. With the current traffic and size of the site, we don’t even get close to our bandwidth limit. We never exceeded the build minute limit during the development phase, and have used less than 30 minutes per month on Prismic and manually initiated rebuilds since we went live in May. For now, the free plan is more than sufficient, but if we start a new project phase in the future with server-side rendering requirements, we may need to upgrade.
Total
All up, this site costs $29.66 NZD per month, or $355.92 NZD annually, to operate.
Note: as the domains were purchased in 2015 and used ever since, these ongoing costs haven’t been included in the operating costs for the new site build.
Maintenance
Currently, the only developer time needed to maintain the site is when monthly factsheets or quarterly reports need to be added to the AWS S3 bucket, which then requires a manual Netlify rebuild. There are plans to streamline this process by adding an upload API to the admin dashboard (built as part of the Rails app), which would call a webhook and trigger a rebuild of the site. This would allow Lighthouse Funds to own this process themselves. The same could be done for adding unit prices from the admin dashboard, which are used for the interactive chart on the home page.
Looking ahead
I am confident Next.js and the supporting tools and technologies we have chosen will provide a strong foundation for future features and/or project phases. The documentation and code examples are excellent, there is lots of support and knowledge available in the developer community, and the server-side rendering option gives us the ability to build dynamic and user-specific content.
A word from Lighthouse Funds
It was a pleasure working with the Abletech team on our new website. We’re especially happy with the ability to easily self-publish blog posts. It’s a big step-up from our old site.
— Mark Donnell, Founder & Investment Manager
If you’re interested in finding out more about Lighthouse Funds, take a look into the Fund details, or follow these steps to get started.
*As at 13 October 2021
