I am creating a simple light/dark mode toggle in a create-react-app, with the following code in my <App /> component:
const [darkMode, setDarkMode] = useState<boolean>(() => {
const storedDarkMode: string | undefined = Cookies.get('my_dark_mode');
console.log(storedDarkMode);
if (storedDarkMode !== undefined) {
return JSON.parse(storedDarkMode);
} else if (
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches
) {
return true;
} else {
return false;
}
});
const toggleDarkMode = () => {
setDarkMode((prev) => !prev);
};
useEffect(() => {
if (darkMode) {
document.body.classList.add('dark-mode');
} else {
document.body.classList.remove('dark-mode');
}
Cookies.set('ap_dark_mode', JSON.stringify(darkMode), {
domain: 'myname.dev',
});
}, [darkMode]);
I have the following in /etc/hosts:
127.0.0.1 localhost.myname.dev
(and I have executed sudo dscacheutil -flushcache, also restarted the computer, FWIW)
I have the following in my React project's .env.development:
HOST=localhost.myname.dev
PORT=3000
When I start the dev server via npm run start, I see the following:
Compiled successfully!
You can now view portfolio_v4 in the browser.
http://localhost.myname.dev:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
Files successfully emitted, waiting for typecheck results...
Issues checking in progress...
No issues found.
However, when I attempt to visit http://localhost.myname.dev:3000, Chrome converts the request to https. I do not want to configure https right now, I just want Chrome to allow me to make an http request.
I have entered localhost.myname.dev into the Delete option found at chrome://net-internals/#hsts but that didn't work. I've also tried clearing the browser cache.
EDIT:
