What options do you have for deploying a frontend-only React app to production?
If you’ve ever wondered how to deploy your React app once it’s ready, you probably know that figuring this out can become confusing really fast.
Most articles go over detailed instructions on how to configure nginx, how to configure reverse proxies.
But do you really need any of these if you just have a frontend-only React app and are looking for the easiest way to deploy?
If you think about it, once you build a React app for production, you're basically left with a bunch of html, js and maybe image files. This means you can deploy it to any hosting that supports static file hosting.
Let's go over some of the options!
Firebase
Firebase is a Google service that also offers static site hosting.
It comes with a free tier you can start with, deployments are done with their CLI and they support SSL, CDN & custom domains out of the box.
Netlify
Gained a lot of traction recently. It’s a point and click interface that is very powerful, allowing you to configure automatic deployments based on a specific branch, to have ‘test’ deploys for feature branches and even do A/B testing of your website all from their UI.
Surge.sh
Surge is also a static site hosting service specifically targeteted at frontend developers.
Supports custom domains, even with the free plan.
Zeit Now
Deploy your website made as easy as running now in a folder.
Supports a lot of options through their CLI. Also a great choice for deploying node apps or server-side rendered React apps.
Github Pages
This is a classic and probably the first choice if you just want a hosting for your library’s main page. Can be used for other stuff as well though since it has great integration with git and more.
Since it’s not explictly targeting SPAs, you might run into issues when setting up the routes.
AWS S3 buckets
This is the most complex of the options described so far, however comes with greater flexibility and might come in handy if you already use AWS for other things. Use it together with AWS CloudFront and AWS Route 53 for a full Amazon solution (described here).
Heroku, Digital Ocean, Azure or Amazon EC2
You can always deploy your app to a custom server instance. This requires tweaking with the server, but gives you more control. You will need to install and configure a web server on the machine - either nginx, apache, IIS or whatever you’re more comfortable with - and point it to serve your static files.
Though it’s tempting to use a custom setup if you already have a machine available that you’ve used for other projects, I highly recommend you try one of the options above to take your workflow to the next level :)
Comments ()