# Dynamic/Variable servers URLs in the swagger document

**URL:** <https://community.smartbear.com/t/dynamic-variable-servers-urls-in-the-swagger-document/259>\
**Category:** Swagger OS\
**Tags:** api, migrated, swagger-oss, swagger-ui, swagger-editor\
**Created:** [May 3, 2023, 9:52pm UTC](https://community.smartbear.com/t/dynamic-variable-servers-urls-in-the-swagger-document/259 "2023-05-03T21:52:01Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![system](https://avatars.discourse-cdn.com/v4/letter/s/bcef8e/32.png) [@system](https://community.smartbear.com/u/system)\
**Post date:** [May 3, 2023, 9:52pm UTC](https://community.smartbear.com/t/dynamic-variable-servers-urls-in-the-swagger-document/259/1 "2023-05-03T21:52:01Z")

</div>

> Originally posted by **btalebpour** on May 03, 2023

I was trying to find out how I could specify my server URLs inside my swagger.json file so that when we deploy the documentation to the different servers (i.e., production, staging, dev, etc), each link points to the right server without user involvement. Currently, I have the following setup which works fine:

“servers”: [

{

“url”: “https://…/api/…/v1”,

“description”: “Staging server”

},

{

“url”: “https://…/api/…/v1”,

“description”: “Production server”

}

]

I am looking to do something like this:

“servers”: [

{

“url”: process.env.serverUrl,

“description”: process.env.serverName

}

]

I am using swagger-ui-express in a Vue CLI project.

---

<div class="post-metadata">

**Author:** ![system](https://avatars.discourse-cdn.com/v4/letter/s/bcef8e/32.png) [@system](https://community.smartbear.com/u/system)\
**Post date:** [May 17, 2023, 4:47pm UTC](https://community.smartbear.com/t/dynamic-variable-servers-urls-in-the-swagger-document/259/2 "2023-05-17T16:47:24Z")

</div>

> Originally posted by **frankkilcommins** on May 17, 2023

If the servers are not known up front or predictable during the design phase then one approach I’ve seen is to dynamically update the OpenAPI definition as part of your CI/CD pipelines using a replace mechanism combined with Server Templating as described at [https://swagger.io/docs/specification/api-host-and-base-path/](https://swagger.io/docs/specification/api-host-and-base-path/)

---

<div class="post-metadata">

**Author:** ![system](https://avatars.discourse-cdn.com/v4/letter/s/bcef8e/32.png) [@system](https://community.smartbear.com/u/system)\
**Post date:** [July 28, 2023, 10:09pm UTC](https://community.smartbear.com/t/dynamic-variable-servers-urls-in-the-swagger-document/259/4 "2023-07-28T22:09:01Z")

</div>

> Originally posted by **nehakakar** on July 28, 2023

You can use a combination of environment variables and server-side code to generate the **swagger.json** file dynamically during deployment.

This way, the server URLs will be automatically set based on the environment where the application is deployed

Here are the steps…

Set up environment variables for each of your server URLs.

During the build or deployment process, use server-side code or a build script to generate the **swagger.json** file dynamically.

In your case, since you’re using Vue CLI, you can use a build script to perform this task.

Within the build script, read the environment variables you defined in Step 1 and inject them into the **swagger.json** file.

Replace the placeholders for server URL and server name with the actual values from the environment variables.

Once the **swagger.json** file is generated with the correct server URLs, serve it to your Swagger UI or Swagger Express middleware.

Here’s an example of how i did with **Node.js** and **Vue CLI**

1. Create a **swagger-config.js** file in the root of your project.

```auto
javascript
const fs = require('fs');
const { serverUrl, serverName } = process.env;

const swaggerJson = {
  openapi: '3.0.0',
  // ... other parts of your swagger.json ...
  servers: [
    {
      url: serverUrl,
      description: serverName,
    },
  ],
  // ... other parts of your swagger.json ...
};

fs.writeFileSync('dist/swagger.json', JSON.stringify(swaggerJson));

```

1. In your **package.json** , update the **build** script to execute the s **wagger-config.js** before the build:

```auto
json
{
  "scripts": {
    "build": "node swagger-config.js && vue-cli-service build"
  }
}

```

Before deploying your application, set the environment variables for each environment ex… production, staging, dev..

Now Run the build command to generate the dynamic **swagger.json** :

```auto
bash
npm run build

```

Deploy the contents of the `dist` folder, which should now include the dynamic **swagger.json** with the correct server URLs.

Hopefully, your Swagger document will automatically have the correct server URLs based on the environment where it is deployed,