task 3.additional: export and host swagger ui and schema

Guria · Oct 17, 2022 · 266161f · 266161f
1 parent 5902b4d
commit 266161f
Show file tree

Hide file tree

Showing 10 changed files with 1,401 additions and 71 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/serverless-compose.yml b/serverless-compose.yml
@@ -11,4 +11,5 @@ services:
   shop-frontend-app:
     path: ./services/shop-frontend-app
     params:
+      apiGatewayRestApiId: ${api-gw.apiGatewayRestApiId}
       productsApiServiceEndpoint: ${products-api.ServiceEndpoint}
diff --git a/services/shop-frontend-app/.gitignore b/services/shop-frontend-app/.gitignore
@@ -1 +1,2 @@
 public/config.js
+public/swagger.json
diff --git a/services/shop-frontend-app/package.json b/services/shop-frontend-app/package.json
@@ -25,7 +25,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-query": "^3.39.2",
-    "react-router-dom": "^6.4.2"
+    "react-router-dom": "^6.4.2",
+    "swagger-ui-react": "^4.14.3"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",

diff --git a/services/shop-frontend-app/serverless.yml b/services/shop-frontend-app/serverless.yml
@@ -22,6 +22,10 @@ custom:
         Web App deployed to Cloudfront and available at following addresses:
         * https://{WebAppDistributionOutput}
         * https://{WebAppCustomDomainOutput}
+        Swagger Schema available at:
+        * https://{WebAppCustomDomainOutput}/swagger.json
+        Swagger UI available at:
+        * https://{WebAppCustomDomainOutput}/swagger
   s3Sync:
     - bucketName: ${self:custom.vars.prefix}
       localDir: dist
@@ -31,9 +35,12 @@ custom:
       autoInvalidate: true
       items:
         - "/index.html"
+        - "/config.js"
+        - "/swagger.json"
   scriptable:
     hooks:
       before:package:createDeploymentArtifacts: |
+        aws apigateway get-export --parameters extensions='apigateway' --rest-api-id ${param:apiGatewayRestApiId} --stage-name ${sls:stage} --export-type swagger public/swagger.json
         echo "_CONFIG_ = {BASE_URL: \"${param:productsApiServiceEndpoint}\"}" > public/config.js
         npm run build
 

diff --git a/services/shop-frontend-app/src/components/App/App.tsx b/services/shop-frontend-app/src/components/App/App.tsx
@@ -8,6 +8,7 @@ import PageCart from "~/components/pages/PageCart/PageCart";
 import PageProducts from "~/components/pages/PageProducts/PageProducts";
 import PageProduct from "~/components/pages/PageProduct/PageProduct";
 import { Typography } from "@mui/material";
+import Swagger from "~/components/Swagger/Swagger";
 
 function App() {
   return (
@@ -25,6 +26,7 @@ function App() {
           <Route index element={<PageProductForm />} />
           <Route path=":id" element={<PageProductForm />} />
         </Route>
+        <Route path="/swagger" element={<Swagger />} />
         <Route
           path="*"
           element={<Typography variant="h1">Not found</Typography>}

diff --git a/services/shop-frontend-app/src/components/Swagger/Swagger.tsx b/services/shop-frontend-app/src/components/Swagger/Swagger.tsx
@@ -0,0 +1,12 @@
+import React, { Suspense } from "react";
+
+const SwaggerUI = React.lazy(() => import("swagger-ui-react"));
+const SwaggerStyles = React.lazy(() => import("./SwaggerStyles"));
+export default function Swagger() {
+  return (
+    <Suspense>
+      <SwaggerUI url="/swagger.json" />;
+      <SwaggerStyles />
+    </Suspense>
+  );
+}
diff --git a/services/shop-frontend-app/src/components/Swagger/SwaggerStyles.tsx b/services/shop-frontend-app/src/components/Swagger/SwaggerStyles.tsx
@@ -0,0 +1,5 @@
+import "swagger-ui-react/swagger-ui.css";
+
+export default function Swagger() {
+  return null;
+}
diff --git a/services/shop-frontend-app/src/vite-env.d.ts b/services/shop-frontend-app/src/vite-env.d.ts
@@ -1,2 +1,9 @@
 /// <reference types="vitest" />
 /// <reference types="vite/client" />
+
+declare module "swagger-ui-react" {
+  export default function SwaggerUI(props: any): JSX.Element;
+}
+declare module "swagger-ui-react/swagger-ui.css" {
+  export default string;
+}
diff --git a/services/shop-frontend-app/vite.config.ts b/services/shop-frontend-app/vite.config.ts
@@ -11,11 +11,13 @@ export default defineConfig({
   plugins: [tsconfigPaths(), react(), topLevelAwait()],
   build: {
     minify: "terser",
+    chunkSizeWarningLimit: 900,
     rollupOptions: {
       output: {
         manualChunks: {
           react: ["react", "react-dom", "react-query", "react-router-dom"],
           libs: ["formik", "yup", "axios"],
+          swagger: ["swagger-ui-react"],
         },
       },
     },