Options for Deploying Full Stack React App

With so many options and services in the deployment landscape, it can be quite difficult to narrow them down and make a good choice on what platform, price point, and availability are right for your application.

One of the greatest things about programming is that there are a huge number of ways to do things. There often is no right or wrong way. I would argue that there is a better and worse way to do things, but that is beside the point. The ability of us, as developers, to create something out of code that can add value to people’s life is second to none!

So. Many. Options

With all the building and deployment options afforded to developers, choosing the right one can become incredibly overwhelming. Ben Schwartz, a well-known psychologist, calls this "choice paralysis". He argues that more choices make us less likely to take action and to be less satisfied with our eventual decision.

With so many options and services in the deployment landscape, it can be quite difficult to narrow them down and make a good choice on what platform, price point, and availability are right for your application. To make matters worse, you might get so caught up in researching the options that you lose all momentum on your project.

That might be where you’re at now, or you might just be starting out and need some direction. Either way, let’s keep you moving forward and get your deployment started. Just one thing before we start...you have to promise me that once you read this article, you’ll choose a platform and deploy. Deal? Deal!

Keep Moving Forward

Below I’ll share some helpful guidance on how to deploy your React app and a comparison between a few of the most popular platforms and their pros and cons. This isn’t an exhaustive list nor an in-depth how-to guide. But I hope it helps you along your development journey.

With the advent of FaaS or “serverless”, the use of application servers has fallen pretty dramatically. If you aren’t sure what the difference is, let me fill you in. An application server is a server that runs to serve your frontend application (React in our case) and act as middleware. Middleware can be used for a whole host of things, but I tend to use it as a light-weight backend for code that is specifically used in the frontend it’s serving.

Because of the different needs of serverless and application servers, I’m going to make a list for each type.

1. Render My first choice is Render, which is the new kid on the block. They’re a fledgling startup that won the 2019 Startup Battlefield at Disrupt. They provide a host of tools including databases, disks, and web hosting with very little or no vendor lock-in. They are also very straight forward about the resources you are paying for and are incredibly easy to use. Render will only deploy with GitHub or GitLab, but it automatically connects to the repo and will auto-deploy on push! For use with an application server, their pricing starts at $7 as of the writing of this article.

2. Heroku My second choice is Heroku. My least favorite thing about Heroku is that it’s super shady about their servers, or as they call them, Dynos. Nobody really knows what a dyno is, but they’re known for not scaling poorly. Bigger apps can slow down on Heroku, even though you’re paying a premium. Similar to Render, you can use Heroku with no vendor lock-in and auto-deploy from your Github, but not GitLab. Heroku does have a free version, which is great for prototyping or side projects, but their paid tier starts at $7 at the time writing.

3. Back4App I have Back4App on this list because it’s widely used and I’ve heard lots of good things about it. To get a picture of how it works I created an account and went to deploy one of my projects. Long story short, I stopped before I got it deployed. Back4 is an astonishingly deep tool that is more than capable to handle an entire enterprise stack. But if you’re looking for an easy and simple process to get your app deployed - this isn’t it. Use Render instead :)

Deploy a serverless app

1. Netlify My go-to option for serverless or static site deployments is Netlify. Their free tier is awesome! The platform has an astonishingly large amount of features and they've all been easy to use - something I cannot say about all platforms in this list(Back4App). For example, you can integrate a form in your project with Netlify’s form handler giving you the ability to send notifications when a form is submitted and storing them in Netlify for future viewing. All for free! You can also connect Github, GitLab, and BitBucket with subsequent auto-deploys. Easy and free with tons of options - my top choice!

2. Render The second place goes to Render. It’s easy to use and you can connect Github or GitLab for auto-deploys. They’re the 2019 Startup Battlefield at Disrupt and are taking on giants like AWS and GCP to simplify the developer experience in regards to deployment and hosting. Since Render also can host things like servers and databases, it would make for a great place to host if you’re expanding with an Expressjs API or database. Most things in Render are paid, so if you’d like to spend $0 on your entire full-stack, Firebase might be your jam.

3. Firebase Firebase is pretty incredible. It’s only last because, as far as hosting goes, you might have to pay for it if your app is used enough. Hosting your frontend on either Render or Netlify can be 100% free, whereas Firebase might charge you. Firebase will charge if the data transferred or hosted is larger than a specific limit. Meaning that you could get charged or your app shut down if you hit that limit. I actually love Firebase! I use Firestore and Cloud Functions in a lot of my projects, but I’ve never hosted using Firebase because I think there are better options out there. I have a production app that is hosted in Render but uses Firebase for the database and backend. It’s my favorite combination!

Full Stack Considerations

Since your Fullstack application isn’t just the frontend there are few things to consider when deploying. Whether you’re using an application server or going serverless, the needs on your application are the same. You’ll need some kind of API to connect to a backend and database to store your data.

I typically advocate for devs to try managed backends first. Databases like Firebase’s firestore, or AWS Amplify (DynamoDB) can help you move quickly and have to manage less infrastructure. With that in mind below is my top choice for an inexpensive and fast deployment stack.

Here is my top pick for hosting & deployments for your full-stack application.

Render Hosting & Firebase Backend What's it for: Serverless hosting & managed backend

It’s no secret that I love Render’s hosting and platform. It takes all the great features from bigger competitors like AWS or Google Cloud and simplifies them down so you don’t need an MBA and 7 days to figure them out. Using Firebase’s Firestore and Cloud Functions as the backend provides you a huge amount of flexibility and takes the complexity of managing a database and API off of you.

Using Firebase does lock you in, but if you have a well-designed app, changing over to MongoDB with a streaming library like RXJS, won’t be too terribly painful.

Why I love it

• 100% frontend hosting
• Huge free tier for database and API (Firestore & Cloud Functions)
• Backend is managed for you
• Get started very quickly

Wrap up

There are all kinds of amazing options there for deploying your full-stack application. When I look for a platform to host and deploy, I focus on ease and simplicity. That’s why I haven’t included some tools like Amplify or GCP in my comparison. They are incredible tools, but they have a steep learning curve and require you to take substantial amounts of time learning them.

I want my deployments and hosting to be quick and easy. After all the work you’ve put into building and testing your app, the last thing you should be doing is learning how to create and manage a VM before you deploy. There is a time and place for VMs and enterprise tooling, but often we just need a simple way to get our ideas and code to the public.

I hope you found this helpful! Now...go forth and deploy!