I have encountered a weird behavior of my React app. For some reason it has two local storages. One at app IP and another - at app domain. I suspect this is happening because I set the domain to be a subdomain pointing to a specific IP via the URL redirect record in DNS configuration with http://[IP]/?1=2. When I try to set a storage item with localStorage.setItem('item', 'value'), app does not pick it up because (I am figuring this is the case) it uses second storage while browser is using first one by default. Another weird aspect of this is that when app does window.history.pushState(null, 'title', '?name=val'), it has no effect whatsoever, while if I do the same from the browser console, it works fine - URL gets updated. Everything works fine on localhost - there is only one storage and window.history does what it is supposed to.
How can I fix this? Probably some configuration of npm start? I tried setting start: "PORT=80 HOST=subdomain.domain.com react-scripts start" in package.json, but app does not start it this case at all.
Any ideas are welcome. Thanks.
Browsers allocate local storage stores on a per-origin basis.
http://[IP] and http://subdomain.domain.com are different origins, so you have two stores.
The browser has no way to know that what it sees as identical websites on different origins are the same site.
Pick one origin to be the one you are actually using.
Configure the other URLs to redirect to the one you have picked.
Don't use the React development server in production. Build the app and then deploy it.