Azure Static Web App: CodeSpaces won’t load local development

TL;DR You need to use an external DNS if you want localhost redirection to work for GitHub CodeSpaces.

If your using, and enjoying, Azure Static Web Apps and have got React working with them, see my previous story Azure Static Web App: “Error: error:0308010C:digital envelope routines::unsupported” — Sebastian Rogers — Medium, you may want to lighten the load on your laptop and use GitHub CodeSpaces to develop them in. The ability to spin up and then throw away whole development environments almost completely isolated from the machine you use is fantastic. For example you may work for an organisation with strict policies about what can be installed on your machine but CodeSpaces run in the browser so you can use them on such a restricted device. I’ve even done changes via CodeSpaces to code using my mobile phone.

However when you come to local development then you start interacting with the machine the browser is running on as all Http requests need to be redirected. For most people this won’t cause an issue as you’ll be using a DNS server not hosted on the machine hosting the CodeSpace and everything will just work. If your DNS settings are set to use the local machine though all requests fail to redirect and instead timeout.

The solution is simple just configure your host machine to use an external DNS, you can get a list of reputable DNS servers from here DNS servers in United Kingdom.

Then set the DNS settings for your local network connection, here’s a good explanation of how to do it Change IP Address and DNS Servers using the Command Prompt (helpdeskgeek.com)

TL;CR You need to use an external DNS if you want localhost redirection to work for GitHub CodeSpaces.