As a way to learn serverless development, I built a series of small experiments/projects that all use serverless technology.
Specifically, this is a static site built using Gatsby and hosted on Netlify.
All of the serverless functionality of this site is built using AWS Lambda, specifically, Netlify's implementation of them using Netlify Functions.
You can dive into this site and see how it's put together on GitHub.
The site you are reading this on is built using Gatsby, a React-based static site generator, and hosted on Netlify, an awesome hosting service that gives me all of the following with minimal setup:
- Easy implementation of Lambda functions. Netlify has a feature called Netlify Functions, which allow you to create AWS Lambda functions by simply including the function as a JS file in the repo. If you look at this site on GitHub, you can see these in the functions folder.
- Git-based continuous deployment. All of my deployment is handled for me automaticaly based on my git workflow. Another awesome part of this build process is automatic pull request/merge based deploy previews. This allows me to check out a preview of my newly built site when I make a pull request, and merge it into production and deploy it live if everything looks good. Netlify takes care of all of this automatically.
- Custom headers. Custom headers are usually difficult for static sites. While they can be added using services like Lambda, Netlify provides support for them out of the box. Before adding these custom headers, my score on securityheaders.io was a D. Using the feedback from that report, I was able to add custom headers using Netlify and bring my score to A+. Unfortunately, I ran into some issues with using Gatsby and the content security policy header, so I removed it until I can get a handle on how to set that up correctly.
- Contact form. Netlify's forms feature allows me to have a contact form on my site without having to worry about any of the backend code that makes it work.
Combine all of that awesome functionality with Gatsby, which gives me:
- A super performant, secure, accessible site. Check out this site on Lighthouse!
- Component-based development with React
- GraphQL implementation for robust content management
Using Gatsby and Netlify has become my new favorite way to build things on the web.
A super simple first Lambda function. Hitting this button calls a Lambda function using Netlify functions that displays some text and a random number.
While it doesn't do anything useful, it was a great way to introduce myself to the concept of serverless functions using Netlify Functions.
A common reason for needing a server is accepting payments. I thought a cool use case for this would be a 'Buy Me a Beer' button which uses Stripe to accept payments.
This just uses test data, so you can try it out by entering credit card number 4242 4242 4242 4242, any date in the future, and any three digit code, hit Pay, and you'll get a nice little thank you message.
This is using Netlify functions and environment variables to store my Stripe keys. One of the extra perks with Gatsby is that I can use environment variables in browser JS. Normally Netlify environment varaibles would have to be accessed at build time, so storing things like a Stripe token and then trying to access it from my React component would be a pain.
Luckily, with Gatsby's environment variables, I can prefix it with GATSBY_ and add it to my Netlify variables from the console, and I'm good to go.
As with everything else on this site, you can view the source code up on GitHub.
I have all of this awesome functionality without having to worry about managing any servers, deal with scaling to large amounts of users, and with increased performance and security.
I am greatly looking forward to adding to these experiments and being able to work with serverless infrastructure in the future on larger projects. I strongly believe it is the future of web development.