Deploying react apps to custom domain name

Question

I have a react app , and a domain name that I've registered via Namecheap. How might I deploy the app to my domain name?

I know about PaaS such as Heroku. I could probably deploy it to Heroku and then use Heroku's custom domains feature to point it to my url, however the free Heroku instances sleep and I don't want to invest in Heroku's paid servers without confirming all the possibilities out there.

I'd like to avoid my domain name being modified, and strike the right balance between hosting cost, ease of use and speed. Deployment is outside the scope of most things I've learned so far so curious to see the options.

Cheers!

Answer 1

It seems like your React application is a Single Paged Application. In your Heroku server, set your server to server index.html no matter what URL it receives. Then your React Router will know which content to serve according to the URL. Hope it gives you an idea.

Answer 2

Since your project is hosted on GitHub you can use GitHub pages with your domain

Follow these steps taken from - https://dev.to/yuribenjamin/how-to-deploy-react-app-in-github-pages-2a1f

Add properties to package.json file.

The first property we need to add at the top level homepage second we will define this as a string and the value will be "http://{username}.github.io/{repo-name}" {username} is your GitHub username, and {repo-name} is the name of the GitHub repository you created it will look like this :

"homepage": "http://yuribenjamin.github.io/my-app"

Second in the existing scripts property we to need to add predeploy and deploy.

"scripts": { //... "predeploy": "npm run build", "deploy": "gh-pages -d build" }

5- Now deploy it to GitHub Pages. just run the following command : npm run deploy

This will deploy the project to GitHub Pages Now to configure the custom domain follow the documentation here for setting up a custom domain https://docs.github.com/en/github/working-with-github-pages/managing-a-custom-domain-for-your-github-pages-site IMPORTANT If you have A or CNAME records unrelated to the ones you're using in your project in your domain provider's site, it might mess up the deployment, so if you follow the steps and get errors, remove all the A and CNAME records and try again