JAMStack hosting providers and the future of web development (Cloudflare + FaunaDB)

One of the great revolutions in the world of web development is, without a doubt, the JAMStack infrastructure providers. In short, these are static web hosting platforms that offer, in addition, the possibility of executing serverless functions.

Companies such as Vercel, Netlify, or Cloudflare seem to trace the contours of a new revolution in hosting, and I am convinced that this revolution is just beginning!

The interest of such a solution is undoubtedly the possibility of benefiting from an Ops infrastructure that you are unable to create yourself unless you are a very large structure. Therefore, I will always advise startups, and even small and medium-sized companies, to use these solutions whenever possible. Furthermore, the end result is incredibly fast!

In my current post, I want to build a “CRUD” type application using only SaaS solutions. Since it is a PoC, I have favored free solutions. But a CRUD application is only interesting if you include a database, and preferably ACID, which should allow me to build complex queries.

My PoC consists of a URL Shortener. This example is interesting because it allows building a small CRUD application where I allow the user to :

1. Define short URLs (INSERT a new record in the database)
2. Access the URL (READ from the database)
3. Count the number of times a user uses a short URL (UPDATE from the database)
4. Implement a JAMStack application: a separate frontend and backend, in addition to a database

A NoSQL database like Firebase or others would indeed do very well, but I still imposed the constraint of a distributed and ACID database.

Determining a platform provider

My choice for this PoC was Cloudflare because I think they offer a solid solution with the following main advantages:

1. Cloudflare Pages offers completely free web page hosting and the deployment is completely automated: a push in GitHub/GitLab triggers a deployment. A custom domain name can also be easily configured
2. Cloudflare Workers has an amazing free tier offer with a quota of 100k requests per day
3. Cloudflare Unbound (a new feature still in beta and not free) allows extending the execution time of serverless functions from 50ms (CPU time limit) to 30s … The interest of such a limit is to prevent very long execution times (especially if it is a web application that requires quick responses)
4. The possibility to realize Cron Jobs with a maximum duration of 15 min (feature still in beta test and not free)
5. The code is deployed in Cloudflare’s network which includes more than 200 data centers in 110 countries (the customer will therefore have a low response time due to the density of the delivery points)
6. DDoS and HTTPS attack prevention by default
7. Regarding the limitations, these have been well analyzed and compared with a major competitor (Vercel) in this article: https://moiva.io/blog/vercel-serverless-functions-vs-cloudflare-workers/

Choice of the database

Cloudflare Workers indeed offers two solutions for data persistence, namely KV (key-value storage) and durable objects. However, I chose FaunaDB for the following reasons:

1. A Cloudflare partner
2. Possibility to write complex queries (in addition to SELECT, DELETE, UPDATE and INSERT, we can perform joins, etc.) thanks to two mechanisms: indexing and the functions proposed by FaunaDB
3. ACID database deployed at scale (data replicated on several servers)
4. GraphQL support, in addition to the possibility to store primitive data, objects, documents, etc.
5. A free tier of 100k read ops, 50k write ops, 500k compute ops, 5GB storage, per month
6. The limits of the solution are listed here: https://docs.fauna.com/fauna/current/learn/understanding/limits. Since this is an expensive solution, using DynamoDB or any other managed database could be a good alternative.

Realization of the PoC

Frontend application

It is a rudimentary React application (generated with create-react-app), including the following packages:

1. React-Router because we have globally 2 pages: `/shortener/new` for the definition of a new URL and `/:shortId` which redirects to the new site after 1s (the time that the user sees the site he is going to access and the number of uses of the short URL)
2. React-hook-form and yup to control the inputs of the form

API/serverless part

I didn’t want to use the most popular frameworks of the moment like `worktop` or `itty-router`. Instead, I preferred to write workers without any framework. This allows me to know well the basic functionalities of the solution.

Here are the main dependencies used for the backend:

1. faunadb for the integration with the database
2. nanoid for the generation of short ids
3. parse-url to parse HTTP requests URLs
4. Yup for incoming data control

Database

The database does not require any prior schema definition: the data are persisted as objects. However, thanks to the possibility of defining indexes, we can perform operations according to the properties of the stored objects.

Interactions model

Source code

The realized implementation can be found in the GitHub repository: https://github.com/AmineBenaddiGitHub/url-stitou

It’s a mono repository, containing both the React app and the workers' files (in the api folder).

The deployed web app

Unfortunately, I do not guarantee the proper functioning of the website if it goes viral since the quotas imposed by the free plans may not be enough. That being said, here is the URL of the deployed PoC: https://url-stitou.pages.dev/

Conclusion

In summary, Cloudflare offers two very innovative solutions, namely Cloudflare pages and Cloudflare workers. These allow the development team to focus directly on the business side and implementation rather than having to provision servers and manage an entire infrastructure. In addition, as platform providers will offer interesting features, the use of those kinds of services will only increase.

Finally, depending on the use case, the technical team can choose the most suitable “Frontend-as-a-Service” platform, the most suitable “Function-as-a-Service” solution, and the most relevant “Database-as-a-Service” provider.