Recently I was helping my brother with a web project. There was a requirement to consume an API which exposes swagger.  We wanted to generate some code from the swagger in typescript which would allow us to generate a client-side SDK for consuming the API.

There are a few packages out there which do similar things. I took a look at a few but they seemed to make something which doesn’t sound so complicated seem to be a lot of work. Also, we all know how web projects these days seem to end up referencing a million packages just to do basic stuff.

Anyway, I quite like Swagger Hub which has a nice UI to generate code but I wanted to take it one step further and to regenerate the client SDK for the app from a script.  The script would do the following steps:

  • We would use the swagger exposed by our API on azure and accessible via Azure Frontdoor
  • We would download the swagger to a file
  • We would then use the swagger in a request to Swagger Hub to ask it to generate us a client SDK
  • We would save the response zip file to a temp folder
  • We would unzip and grab the typescript files from it
  • We would copy the typescript files into a folder in the web project

Once the script is run we could then code our web project using a nice typescript client-side SDK for accessing the API we want to consume.  In our case, we chose to use typescript but I think this would work with any other the other code types your swagger hub instance supports.

Below is the powershell code I used if anyone would find this useful.

Sample Script

$tempPath = 'c:\temp'
$DestinationFolder = $PSScriptRoot + '\Acme.Web\Scripts\Generated'

$fitAppSwaggerUrl = 'https://Acme.API.azurefd.net/api/swagger/v1/swagger.json'

$fitAppSwaggerFileDownloadPath = $tempPath + '\swaggerdownload.json'
$swaggerGenerateUrl = 'https://generator3.swagger.io/api/generate'
$fitAppSwaggerHubRequestPath = $tempPath + '\swaggerhubrequest.json'
$downloadedSwaggerCode = $tempPath + '\swaggerdownload.zip'
$downloadedSwaggerCodeFolder = $tempPath + '\swaggerdownload'


#1 - Download the API Swagger to a local file

Invoke-RestMethod -Uri $fitAppSwaggerUrl -Method Get -ContentType "application/json" -OutFile $fitAppSwaggerFileDownloadPath

#2 - Create a json request to send to Swagger Hub

$swaggerContent = Get-Content -Path $fitAppSwaggerFileDownloadPath | Out-String

$swaggerHubRequest = @{
    spec = $swaggerContent
    lang = “typescript-fetch”
    type = “CLIENT”
} | ConvertTo-Json


#3 -Call Swagger Hub to generate a client in typescript from the swagger file and download the result zip file to a temp directory

Invoke-RestMethod -Uri $swaggerGenerateUrl -Method Post -ContentType "application/json" -Body $swaggerHubRequest -OutFile $downloadedSwaggerCode

#Extract Zip and put file in right place
If((test-path $downloadedSwaggerCodeFolder)){
    Remove-Item -Path $downloadedSwaggerCodeFolder -Force -Recurse
}

#4 - Unzip the zip file so we can get the typescript files we want

Expand-Archive -LiteralPath $downloadedSwaggerCode -DestinationPath $downloadedSwaggerCodeFolder

#5 - Copy Typescript files to destination folder in the solution code

If(!(test-path $DestinationFolder)){
      New-Item -ItemType Directory -Force -Path $DestinationFolder
}

$copyFiles = $downloadedSwaggerCodeFolder + '\*.ts'
Copy-Item -Destination $DestinationFolder -Path $copyFiles -Force

 

Buy Me A Coffee