Swagger/OpenAPI: How to integrate generation of typescript/angular client in build process?

Question

Java/Spring Server-Stubs Generation with swagger-codegen-maven-plugin

In my Spring Boot Java project I am using swagger-codegen-maven-plugin to generate the Spring MVC controller interfaces (server stubs) from my Swagger 2.0 api.yml. The integration in the maven build process is quite simple. It works simliar as I used to do it with the jaxws-maven-plugin for WSDLs. This is the example configuration from the pom.xml with swagger-codegen. It generates the server side model and mvc interfaces:

<plugin>
    <groupId>io.swagger</groupId>
    <artifactId>swagger-codegen-maven-plugin</artifactId>
    <version>2.2.3</version>
    <executions>
        <execution>
            <goals>
                <goal>generate</goal>
            </goals>
            <configuration>
                <inputSpec>/api/api-v2.yml</inputSpec>
                <language>spring</language>
                <apiPackage>io.fischermatte.test.api</apiPackage>
                <modelPackage>io.fischermatte.test.api.model</modelPackage>
                <output>${project.build.directory}/generated</output>
                <configOptions>
                    <interfaceOnly>true</interfaceOnly>
                    <sourceFolder>/src/main/java</sourceFolder>
                    <library>spring-mvc</library>
                    <dateLibrary>java8</dateLibrary>
                </configOptions>
            </configuration>
        </execution>
    </executions>
</plugin>

But how to integrate the same thing in a npm build process of a client angular app ?

Now I am trying to integrate the generation of the client code in the npm build process of my angular app. I have an api.yml defining my rest endpoints based on Swagger 2.0. I want the npm build to generate the api module similar to this typescript-angular-v4.3 sample. As much as I have seen, there is no official package for npm that does this like swagger-codegen-maven-plugin is doing it when you are using maven.

Did I misunderstand something here? The sample mentioned above is already the outcome, but what is the recommended approach to get there? Is such an integration in a npm based project not the way to go? Should one do it manually and check the generated typescript files into the sources directory?

Answer 1

Briefly:
Use maven "swagger-codegen-maven-plugin" to generate server/client code out of Swagger yaml/json, use "exec-maven-plugin" to install node dependencies (npm install) and client compilation (ng build).

Details:
Recently had similar question, not found anything in Internet, implemented it in the following way (please do not judge strictly if it's not ideal).

Build pipeline:

1. "swagger-codegen-maven-plugin" generates model and API code for Spring MVC server
2. Maven builds and installs generated server code and installs to local repository as artifact
3. Spring Boot application includes dependency of generated server artifact, and has additional configuration, properties and real implementation of controllers
4. "swagger-codegen-maven-plugin" generates model and API code for Angular Client. The output directory is under "mem-client" angular project.
5. "exec-maven-plugin" installs client dependencies (npm install) "exec-maven-plugin" builds application (ng build --env=prod …) the output of build stored in Spring Boot application resources
6. Once Angular client compiled and added to static server resources, we could create standalone JAR with spring server and client ("spring-boot-maven-plugin" can do it)

NOTE: Please note that generated server and client codes are read-only and included only as dependencies/imports. Real implementation of controllers in separate project. To start server/client coding, execute "mvn generate-sources". To create server+client as standalone web application, just execute "mvn install" in parent "mem" project. This will create jar with all necessary stuff included in it.

Example:
Here is a working example (created simple "Memory Quiz" game. NOTE: not merged to master branch yet, see in "quiz" branch on GitHub): https://github.com/makimenko/mem/tree/quiz

Projects overview:

1. Parent maven pom "mem" project which includes all child modules
2. Maven "mem-design" project includes only Swagger 2.0 yaml file in resources.
3. Maven "mem-server" project includes Spring Boot configuration, properties and real controllers
4. Angular 5 client project "mem-client"
5. Auto generated code (not touched, just used in read-only mode as import. Ignored in source control)

Hope this info could help you.