CODEWITHSUNDEEP
typescriptnpmswaggeraurelia
Nikola
Nikola

Reputation: 11

Integrate swagger typescript-fetch api into aurelia-cli tyepscript project

For a web project I want to create a swagger (open api) api to use for both, the backend server (go) and the frontend (aurela-cli + typescript).

The swagger-codegen tool supports the following client generators
- typescript-angular
- typescript-angular2
- typescript-node
- typescript-fetch

Now, the first three obviously do not apply to this problem so I am left with typescript-fetch. To generate the client from a swagger.yml I use the following:
swagger-codegen generate -i swagger.yml -l typescript-fetch -o api

This results in a project folder as seen in the swagger repository.

The questions is how to include this in an aurelia project.

I already ran npm install which resulted in a transpiled api.js (and corresponding api.d.ts). I am however, unsure how to proceed next.

1) Where should I put this folder?
- src/api
- node-modules/<fake-module-name>
- somewhere else

2) How do I inform aurelia about the 'module' in the aurelia.json file?
- "<fake-module-name>"
- "{ "name": "<fake-module-name>", "path": "../node_modules/<fake-module-name>dist", "main": "api" }
- something else

The main problem I am hitting is that, even though aurelia.json knows about the api in the module, the dependencies within this module bring the build process (au run --watch) to a halt, as they are somehow looked for in the front-end's src directory.

Any help on how to resolve this would be highly appreciated.

P.S. I have a slight feeling that I would have to 'simply' import the api module's dependencies and their dependencies and so on into the aurelia.json...

Upvotes: 1

Views: 1091

Answers (1)

Jereme
Jereme

Reputation: 1485

I modified one of the other TypeScript generators to generate a TypeScript client for the Aurelia Fetch Client:

https://github.com/jeremeevans/typescript-aurelia-fetch-client-generator

My documentation there is pretty awful right now, but the basic steps are:

  1. Clone Swagger Codegen: git clone https://github.com/swagger-api/swagger-codegen.git
  2. Navigate to the swagger-codegen directory and build/install it:
    • mvn clean package
    • mvn install
  3. Go back to your git directory and clone the typescript-aurelia-fetch-client-generator: Git clone https://github.com/jeremeevans/typescript-aurelia-fetch-client-generator.git
  4. Navigate to the typescript-aurelia-fetch-client-generator directory and build it:
    • mvn package

Then create a config file for your library:

{
  "packageName": "MyLibraryName",
  "modelPropertyNaming": "original" // if you want to keep your casing on the models.
}

Then to build your TypeScript client, navigate to the Swagger Codegen directory and run:

java -cp '../typescript-aurelia-fetch-client-generator/target/typescript-aurelia-fetch-client-swagger-codegen-1.0.0.jar;./modules/swagger-codegen-cli/target/swagger-codegen-cli.jar' io.swagger.codegen.Codegen -i http://localhost:8080/swagger/docs/v4 -l typescript-aurelia-fetch-client -o c:\temp\OutputFolder -c C:\temp\yourconfig.json

Obviously, replace http://localhost:8080/swagger/docs/v4 with the path to your Swagger definition.

If this helped you, please star the repository. Also, contributions are welcome.

Upvotes: 1

Related Questions