Inspecting network requests

Your Storefront's client-side requests can be easily inspected using built-in browser developer tools. However, inspecting:

your Storefront's server-side requests,
your Server Middleware's requests to external services (e.g. e-commerce backends and Content Management Systems)

requires a dedicated tool for capturing HTTP traffic such as HTTP Toolkit.

Setup

Follow the steps below to install and configure HTTP Toolkit on your machine and use it with Alokai Storefront.

Download HTTP Toolkit

Go to the website to download and install HTTP Toolkit on your machine. Choose version suitable for your operating system (Windows, Linux, or macOS).

Using HTTP Toolkit on WSL2

WSL2 on Windows 11 has native support for GUI applications and there are no additional steps required. However, WSL2 on Windows 10 requires XServer to run applications with GUI.

Run HTTP Toolkit

Once downloaded and installed, run the HTTP toolkit binary/exec file.

./httptoolkit

Get setup command

Open the Intercept tab in HTTP Toolkit and select the Existing Terminal tab. It will provide you with a command for setting up HTTP Toolkit interception.

Selecting Existing Terminal interception option

Run setup command

Run the command obtained in the previous step in the terminal from which you will be starting your Alokai Storefront.

eval "$(curl -sS localhost:8001/setup)"

Start the Storefront

Finally, run your Alokai Storefront from the same terminal window. If you are using NextJS Alokai Storefront, run it as usual in dev mode:

yarn store dev --store-id=<store-id> --turbo-option=--env-mode=loose

If you are using Nuxt Alokai Storefront and need to inspect:

requests sent by the Storefront to the Server Middleware,
requests sent by the Server Middleware to external services,

we recommend HTTP Toolkit will only work as expected if you build and start your app in production mode:

yarn store build --store-id=<store-id>
yarn store start --store-id=<store-id> --turbo-option=--env-mode=loose

Alternatively, if you are using Nuxt Alokai Storefront and only need to inspect requests sent by the Server Middleware to external services, you can run your app in dev mode but first unset the NODE_OPTIONS environment variable set by HTTP Toolkit's setup command from step #4:

unset NODE_OPTIONS
yarn store dev --store-id=<store-id> --turbo-option=--env-mode=loose

Now that you have HTTP Toolkit running and configured, you can start inspecting your Storefront's network requests.