29 July 2021
by Andrew Nikonov

The tools you need for your JAMstack site to take off

The success of a business today largely depends on the speed and reliability of a web application or site. In order to develop and launch a high-quality site on the Jamstack, you will need services that greatly simplify the job. In this review, we will tell you about the most popular tools, many of which we use in our projects. Of course, the list is far from complete, but the listed tools will be enough to build better, faster and more reliable sites in a shorter time frame and ultimately increase your business performance.

What types of tools you will need

To simplify development, third-party services were created that provide API (letter A in Jamstack). You can connect them for free or for a small monthly fee to your site, which saves you the hassle of writing your own backend. The main tools to get your website up and running are hosting, SSGs, CMSs, authentication, serverless functions, and payment systems. There are also additional tools, we will talk about them in a separate section.

Hosting

You will need hosting that provides automated deployments. The scheme works as follows: you may have a repository in GitHub, from which, after each commit, the hosting platform automatically performs the deployment (via web hooks), launches the necessary build tools (for example, Gatsby.js) and regression testing (for example, through Travis CI).

Netlify. It was Netlify CEO Mathias Biilmann who coined the term Jamstack. The ease of use of this service is unmatched. The features are good too: worldwide CDN, free SSL, command line support, and more. We most often use this platform in our projects.

Vercel. Another commonly used platform is Vercel, as it works well in conjunction with Next.js. Not surprisingly, both Vercel and Next.js are products of the same company.

Heroku. This service is worth mentioning because it allows you to host applications of any complexity, built in Node.js, Ruby, Python, Java, PHP, Go, Scala and Clojure and other languages.

Cloudflare. This is the company that provides the lowest latency for sites hosted on their CDN.

CMS

Headless CMSs is, in fact, just a backend without a frontend, which allows you to create the UI in your favoutite way

Previously, with the dominance of the monolithic approach, whenever we used a particular content management system such as WordPress, we also had to use a set of themes tied to it, so the frontend was tightly coupled with the backend.

But then the "headless" CMSs came - in fact, just a backend without a frontend. Since the headless CMS usually provides an API and allows you to generate HTML pages during the build of the project, the front-end of the site can be created on anything. There can even be several interfaces if necessary (for example, a website and a mobile application can use the same data source in the form of a headless CMS).

CMS are Self-Hosted and SaaS. From the first category worth mentioning are Ghost, Strapi, Netlify.

SaaS headless CMSs includes Contentful, DatoCMS, Prismic, Forestry. We use Sanity and Storyblok a lot ourselves. We like Sanity for its customizability, and Storyblok for its functionality, simplicity, low cost and its live visual editor, that is lovely.

Today there are CMS for every taste and budget, most have free plans that are suitable even for a medium or large business.

Need a reliable and blazingly fast JAMstack site?
Contact us now!

Static Site Generators (SSG)

If you need to translate dynamic pages to the JAMstack, SSG is essential. If you decide to use SSG, you can continue to use your CMS (if it has a headless API) and enjoy new features: code and data separation, preloading, caching, image optimization, and other performance improvements. During project build, a request for data to the CMS occurs, which triggers the generation of static output data (for example, a web page).

Here is a list of some of the most popular SSGs:

GatsbyJS (most often used in Jamstack projects),

11ty (by the way, take a look at our starter on 11ty, you will understand how this convenient SSG is).

Hugo (the fastest generator),

Jekyll

Next.js (the site you are currently reading is written on this technology)

● and many others.

By the way, SSG can be connected to WP as well, as this CMS provides a headless API.

Authentication

IDaaS, also sometimes referred to as Authentication as a Service (AaaS), involves managing user registration, validation, and authentication using an API only. The essence of the service is that the user is authenticated by a third-party API and returns to you with a valid "token", which you can confirm or revoke if required.

The leading service here is Auth0. It offers quick start guides for a number of common scenarios. This is a great option if you want to implement an end-to-end solution and already have some experience implementing authentication.

Netlify also offers an authentication solution, very simple, but with a number of limitations. But it allows you to set up user authentication in 10 minutes!

Firebase Authentication is also worth noting. This service is interesting in that it provides anonymous authentication and works great in conjunction with other Firebase and Google services, and also supports many auth providers.

Payment systems

The advantages of headless e-commerce are the same as those of headless CMS: significant cost savings (hosting, licenses, maintenance, no need to develop your own user flows related to payments), less time-to-market, and seamless integration of all customer communication channels.

Stripe should be mentioned here, for it is one of the most popular online payment solutions, provides a convenient API for integration, is supported in 35 countries of the world, supports 135+ currencies and payment methods, offers subscriptions and much more. Stripe works great with Jamstack.

Another good news is that popular e-commerce SaaS platforms have headless APIs, too (like Shopify or BigCommerce).

Foxy.io and Snipcart provide a simple service that is very easy to integrate into different formats. Foxy.io is subscription based, while Snipcart charges a percentage of transactions.

The variety of JAMstack tools these days is terrific

Backend / serverless functions

In the event that the available APIs do not meet your needs, you can create a microservice yourself, in a language convenient for you and with all the necessary functions. AWS Lambda, Azure Functions, or Google Cloud Functions provide this opportunity. There are also Netlify Functions, Firebase Cloud Functions, Vercel Serverless Functions. Now you don't need to maintain the server infrastructure yourself - encapsulate the logic in functions, deploy them in the cloud, connect them via a RESTful API, and the cloud provider will take care of the rest.

Additional tools

We've listed the main services to help you start or continue growing your business with the JAMstack. Of course, this is not all: APIs for the JAMstack also offer convenient features such as connecting to cloud databases (Amazon DynamoDB, Google Firestore), form processing (Form.IO, Formcarry, Formspark, and Netlify Forms), third-party search (Google Custom Search, Elasticsearch) and notifications (OneSignal, Pushwoosh and Truepush). Almost any business need today can be met by dozens of reliable and, as a rule, inexpensive services.

If our article does not fully satisfy your interest, check out The Power of Serverless. This is a list with many categorized serverless tools.

Conclusion

As you can see, third-party solutions have already been created to solve most of the typical tasks facing a business. Consider how much time and labor you can save if you outsource these tasks to third-party services that have proven themselves to be reliable and efficient ? Very often, the savings are significant, and you can focus on the business processes specific to your enterprise. Many large corporations and popular startups have already switched to using the JAMstack, it's time for you to do it. If you need help with such a transition, or you do not know where to start, please contact us. We will be happy to help!

Looking for an experienced JAMstack developer?
Contact us now!

Like this article? Share it with your friends!

Want to get our rates and the full list of our recent projects? We'll send them in a PDF!

Just leave us your email!
(we promise, we don't send any spam)