Vercel
What is it?
Vercel is a cloud platform optimized for frontend developers, providing seamless hosting, serverless functions, and automated deployment pipelines. It is designed to make web applications faster and easier to scale, serving as the creator of Next.js. Vercel is ideal for deploying static sites, frontend frameworks, and serverless applications. source
What does it mean?
TL:DR; it’s a platform where you can easily deploy your web applications
Vercel is a cloud service provider that basically allows to deploy modern javascript applications. It has a wide support for all the modern framework like NextJS (duh), Astro, Sveltekit, and others and different architectures, namely single or monorepos and it integrates seamlessly with your versioning provider like Github or Gitlab.
It has a very powerful CLI that enables people to simply deploy from their terminals, to multiple regions (if your plan supports it) and many other things.
Cloudflare
What is it?
Cloudflare is a global cloud platform providing web security, performance, and reliability services. It acts as a reverse proxy and Content Delivery Network (CDN), sitting between users and a website’s server to block threats like DDoS attacks, optimize content delivery, and provide DNS services to enhance speed. source
What does it mean?
TL:DR; it’s a cloud provider to deploy, manage and organise your web applications, domains and serve static assets via CDN
Cloudflare is an entire infrastructure of servers and cloud services around the globe. It owns the hardware, which is something to keep in mind and offers a variaty of services like CDN, cloud storage, DNS and email forwarding, database connections and key, value stores out of the box.
It supports many frameworks and other version control systems like Github, Gitlab and Bitbucket. It uses it’s own runtime to deploy in what can be considered 2 main types of deployment solutions:
Equally powerful and each for its own purpose Cloudflare solutions have become a huge competitor in the cloud service providers space and direct competition to Vercel
The juice
I don’t want to get caught up in the weeds and definitions, each service has its strengths and weaknesses and I leave the hot potato to the reader to go and check each single possible difference. As far as my decision went, it was primarily driven by cost efficiency and the fact that Cloudflare ultimately owns the hardware it uses, unlike Vercel. This might mean nothing to most people, fair enough, to me it meant a lot.
Did I also mention the pricing? Pricing is a big one and I don’t think it’s controversial to say that CF (Cloudflare from now on) is way cheaper than Vercel.
I want to use this post to share my experience using CF for domain management, CDN and R2 bucket setup and finally deployment of a simple Astro static app (static as in mostly html - long gone are the days).
I should also point out that this was my first time using CF and I have been an avid user of Vercel for quite a few years (let’s say 4) so I know what it’s like on the other side. I gotta admit the differences are obvious and it took a bit of effort and patience to finally deploy my website, but I think that as any learning curve my frustration was mainly driven by inexperience with the platform.
What does the platform do for these inexperienced devs like who land on their website? Not much. I rephrase, the docs are numerous but also quite scattered, they make a huge deal dividing the 2 main services, workers and pages, and it’s not always clear which configuration works with which (spoiler alert, they both work but with some caveats).
Domain registration
This part is a breeze, it was very easy and quick and the documentation was almost irrelevant. The setup is intuitive and really guides you to searching for an available domain, the purchase, price and payment options are clear and they don’t stall. I give this experience a 7/10, it was smooth, and simple, which is why I would honestly expect from a DNS provider, this is the 7. My comparison in this case was Google domains (never gonna use that again) and Namecheap which is a solid, very solid option.
What can I say, if you want to buy a domain, CF is a very good solution. In hindsight I also noticed a bunch of hidden (not so hidden) benefits:
- If you plan to do many thing on your web app, it’s very easy to have your domain registered there too
- External services provide simple wizards and automatic installations for CF, which is not something you find with Namecheap or Google domain. Setting up the domain for Resend emails was basically automatic, shoutout to Resend for this blessing, and setting up Posthog proxy was as easy. So big thumb up 👍
Vercel also offers domains but I never tried that so I couldn’t really make a comparison but I would expect a similar experience.
CDN
It is quite known that the CF CDN is one of the most famous and used around the globe from developers and big companies as well. It is well distributed, fast and so cheap. It supports S3 bucket out of the box and offers CF version of S3 buckets, R2 (what’s with the numbers guys!?).
Creating a bucket is simple, getting credentials a bit less but I say skill issue on my part. What am I using it for? For my static content of course, and it works, sitting behind the CDN which was even simpler to setup having all the things managed by CF, in house. I had no problems there.
I got one problem when I tried to deploy from my CLI, in a CI pipeline, my static assets would build and then let’s upload them to R2. No, not so fast, the token is missing. Right, the token my bad. There you are, now there’s the token, nope [ERROR] this token doesn’t have the permissions to do this. I need to give it the permission it needs, but which one is it? there are like 30, well maybe this where it says buckets? Nope doesn’t work. You know what, it’s fully S3 compliant, why don’t I use the aws cli maybe I have more luck there and yes I had it worked first try. (I use the api token that the bucket provides, that is enough apparently for this but it wasn’t for the other one 🤷)
I reasonably concede to a skill issue on my part BUT the aws approach worked out of the box so, I mean….
How does it compare to Vercel? It doesn’t, Vercel CDN is not a thing, they have it, they use it, but you can’t really set one up for yourself so from this point of view I would say big win for CF.
Following till now I left out a big piece of the puzzle, a tool that CF uses for management and deployment and other cool stuff, their CLI which in this case was the real bottleneck.
Wrangler
I think I am quite experienced by now, I deployed and worked with many different services and technologies, I used EC2 and Digital Ocean droplets before that, Vercel, Fly.io and Railway. I know my way around configuration files, and CLIs and let me tell you, Wrangler is a gift from the Devil himself.
Let’s start from the syntax, what is wrong about it? nothing, it can be a simple json file or a toml if you’re into that. What’s difficult is actually understand what is needed and what isn’t. A configuration is totally fine for CF workers, but breaks with CF pages, and what about build commands and instructions? yeah good luck.
Debugging what was wrong with my build was a nightmare, I had no idea what I was doing wrong, the build logs weren’t really helpful and I was starting to get really frustrated. How is this possible? Docs scattered around different websites, CF docs, Astro docs some posts on Reddit say it’s so easy to do, why am I still here? it was almost 2 hours trying to deploy (it took me less than 2 hours to make the actual website btw).
Frustrated and with that unsettling feeling of abandonment, I went to Vercel. It was a challenge, which then inspired this post. I want to see how long it took to deploy this thing on Vercel. Do I need a config file? Nope, you can provide a vercel.json but I wanted to do it as simply and plainly as possible. Let’s start and….we’re done. 1 and a half minute, this is what it took to deploy onto Vercel.
I gave permissions to my Github repo, it reads the environment, the framework and runtime I was using bun, it prefilled the build and deploy commands, I also use turborepo and prefilled the root directory and watch files, everything in the blink of an eye, and 30 secs later I could see my website deployed.
This is orders of magnitude, this difference cannot be explained by inexperience, or skill issues, this is something that is fundamentally different between Vercel and CF, or at least in my opinion. Vercel prioritise user experience and speed of deployment, what is the fastest way to go from a repo on Github to it being deployed around and available? and they built it and kudos to them, it works like a charm. CF wasn’t built for this, they are catching up the serverless game. It’s also a limitation of their hardware, they had to basically invent an entire runtime to patch things up, and made a cli language that is absolutely sub par. Yes, the worst experience I ever had deploying is wrangler, I thought I would love it, instead I am here having PTSD.
There is also a note here, which is just bad user experience. While I tried to setup a project on CF, I kept setting up CF workers, and I really couldn’t figure out why or how to use CF pages, why isn’t it here? Guess what, it was, in the smallest possible little corner of the screen, barely noticeable, saying “Hey, you want to use pages?” Yes I do, and why the hell are you down there?
Is this a deliberate choice from CF to push people to use workers? I don’t know, but it sure seemed that way.
Anyway, at the end I didn’t want to give up, I am an experienced developer, I cannot be defeated like this, so I went back in and tried again. Maybe it was a clearer mind but I stumbled across, and yes stumbled it’s the term because it definitely wasn’t looking at me or wanted to be found, a piece of documentation where an example had a BUN_VERSION key in the configuration file, and that was used to specify the bun version you wanted to use. Guess what? that was the missing piece, my build was starting and then failing because I was using workspaces, which is not supported by npm, and all I had to do was to declare the fact that I was using Bun, and it would use bun install instead of npm install
3 hours people, 3 hours to just come across, in the most random way, an example that had the piece of configuration I needed (did I say that Vercel actually picked the runtime automatically right?). It deployed and that website is now here, where you are reading this post (probably).
Verdict
I think I have spent enough words for this so I want to be short:
- CF CDN first in class I had no problem using it and setting it up with R2 buckets → 10
- CF Domains, it almost goes without saying but it delivered according to expectation so → 7
- CF Deployment, overall the deployment is good, the dashboard is a bit confusing but it says what it needs to say but the configuration and setup is absolutely horrendous, I spent hours trying to debug and build a simple static website which took me 1 minute to deploy on Vercel, and it was basically a problem with missing configuration. Not cool → 3
Why did I still go with Cloudflare at the end? Because I am a developer and I see this as a learning experience, I didn’t give up and now I can actually use that more generous pricing CF has to offer.
If you want to deploy quickly, very quickly, without playing with configurations and deal with an environment which is actually made for speed of deployment then the choice is clearly Vercel, no doubt about it.
If you can get past that and think that good pricing and being in charge of its own hardware is something important then use Cloudflare, just keep in mind that in the space I think they are still quite fresh and maturing really slowly which is a shame if only the configuration docs were done better I am sure CF could make leaps ahead of the competition. Who knows.
Thanks for reading, come back for more 🚀