How to test the built version of your react app while developing locally?

Sometimes, you need to test the built version of the app you are developing. For instance, I need to check if my implementation of my custom sourcemap stacktrace demystifyer works as expected. (It takes the obfuscated stacktrace logged from the web-application, and interprets the actual source using a provided sourcemap, perhaps I should blog about that too?)

To know if this works a-okay, I need to test it on a built version of my app. I found out that the Live Server plugin for VSCode has everything you need!

Serve index.html for 404 errors

First thing I needed to do, was to specify "index.html" as my fallback when Live Server doesn't find the resource. This is necessary when doing application routing on the client side. I press ctrl+,, to open my VSCode settings, type "live server", and scroll down to the "Live Server > Settings: File"-setting, and type in index.html.

Mount directory to a route

Then I needed to mount my ./build directory to a route. I scrolled down to the Settings: Mount section, and from there I added the following:

"liveServer.settings.mount": [
    ["/application/location/", "./build"]
  ]

If your application just run on the root of the domain, you should use the "Live Server > Settings: Root" setting instead, and type in "/build"!

If you start Live server and goes to http://127.0.0.1:5500/application/location/, you will see your application running in the browser!

But what about the API?

Setting up proxy to the API

In similarity with the "proxy" setting in CRA, you can set up a proxy to the API in Live Server. Scroll down to Live Server > Settings: Proxy, and turn in on. Set /api/ as the baseUri, and the full URL, including /api/ as the proxyUrl.

In settings.json it should look something like this (given that your API runs on port 9090):

"liveServer.settings.proxy": {
    "enable": true,
    "baseUri": "/api/",
    "proxyUri": "http://127.0.0.1:9090/api/"
  }

The very end

Your might need other values in your settings than me, depending on how API calls are handled in your application. But I hope this short article on how I have set up Live Server in VSCode might help you test how the bundled version of your app actually behaves.