15 Powerful Tools To Add Advanced Functionality To Your JAMstack Project

The JAMstack makes it easier to create rich sites than ever before, which means your projects will be more secure, more stable, and more affordable than ever before.

Running a JAMstack site requires a slight change in the way you think about architecting your project. A successful JAMstack site is all about composing the best services for your specific project. When you want to deliver dynamic experiences like form submissions, search, and server-side data processing you’ve got lots of options to choose from. An entire crop of new services has grown to handle so many of use-cases that you’d once dedicate an entire server towards.

Building with the JAMstack means you can avoid maintaining your own server, add powerful features to your project without nearly as much code, and focus your time on building a great user experience.

Form Endpoints

It used to be that one of the biggest downsides of running a static-site was that there was no good way of handling form submissions. Luckily, a bouquet of companies has arisen to handle this simple, common task for you. Simply provide their unique address as your form’s action, and they’ll serialize, store, and even send along your data to webhooks. There are lots of options to choose from (see below), but so far Basin seems to be the best value of the bunch with unlimited forms and unlimited submissions for $5/mo.

Other great solutions:

• Formkeep, Formcarry, FieldGoal, FormBackend, and PageClip all offer similar functionality to Basin. There’s probably even more than we can list here. Take a look, compare them, and pick the one that’s right for you.
• If you’re already using Netlify, then their built-in form handling is probably your best bet. This way, you can avoid adding extra complexity by keeping all your site’s data together in one place.
• Zapier Webhooks is a great DIY solution if you want to hack something together yourself. You can set your form’s action to your Zapier webhook, then pass the data along to any other service you can think of.

Search

Search could well be the heaviest burden of your project. It’s a tricky situation: search is incredibly difficult to do well, but it’s a UI feature that users expect to be done—and be done perfectly. Luckily, search services like Algolia make it easy to deliver a sophisticated search experience without building it from the ground up. They offer a Search API for indexing and ranking your project’s content, as well as pre-built interface elements in a variety of frameworks to let you drop in a search tool that works wonderfully.

Other great solutions:

• SearchIQ offers a smaller set of features as Algolia, but at a lower price. One notable difference is they provide crawling of your project, which saves you from building the index yourself. They also provide drop-in JavaScript tools to provide autocomplete and search result pages.
• For a different take on this problem, Lunr provides a client-side search solution. If you’re rendering out a static site with a limited amount of content, say a blog or store, this could make for a great alternative. After rendering a static index file, Lunr will build a searchable index that you can cache in the browser's localStorage for future visits.

Authentication

Authentication is tricky to get right and the consequences for making a mistake are huge. If you want to maintain user identities as part of your project, stick with an off-the-shelf solution like Auth0. They provide a single-sign-on platform, an embeddable log-in widget, and advanced security features like multi-factor authentication and password-less login. Robust documentation and developer SDKs will make it easy to integrate Auth0 into your project. And, with 7k free active users and unlimited logins, they’re one of the most affordable services for getting your project up off the ground.

Other great solutions:

• Netlify is a great service for hosting your JAMstack site, and one of the many reasons for that is the Netlify Identity add-on service they provide. You’ll get up to 1000 active users for free, easy connections to external identity providers like Google and GitHub, and authentication widgets to add to your site. If you’re already running your JAMstack project on Netlify (and you should consider it!), this is an easy choice.
• AWS Cognito is the most affordable option, but it’s also harder to implement than the off-the-shelf solutions provided by Auth0. However, the aws-amplify library makes it much easier to integrate AWS into your JAMstack app. If you’re already using AWS to power the rest of your product’s services, then it may pay off to look into using Cognito first.

Functions as a Service (FaaS)

Serverless functions are one of the most exciting parts of the JAMstack. Using a FaaS allows you to add just about any functionality you can imagine to your JAMstack site. For example, if none of the form providers we mentioned float your boat, spin up a serverless function and roll your own. Gives you tons of flexibility without having to worry about the underlying server or infrastructure. When you’re not using the function you’re not being billed for it. The grand-daddy of FaaS is AWS lambda. AWS Lambda functions are our go-to at TakeShape, in-fact, TakeShape itself runs on AWS Lambda.

Other great solutions:

• Netlify Functions - basically a front for AWS lambda functions. If you’re using Netlify to host your JAMstack site and you like the convenience of centralized billing then Netlify functions are for you.
• Google Cloud Functions (https://cloud.google.com/functions/) - Programmable cloud functions. Just like AWS lambda functions, but provided by Google. Good for being the recipient of a Webhook triggered by TakeShape.
• Zeit Now - https://zeit.co/now - An up-and-comer with an incredibly easy to use CLI.
• Zapier Webhooks is a great DIY solution if you just want to connect two services without doing any coding. It can save you a bunch of time, but the downside is that the functions can cost you much more to run if you use them frequently.

Headless Content Management Systems (CMS)

Finally, to manage the content of your JAMstack project you’ll want an easy-to-use CMS and static site generator. Leave folders of Markdown files behind and use TakeShape, a straightforward CMS and static site generator for organizing, developing, and deploying your JAMstack site. If you’re creating a web app, TakeShape’s GraphQL API provides a simple, easy-to-use endpoint to query for all your content at once. And best of all, TakeShape already provides sample projects that can get your site up and running within 5 minutes! You can try TakeShape for free and find that it’s the easiest way to manage content for your JAMstack site.