✨ Rust Serverless Functions on Netlify
Today we'll look at how to use Rust Serverless Functions on Netlify. This is a relatively new feature on Netlify. I think it was introduced early 2021. In recent posts we have looked at using Gatsby Cloud Functions in your Gatsby App, both on Netlify and also the new native support baked into Gatsby. Both of those implementations use a Node.js environment to run your serverless functions. Using Netlify, however, you are not limited to Node and can run Go and Rust among other languages.
Why use Serverless Rust?
Why Else use Serverless Rust?
If you want other reasons to run Rust, it has been one of the most popular languages to learn of late. It is a great systems language built to address some of the shortcomings of more traditional languages like C and C++. It is also designed to be more secure. The security and safety features introduce some complications, but there is some excellent documentation on learning Rust, affectionately known as The Book .
Enough about how good Rust is already! Let's look at what we're building.
🧱 What We're Building
Today we'll look at an accessibility tool to use when designing websites. You've picked your colour scheme for your website. You start to have some ideas on which colours you want to use as text and background colours for the different elements. But hold on a jiffy, do you know which of those combinations are accessible? When there is low contrast between text and its background, the text can be difficult for partially sighted people to read. Contrast ratio is our friend here. By checking the contrast ratio between text colour and background colour is 4.5 or higher , we can help partially sighted users out. This project will build a tool to check contrast ratios between theme colours. We input all our theme colours and it tells us the contrast ratios between them, using a serverless function to do the maths.
Anyway, for this project, the idea is we input the colours from our theme on a static Gatsby site. It then calls the Rust serverless function to get the contrast ratios for every colour combination. The site outputs the ratios into a grid making it easy to see which combinations are safe to use.
Does this sound like something you would like to build? Let's crack on then!
⚓ Let's Set Sail… Weigh Anchor!
We will use the Gatsby Climate Starter . We won't add that much styling or smooth all of the sharp corners, so we can focus on the Rust. Clone the starter and spin up a new site:
⚙️ Rust Serverless with Netlify Functions Configuration
There's more than one way to do this. You can compile the Rust code locally and commit the compiled binary to your repo. In this case you need to cross-compile to make sure the binary can run on Netlify. Instead we will compile the Rust code into a binary on Netlify's servers, during the Gatsby site build process. This does mean your build will take a little longer (Netlify do some caching so first build is the slowest). Chris Biscardi has written a good post on compiling the Netlify Serverless Function locally and committing the binary to your repo if you're interested in seeing how that works.
The first important thing we need to do is ensure we compile a binary which is compatible with the processor architecture used on Netlify servers. We can do this using a
rust-toolchain file in our project's root directory. The target processor architecture needs to be
x86_64-unknown-linux-musl. Create and edit the
Next up, we want to change our build command to include compilation of the Rust binary. We will use a Makefile to help generate the binary, so all we need to do is add the
make command to the existing build command in
netlify.toml in the project's root directory:
You probably guessed we need to create a
Makefile now! Create it in the project's root directory:
build target within the make file creates a
netlify/functions directory if it does not already exist and then copies the binary there. This is exactly where Netlify will look for the function binary based on our
netlify.toml file. The
cargo strip command is not strictly necessary. It can make the binary much smaller. I haven't run tests, but I would imagine it is more important to run this when speed is an issue, as I would expect your functions can spin up a touch quicker with a smaller binary. Interested to hear if you have run some tests yourself. Drop a comment or get in touch another way if you have. In line
8 we are just ensuring we have the
cargo-strip tool installed.
Be sure to change
get-contrast-ratios in line
11 to whatever you call your binary when you use this code in your own projects.
🖥 Let's Write Some Rust
src directory, create
main.rs. Add the following content to it:
This code won't work yet. It has the guts (which do the computation) removed, just so we can focus on how to set up the rust serverless function and provide the expected response. Let's take a look at what we have starting at the top and working our way down.
The most import
use crate here is
netlify_lambda_http. This was forked from an AWS Lambda repo to add extra functionality. We use
photon_rs only for a helper method from the Rgb struct. To be able to receive a JSON body and send one in the response, we use
serde_json. This is quite a handy crate (it's name comes from a contraction of “serialise deserialise”.)
Next up is our main function, which will take the request and pass it on to
respond_with_contrast_ratio before actually responding with the JSON body.
JSON in Serverless Rust
21, we define the shape and types of the incoming request. This is important as Rust is a strongly typed language. The JSON passed from our client code will just be a JSON object containing a single top level field which is an array containing the hex codes of the colours in our site theme:
We will have Rust treat that array as a
Vec. It is important to remember to add other fields as the API changes for the code to continue compiling successfully!
The final function is where the main work gets started. The code in lines
29 relies on us defining the
ClientRequest struct we just discussed. The result will also contain an array. This will just have one element for each unique colour combination:
You see in line
38 it is pretty easy to generate a JSON response, using serde. In a final version of a client project, we would add more type checking but for the sake of showing how to use Serverless Rust with Netlify, there's just about enough! You might also add more server side validation of inputs.
The final, missing piece of the serverless puzzle is our
Cargo.toml file. This tells the compiler what to call the output binary (make sure this matches the name you use in the
The file also lists the crates we need to build it, and the versions of those crates we need.
You will need to paste in the complete
src/main.rs — click to expand code.
Let me know if you have any questions on this.
That's the serverless function complete. Our
Makefile will save our function to
netlify/functions/get-contrast-ratios. That means to trigger the function from our client we need to POST the JSON data to the
.netlify/functions/get-contrast-ratios endpoint/. Let's try that next!
🧑🏽 Back to the Client SideNow we have the serverless Rust functions wrapped up, let's make the app a bit more full stack, and put some functionality into the client! Start by installing a few extra packages:
We use axios to submit our data to the function. Formik is used to create the inputs for the colours. The lodash function is used in the
FormikErrorFocus which we will add shortly.
src/pages/index.jsx — click to expand code.
I don't want to get off topic, so won't talk about the contents of this file. Nonetheless, please get in touch or leave a comment below if you would like some explanation of some parts of it. I have left console logs in to help with debugging if needed. The most important line of the code here is line
85 where we call the serverless function.
We imported a couple of Icons in the
index.jsx file, which we need to define. Let's do that now, adding these exports to
src/components/Icons.jsx — click to expand code.
Next for styling, create the file
src/pages/index.module.scss and give it the following content:
src/pages/index.module.scss — click to expand code.
Then we create the
FormikErrorFocus component. This will just help highlight any erroneous inputs, helping the user work out where there is an error:
src/components/FormikErrorFocus.jsx — click to expand code.
Finally we need to define the input elements and style them:
src/components/InputField.jsx — click to expand code.
src/components/InputField.module.scss — click to expand code.
As before, drop a comment or get in touch if something here needs explaining.
💯 Try it Out
Everything should be working now. You can test the function locally, making sure it builds by running the
cargo build command from the project's root directory. As normal for Gatsby apps, you can test the client build running
npm run build then
gatsby server. The easiest way to test the full functionality is to commit the repo and set it up as a site on Netlify. When you do this, don't forget to add the environment variables otherwise the Gatsby part won't build. We run through how to launch a new site on Netlify in the post on building SvelteKit sites on Netlify. The Netlify console part of the process is exactly the same for Gatsby sites.
🙌🏽 What Do You Think?
In this post we learned:
- how to create a Gatsby site which uses serverless Rust,
- setting up your project to compile Netlify functions,
- how to create an accessibility tool for checking contrast ratios for theme colours.
The next (extension) step is to create some serverless Rust with Netlify functions in some of your side projects. Keen to hear what you do (as always)! Is there something from this post you can leverage for a side project or even client project? I hope so! Let me know if there is anything in the post that I can improve on, for any one else creating this project. You can leave a comment below, @ me on twitter or try one of the other contact methods listed below.
🙏🏽 Gatsby Functions on Netlify: Feedback
As I say, I hope you enjoyed following along and creating this project as well as learned something new. I also hope you will use this code in your own projects. I would love to hear what you are using serverless Rust for. Finally be sure to let me know ideas for other posts you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.
Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Gatsby JS among other topics. Also subscribe to the newsletter to keep up-to-date with our latest projects.