Incorporate swagger TypeScript-fetch API into an Aurelia-CLI TypeScript project

For a new web project, I am seeking to develop a Swagger (OpenAPI) API that can be utilized by both the backend server (Go) and the frontend (Aurelia-CLI + TypeScript).

The swagger-codegen tool provides various client generators including:
- typescript-angular
- typescript-angular2
- typescript-node
- typescript-fetch

In this particular case, only typescript-fetch is applicable. To generate the client from a swagger.yml, the following command is used:

swagger-codegen generate -i swagger.yml -l typescript-fetch -o api

This generates a project folder which can be viewed in the Swagger repository.

The question now arises on how to integrate this into an Aurelia project.

After running npm install, a transpiled api.js file (along with api.d.ts) was generated. However, the next steps are unclear.

1) Where should the project folder be placed?
- src/api
-

node-modules/<fake-module-name>

- elsewhere

2) How can Aurelia be informed about the 'module' within the aurelia.json configuration file?
- "<fake-module-name>"
-

"{
        "name": "<fake-module-name>",
        "path": "../node_modules/<fake-module-name>dist",
        "main": "api"
      }

- another method

The main issue being encountered is that despite Aurelia.json recognizing the API within the module, the dependencies within the module are causing the build process (au run --watch) to halt as they are being searched for in the front-end's src directory.

Any assistance in resolving this matter would be greatly appreciated.

P.S. It seems likely that importing the API module's dependencies and their subsequent dependencies into the aurelia.json file may be required...

Answer №1

I have customized a TypeScript generator to produce a specific TypeScript client tailored for the Aurelia Fetch Client:

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

Although my documentation is lacking at the moment, here are the basic instructions:

  1. Begin by cloning Swagger Codegen: git clone https://github.com/swagger-api/swagger-codegen.git
  2. Move to the swagger-codegen directory and compile/install it:
    • mvn clean package
    • mvn install
  3. Return to your git repository and clone the typescript-aurelia-fetch-client-generator: Git clone https://github.com/my-username/typescript-aurelia-fetch-client-generator.git
  4. Navigate to the typescript-aurelia-fetch-client-generator directory and build it:
    • mvn package

Next, create a configuration file for your library:

{
  "packageName": "MyLibraryName",
  "modelPropertyNaming": "original" // if you prefer to maintain original casing in models.
}

To generate your TypeScript client, go back to the Swagger Codegen directory and execute:

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

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

If you found this information helpful, feel free to star the repository. Contributions are also encouraged.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensuring File Size and Format Compliance in Angular's HTML and TypeScript

I'm currently tackling a file upload feature on an ASP.net webpage using Angular. I have a question: How can I verify if the uploaded file is either a PDF or JPG and does not exceed 2MB in size? If these conditions are not met, I would like to displa ...

Angular expands the HTML of the parent component

Although this question may be old, I am still struggling to find a straightforward answer and it just doesn't make sense to me. I have a main component with its own HTML and several components that inherit from it. Here is what I am trying to achiev ...

Encountering an undefined error while attempting to retrieve an object from an array by index in Angular

Once the page is loaded, it retrieves data on countries from my rest api. When a user selects a country, it then loads the corresponding cities for that country. Everything is functioning properly up to this point, however, upon opening the page, the city ...

The document is not being updated by Mongoose's findByIdAndUpdate function

Struggling to use Mongoose findByIdAndUpdate for updating a document by ID, the operation runs smoothly but changes are not reflected in the database. In the server log, I only see users.findOne being logged when I trigger the API. Shouldn't Mongoose ...

Detecting changes in Angular from the parent to the child component can be accomplished by utilizing a specific approach

The Sample Component contains data in the form of an array of objects with child components within a loop. Sample.component export class SampleComponent implements OnInit { data = [{ value: 3 }, { value: 1 }]; constructor() {} ngOnInit(): void {} ...

turning off next.js server side rendering in order to avoid potential window is undefined issues

I am currently managing a private NPM package that is utilized in my Next.js project, both of which are React and Typescript based. Recently, I integrated a graph feature into the NPM package and encountered an issue where any reference to window within t ...

Adding onBlur validation for radio buttons and checkboxes in Angular Material UI

Currently, I am working on implementing checkboxes and radio buttons using Angular Material UI. My main issue lies in achieving the desired red outline effect when a required field is left unselected by the user. Even after applying the necessary 'req ...

The npm command is not accessible within a Docker container

My current process involves: RUN sudo apt-get install -y nodejs After that, I create a symbolic link to make the nodejs executable accessible as "node": RUN sudo ln -s `which nodejs` /usr/bin/node Even though nodejs is installed successfully, I am faci ...

Tips for enabling custom object properties in Chrome DevTools

In my typescript class, I am utilizing a Proxy to intercept and dispatch on get and set operations. The functionality is working smoothly and I have successfully enabled auto-completion in vscode for these properties. However, when I switch to the chrome d ...

GitLab CI: The cached node_modules are not being recognized by npm

Many users online are discussing issues with Gitlab caching, but in my experience, Gitlab CI actually caches correctly. However, npm seems to reinstall everything regardless. cache: key: ${CI_COMMIT_REF_SLUG} paths: - vendor/ - bootstrap/ ...

Importing uuid v4 in TypeScript for React.js can be achieved by including the following

I am trying to implement a uuid as a random unique id generator in my project. However, I'm facing an issue while importing uuid v4. A red underline appears with the message "Could not find a declaration file for module 'uuid'". Even when I ...

Leveraging the power of node pkg to generate standalone executables while configuring npm

I have successfully used pkg to create an executable file for my node js application. Everything is working fine in that aspect. However, I am also utilizing the config module to load yaml configuration files based on the environment. During the packaging ...

Attempting to create a universal logger factory using a functional approach

After reading Martin Fowler's blog on domain oriented observability, I was inspired to implement this concept without relying on classes. However, I encountered some challenges involving generics in TypeScript. Here is the snippet of my code (the erro ...

Retrieve all posts from a specific category on a WordPress website using Node.js

Is there a way to retrieve all articles from the "parents" category on a WordPress website without just getting the html of the page? I need the full text of each article, not just a link with a "read more" button. I have tried using the nodejs plugin "w ...

The HTTP server is operating in the background

After successfully installing npm http-server, I am pleased with how well it shares my directory with other local PCs. However, I am now faced with the challenge of running it in the background. Despite attempts to do so using commands like http-server . ...

Unable to stop at breakpoints using Visual Studio Code while starting with nodemon

VSCode Version: 1.10.2 OS Version: Windows 7 Profesionnal, SP1 Node version: 6.10.0 Hey there. I'm attempting to debug TypeScript or JavaScript code on the server-side using Visual Studio Code with nodemon. I've set up a new configuration in la ...

Gulp does not generate any new folders

Currently, my workspace is located in a directory named "Super gulp" with other directories that contain my files. The issue I'm facing is related to converting my .pug files into HTML files and placing them in the "goal" directory. However, when I tr ...

Struggling to update state in TypeScript using dynamic key names

When creating a React component, I defined the state interface like this. interface IState { email: string, password: string, errors: object } During the text input change event, I attempted to dynamically set state using the following code. ...

I am interested in incorporating a delete button within my Angular application

I am working on an Angular App and I need to implement a remove button for a div element. Currently, I have an add button function in my ts file: uploads = []; addUp() { this.uploads.push(this.uploads.length); } I attempted to create the remove b ...

Installing package.json globally with npm does not create symbolic links to the binaries

My current setup includes: A Vagrant machine with a web project The requirement for a globally accessible bower installation The package.json file as follows: { "name": "gadada", "version": "1.0.0", "main": "index.js", "scripts": { "test": ...