If you're building an app on your own or on a budget, you may want to consider using a backend-as-a-service (BaaS). Doing so allows you to focus on the frontend of your application, but still have a full-stack app with a database, authentication, and more.
In this guide, we will cover three of the best options for you as a React developer to quickly launch your app using a backend-as-a-service, all while saving time, effort, and costs.
For many years, Firebase has dominated the backend-as-a-service space. In the past couple of years, however, Supabase has emerged as a great alternative.
The main benefit of Supabase is that it is open-source. In short, Supabase allows you to take your code and deploy it wherever you like. You can build your app, deploy it to Supabase's servers, or you can deploy it to your own hosting service later on.
The great benefit of this is that it helps you avoid vendor lock-in. The problem of vendor lock-in emerges if you run into a situation where want to migrate away from the service you are using. For example, if the service's pricing becomes too high or you have fundamental problems with using the service. The problem is that you are "locked-in" and it may be very hard to go elsewhere.
As you'll see with the other two options in this list (Firebase and AWS Amplify), they have some degree of vendor lock-in. In short, it's not easy to migrate away from them.
Supabase, on the other hand, gives you the flexibility to host your project where you like without a difficult migration process.
To start using Supabase with your React app, you will install the
supabase-js npm package.
To actually start your Supabase project itself and create your database, you will sign in to Supabase.com. The free tier will give you all of the major features that you need, including a free database, as well as built-in authentication.
Supabase authentication includes tons of major social providers like Google and Facebook.
They also offer built-in storage which allows you to store any type of file. This feature would be essential if your application features video or image uploads.
Supabase also supports realtime data via WebSockets, a feature with both Firebase and AWS Amplify offer, as well.
Supabase offers edge functions, which enable you to write custom code that interacts with with your database. These edge functions may be useful if you want to write some custom logic that the Supabase npm packages don't support or if you want to do something on the server, such as sending an email.
One area where Supabase has an advantage over Firebase is their full text search feature.
If you want to provide search functionality to your app based off of what's stored in your database, this is something that Firebase's Cloud Firestore database simply does not provide.
Supabase's free plan can take you a long way, but if you would like database backups, plus the ability to store additional data, database or storage beyond the free limits you'll need to upgrade to their Pro Plan (which is $25 per month per project). Unlike Firebase and AWS, there is a big jump in pricing if you want something more than the free limit provides.
With that being said, the Supabase pro tier is very generous. When you're ready to push your app to the world, it will supply virtually everything that you need from a backend for just $25 a month.
Firebase cannot be beat in terms of its longevity and what it offers.
Firebase has been around for 10 years at this point and offers the most products out of any backend solution.
It's a very sophisticated all-in-one service, with its own NoSQL database storage, authentication with every kind of social provider imaginable, along with some features that Supabase does not have, such as Crash Analytics, performance insights, A/B testing, push notifications and much more.
If you really want the most complete option, you should seriously consider Firebase.
Firebase is similarly easy to get set up with. You can create an account a many free projects at Firebase's website.
To create a database or dedicated storage requires only the click of a button. Firebase is similarly unmatched at providing a very convenient dashboard to interface with all of your individual products, such as your database.
All these benefits of Firebase can be a potential downside. Firebase truly offers so much that it can be a little bit overwhelming to figure out what you should use and what you shouldn't to get up and running.
My recommendation for your React app is to first use the Cloud FireStore database, authentication and storage, and add on the Firebase functions service if you need to provide custom logic on your server. Only then do you need to look at their other options.
Unlike Supabase, but similar to AWS Amplify, Firebase includes built-in hosting. There is no need to look elsewhere for a hosting service or any other custom solution.
The real downside of Firebase, as I mentioned earlier, is their vendor lock-in. Once you build your app with Firebase, it may be quite difficult to migrate to another platform. With that being said, many many companies have built their entire livelihood on Firebase.
The cost of using Firebase is a bit more challenging to calculate. Fortunately, Firebase provides a convenient calculator that will give you a much better idea, based off of your app's resource usage.
Their plan is generous for the free user and you can start using virtually every service for free. You will only have to start paying once you exceed those limits.
Firebase is the closest to an all-in-one service to serve as the backend of your app. If you are intent on building your app quickly, with as little time spent on choosing and managing services as possible, you can't go wrong with Firebase.
The last contender is AWS amplify, which is often overlooked, but shouldn't be.
For example, instead of having to create your own authentication component, Amplify UI provides its own for you out of the box.
In short, AWS Amplify gives you virtually all of the tools of Firebase, along with premium, pre-made components that are already integrated with your AWS backend.
One additional benefit of using AWS Amplify over Firebase and Supabase is that it's most likely going to be the least expensive overall.
AWS pricing is one of the lowest when it comes to infrastructure businesses. In many cases, AWS will give you startup credits if you're using AWS for the first time. If so, the cost of your app may be next to nothing.
The large caveat to using AWS Amplify is that it relies on GraphQL. If you're not familiar with GraphQL this may be a sticking point for you. It does have a REST API alternative. The REST option, however, is not nearly as featureful and doesn't provide the same bonuses, such as realtime data with subscriptions.
AWS Amplify has an enormous offering of integrated services and allows you to tap into so many AWS products, such as DynamoDB, S3 and ElasticSearch. It has been built to support every imaginable developer need you might have. It goes so far as to enable you to do things like like audio-to-text transcription and extended reality (XR) integrations.
Amplify is definitely worth checking out if you're looking to find the most cost effective service that does not sacrifice any features that Firebase has. Amplify is also a good choice if you're comfortable with GraphQL and know the AWS ecosystem well.
Thanks for reading!
Hopefully you're now well-equipped to choose the best backend as a service tool for your React project.
Enjoyed this tutorial? Here's a special bonus.
Reading tutorials are a great way to learn React, but there is no replacement for hands-on coding.
Introducing: the Learn React app
The Learn React app is an interactive learning experience designed to make you a confident React developer through 100s of fun challenges.
Ready to level up your React skills? Click the link below to get started!