Dynamic/Variable servers URLs in the swagger document

Open Source Swagger OS
, , , ,
1

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.

2

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/

4

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.
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 swagger-config.js before the build:
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:

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,