Can I host my react app for free making use of react-router-dom with Netlify?

Question

My project:

• React (I use create-react-app library)
  • Use react-router-dom using BrowserRouter , Route & Switch imports. This allows me to go to different urls: for example, when I run my app on localhost, localhost3000 is home. Part of my app's functionality is to randomly generate urls - for instance: localhost3000/123456 or localhost3000/654321 .
• Make changes to a database in Firebase's Realtime Database & uses Firebase's Auth.

What I need:

• Free: since this app is a portfolio piece, I'm thinking all I need is any domain name that allows me to make use of react-router-dom . For instance, www.anyname.com is home & www.anyname/123456.com is one of my routes.

• Not-free: If there's no ability to achieve what I want for free, then I'm happy to buy a domain-name and would appreciate suggestions of how I can go about this.

What I've researched:

• Netlify was suggested to me. I know it gives the ability to alter part of the domain name but I don't know if it'll display my 'routes' eg ( nameofmychoosing.netlify.app is home & nameofmychoosing/123456.netlify.app is one of my routes - would this work?).

---

PS if this is not the right place to post this question, directing me to the right kind of forum'd be much appreciated.

---

EDIT: just discovered this and this which say I need to make a slight modification to get netlify to work with react-router-dom .

Answer 1

You can freely change the url of any webpage you are running code on. The only consequence is the behavior of relative URLs and what happens when the page is reloaded. In most self hosting environments you should feel free to change anything that comes after the domain. Ex https://www.example.com/yourrouteshere or also used https://www.example.com/page#Yourrouteshere . Something to keep in mind is if the user refreshes the page your backend still needs to serve an appropriate response. This may mean the backend always returns the same thing regardless of the URL path or it may mean serving something different depending on your use case.

You should not modify the domain itself unless you have a weird setup that relies on having multiple hostnames for some weird use case.

Once you have an application running you may then consider setting up a DNS record with a CNAME attribute to forward to the existing host.

Answer 2

I am able to, with Netlify, host my react app for free and make use of react-router-dom by i) creating a file called _redirects in the folder where .html lives and ii) inserting in _redirects : /* /index.html 200 .

There is already a similar SO question & answer here that I'd like to link my question to. I don't know how to do that so if anyone could show me that'd be appreciated.