Using Hoppscotch Environment Variables and Pre‑request Scripts to Build Dynamic API Requests

Desired outcome

Create a request in Hoppscotch that automatically resolves a base URL, API version, and endpoint from variables, and injects a dynamically generated token via a pre‑request script.

Prerequisites

• Hoppscotch installed (web or desktop) and a user account with edit rights.
• Basic familiarity with the Hoppscotch UI (request builder, environments panel).
• No external tools required; all actions are performed inside Hoppscotch.

Procedure

1. Set up variable scopes
   1. Open Hoppscotch and create a new workspace (or use an existing one).
   2. Navigate to Environments → Global and add a variable:
   • Name: baseUrl
   • Value: https://api.example.com
   3. Go to Environments → Workspace (select the current workspace) and add:
   • Name: version
   • Value: v1
   4. Select or create an environment (e.g., dev) and add:
   • Name: endpoint
   • Value: /users
2. Build the request URL using variable substitution
   1. Create a new request (GET) and enter the URL:
   {{baseUrl}}/{{version}}{{endpoint}}
   2. Hover over the URL field; Hoppscotch will show the resolved value as a tooltip (expected: https://api.example.com/v1/users).
3. Add a pre‑request script to inject a token
   1. Click the Pre‑request Script tab for the request.
   2. Paste the following JavaScript (uses Hoppscotch’s pm API):

   // Generate a simple static token for demonstration
   pm.environment.set('token', 'abc123');
   

   3. In the Headers section, add:
   • Key: Authorization
   • Value: Bearer {{token}}
   4. Send the request.
   5. After sending, open the Request Details pane (or console) and verify that the Authorization header contains Bearer abc123.
4. Export and import the environment (optional)
   1. With the dev environment selected, click Export to download a JSON file.
   2. Delete the endpoint variable from the UI to simulate loss.
   3. Click Import, choose the exported JSON, and confirm.
   4. Check that endpoint reappears with its original value (/users). Note that after import Hoppscotch treats all variables as environment‑level; you may need to move baseUrl and version back to Global/Workspace scopes if desired.

Expected checks

• URL resolution: confirm the tooltip or request preview shows https://api.example.com/v1/users.
• Header injection: verify the Authorization header equals Bearer abc123 in the sent request details.
• Environment import: after re‑import, the endpoint variable exists with value /users.

Recovery options (rollback)

If the imported environment overwrites needed variables, you can:

• Re‑import a previously saved JSON that contains the correct scope distribution.
• Manually delete or edit the offending variable via the Environments panel.
• Because Hoppscotch does not automatically version environments, keep a backup JSON file outside the app for safety.

Limitations

• Variable substitution occurs after pre‑request scripts; changes made in the test script (after response) do not affect the current request.
• If a variable name exists in multiple scopes, the most specific scope (environment) overrides global and workspace values, which can cause unexpected behavior if a global variable is unintentionally shadowed.
• Exported environment JSON does not retain scope information; upon import all variables are treated as environment‑level unless you move them manually.