In this tutorial, you will learn about a very quick and easy approach that will allow you to host your React.js application so people can view your website using your own custom domain. Most tutorials that discuss hosting a React.js tend to dive into the deep end. Most tutorials I've come across will assume you want to either want to install and configure web pack and host the application yourself using node.js or, set-up a CiCd pipeline using Heroku, Travis CI or similar tools.
The approach I'm outlining within this tutorial is aimed at people new to React who want a simple way to host their applications. When it comes to running and hosting a production website for a client then I strongly recommend you spend the time setting up web-pack and creating a proper deployment pipeline. If you have your own web-hosting and you want to simply get your react app running with minimal set-up then this article for you.
Configuring Your Application
As there are countless ways to build your application, in this tutorial I am going to assume that you have built your application using create-react-app. For reference, the code and the website that I used for this tutorial can be found here.
When working the first thing you need to do is compile your application. If you look within your package.json file, you should see this section:
Using NPM to build an app is very similar, within a terminal you would swap yarn for npm, like so:
When your program has built, you should see a folder within your application called 'build', which will have files that look similar to this:
After you have some successfully compiled code, you have everything you need to host your react app. Simple so far right?
Hosting The App
To host your application you will need to purchase a web domain and buy some hosting. There are hundreds of providers out there who will supply this service for you. I've used https://www.100webspace.com/ for years as they are cheap and their response to support queries is EPIC. Sometimes I've had a response to a question in less than 2 minutes. Hosting usually costs me about $20 a year to register and host a domain, which is very cheap.
In your hosting companies portal, you will normally see a section/tab called 'files' or something similar. Here find you will usually see a file manager. In the file manager, you'll see a list of all the domains and their corresponding directories. To get your react application working, all you need to do is navigate to the build file in your app's root directory on your local machine and copy all the contents inside the build file into the folder within your hosting domain. In my case my files look like this:
After copying your files you should be able to now view your website via a web browser. In my case you can see my website here If you see an error, you may need to create a .htaccess file. The
.htaccess will configure the webserver - Apache - to allow requests to load your react application.
When you view your website in a browser it should now load. As you hopefully can now see, getting a simple react.js application hosted on the internet can be very straightforward. This approach is great for people starting out or for sites that will only be updated once in a while.
If you care about performance, running unit tests, working on multiple different environments then I suggest you start looking into web-pack and how to create a Ci/Cd pipeline.