Appwrite Sites: A Self-Hosted, Open-Source Vercel Alternative?

Vercel-level deployment, but open source—that's what Appwrite is promising to deliver with Appwrite Sites. To me, what Vercel does super well is deployment. The time to deploy from Git changes for any type of project is minutes, if not less, and everything is relatively stress-free. So, let's see if Appwrite delivers the same experience when it's self-hosted and take a look at some of the extra self-hostable goodies of Appwrite, like storage, auth, databases, and more.

Step 1: Deployment

Luckily, that is super easy, as you can do all of this through Docker Compose. I ran this on a Digital Ocean droplet and used the domain clicksub.xyz. You can see there are several services here that work together to bring you that Vercel-like experience.

Step 2: Configure the Dashboard

We can do that at our server's IP or the domain we've pointed to it. Here, we sign in, and it's worth noting that this is not an Appwrite Cloud account; it's an account for your server, so you'll probably need to create one to start. Appwrite Cloud is for those who want that Vercel alternative where all of this hosting is handled for you. They do have an absolutely beautiful status page as well, so bonus points to them for that one. With all of this done and signed in, we can go ahead and create our first project.

Step 3: Connecting Appwrite to GitHub

Once we've done that, the final step before exploring Appwrite is connecting it to GitHub for automated deployments based on commits. To do that, you can follow the documentation on creating a GitHub app. It only takes a few minutes, and then all we need to do is set the required environment variables in the .env file. With that, I'll restart Docker Compose, and there we go. We can now link our Git repos and move on to deploying our sites.

Step 4: Deploying Our Sites

Here we go then, how does the deployment experience compare to Vercel? You can already see from the dashboard that it has a super nice UI, so it matches Vercel on that. The feature we're focusing on for deploying our sites is the 'New Site' feature. After clicking 'Create Site,' we're given three options: clone a template, connect to a repository, or just drag in your files manually.

I'm going to connect this to a Git repository for automated deployments based on my commits. I know I want the 'vaphat' project, so I'll click connect on that, select the branch that we want to be our production branch (in my case, main), and then you can also fill out the framework, which will prefill these options for you. You can see we have the build settings here, which include the install command (npm install), the build command for our actual project, and also the output directory. I'm going to leave this all as the default for the React framework. Then, I'll upload some environment variables that my project needs, hit save, and then we can click deploy.

Hopefully, this is going to pull all the code from GitHub, install it, and deploy it without any hassle. After about a minute, a success message appears: "Congratulations! You deployed your site successfully." We have a new domain setup at vhat.clicksub.xyz, so working similar to vercel.app, you are literally hosting your own open-source Vercel. We can go ahead and visit the site; if we see a login page, it means that it is currently working.

Back on the dashboard, you can see a few other options. We can see our site, which now has a screenshot, and it shows us that the build took 1 minute and 10 seconds to complete. This probably does vary based on the hardware you have this running on. As mentioned, I'm just running this on a Digital Ocean droplet, so it might be a little bit slower than if you deployed this on a big machine.

Exploring the Dashboard

Here on the dashboard, you can view more information about the site. You can see past deployments that have occurred, as well as some stats like the average build time. You can view the logs of the currently running site. We can create custom domains here, adding a domain for an active deployment, a Git branch, or even a redirect. Then you can see usage stats; for instance, we've only had one total deployment here. You can also edit the settings configured earlier, such as:

• Git repository
• Production branch
• Build settings
• Runtime settings
• Environment variables
• Timeouts
• Logging

You can even delete the site from here.

Testing Preview Deployments

Now, the one thing that I want to test about this whole experience that will make it Vercel-like for me is what happens when we create a Git commit or even a new branch. Do we get things like preview deployments? Let's go ahead and try that out. In the codebase, I'm going to commit my changes and publish the branch. Then, back on our dashboard, I'll hit refresh and see if a new deployment shows up. And there you go, a new deployment has appeared. It is currently building, but hopefully, this shows up on a preview branch and doesn't get sent to production straight away.

Now, as you can see, it finished building in 1 minute and 7 seconds, and the domain it's using is a random UUID. Clicking on it reveals a login page, which means this preview is actually protected behind your Appwrite login, so not just anyone on the internet can visit the preview. We can test it out and then get back to deploying this to production.

After exploring further, you can see here on the deployments tab that the status of that last deployment is set to 'Ready,' whereas the production one is set to 'Active.' If for some reason you wanted to set that branch to be the production one, you can come in here and click 'Activate.' That will make it publicly accessible on the main domain of vhat.clicksub.xyz. You could also go back to the production one and activate that as well, so it's really easy to roll back and roll forward on the Appwrite dashboard.

A Missing Feature: Preview Environment Variables

One feature that I do think is missing, which I really like from Vercel, is the ability to set environment variables for your preview deployments. On Appwrite, it seems like we only have one set of environment variables for all sites and all previews. It's a super nice-to-have that you get on Vercel because it means you can change your backend, update the environment variables to see it all working side-by-side with production, and then, once you know you're ready to ship your changes, you can promote those environment variables to production when everything is working perfectly. Hopefully, this is a feature they might add one day.

So that's the overall deployment experience of Appwrite Sites. Overall, I'd say it is super nice and it does mirror what I get out of Vercel. But let's take a look at some of the other self-hosted goodies that we get from Appwrite.

Beyond Deployment: Appwrite's Backend Features

The site we deployed earlier on vhat.clicksub.xyz is actually just a chat application where I've already signed up and sent a few messages. What's really cool is this is all powered by Appwrite.

Authentication: If I click into Auth, you can see the user that I've created on my site, which had the username 'YouTube' and used the email [email protected]. Clicking in here, we can see some information. We can verify the account (if we set up an SMTP server to send emails), change the password, set labels, manage preferences, and configure multi-factor authentication. This even works with a load of OAuth providers as well, like Google, GitHub, and so on. You can also set up various things like team security and email templates—just a load of features you get with Appwrite.

Databases: We also have our database set up in Appwrite. We have our production database, and we can click in here to see all of the tables we have, and then even click in there to see the values and modify them too, all in a super nice UI.

Storage: Finally, we even get storage. I can see the chat message attachments that have been uploaded. In here, I have the two images that were sent. Again, we can click in here and change a load of different things about them, like permissions, and even delete the file.

As you can see on the sidebar, the two features I'm not using are Functions and Messaging, but you get all of that with Appwrite as well. It really is an all-in-one solution for your applications. You can now host your site there and also have your backend.

Conclusion

There we go. I would say that's absolutely mirrored the Vercel experience, but it's given me ownership over the platform where it's all hosted, and I also have the comfort of knowing that it's open-source code.