✨ Add client in frontend and client generation

src/backend/app/app/main.py

@@ -1,11 +1,19 @@
 from fastapi import FastAPI
+from fastapi.routing import APIRoute
 from starlette.middleware.cors import CORSMiddleware
 
 from app.api.api_v1.api import api_router
 from app.core.config import settings
 
+
+def custom_generate_unique_id(route: APIRoute):
+ return f"{route.tags[0]}-{route.name}"
+
+
 app = FastAPI(
- title=settings.PROJECT_NAME, openapi_url=f"{settings.API_V1_STR}/openapi.json"
+ title=settings.PROJECT_NAME,
+ openapi_url=f"{settings.API_V1_STR}/openapi.json",
+ generate_unique_id_function=custom_generate_unique_id,
 )
 
 # Set all CORS enabled origins

src/new-frontend/README.md

@@ -1,30 +1,17 @@
-# React + TypeScript + Vite
+# Full Stack FastAPI and PostgreSQL - Frontend
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## Generate Client
 
-Currently, two official plugins are available:
+- Start the Docker Compose stack.
+- Download the OpenAPI JSON file from `http://localhost/api/v1/openapi.json` and copy it to a new file `openapi.json` next to the `package.json` file.
+- To simplify the names in the generated frontend client code, modifying the `openapi.json` file, run:
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+```bash
+node modify-openapi-operationids.js
+```
 
-- Configure the top-level `parserOptions` property like this:
+- To generate or update the frontend client, run:
 
-```js
-export default {
- // other rules...
- parserOptions: {
- ecmaVersion: 'latest',
- sourceType: 'module',
- project: ['./tsconfig.json', './tsconfig.node.json'],
- tsconfigRootDir: __dirname,
- },
-}
+```bash
+npm run generate-client
 ```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

src/new-frontend/modify-openapi-operationids.js

@@ -0,0 +1,29 @@
+import * as fs from "fs";
+
+const filePath = "./openapi.json";
+
+fs.readFile(filePath, (err, data) => {
+ const openapiContent = JSON.parse(data);
+ if (err) throw err;
+
+ const paths = openapiContent.paths;
+
+ Object.keys(paths).forEach((pathKey) => {
+ const pathData = paths[pathKey];
+ Object.keys(pathData).forEach((method) => {
+ const operation = pathData[method];
+ if (operation.tags && operation.tags.length > 0) {
+ const tag = operation.tags[0];
+ const operationId = operation.operationId;
+ const toRemove = `${tag}-`;
+ if (operationId.startsWith(toRemove)) {
+ const newOperationId = operationId.substring(toRemove.length);
+ operation.operationId = newOperationId;
+ }
+ }
+ });
+ });
+ fs.writeFile(filePath, JSON.stringify(openapiContent, null, 2), (err) => {
+ if (err) throw err;
+ });
+});

src/backend/app/app/main.py

@@ -1,11 +1,19 @@
 from fastapi import FastAPI
+from fastapi.routing import APIRoute
 from starlette.middleware.cors import CORSMiddleware
 
 from app.api.api_v1.api import api_router
 from app.core.config import settings
 
+
+def custom_generate_unique_id(route: APIRoute):
+ return f"{route.tags[0]}-{route.name}"
+
+
 app = FastAPI(
- title=settings.PROJECT_NAME, openapi_url=f"{settings.API_V1_STR}/openapi.json"
+ title=settings.PROJECT_NAME,
+ openapi_url=f"{settings.API_V1_STR}/openapi.json",
+ generate_unique_id_function=custom_generate_unique_id,
 )
 
 # Set all CORS enabled origins

src/new-frontend/README.md

@@ -1,30 +1,17 @@
-# React + TypeScript + Vite
+# Full Stack FastAPI and PostgreSQL - Frontend
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## Generate Client
 
-Currently, two official plugins are available:
+- Start the Docker Compose stack.
+- Download the OpenAPI JSON file from `http://localhost/api/v1/openapi.json` and copy it to a new file `openapi.json` next to the `package.json` file.
+- To simplify the names in the generated frontend client code, modifying the `openapi.json` file, run:
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+```bash
+node modify-openapi-operationids.js
+```
 
-- Configure the top-level `parserOptions` property like this:
+- To generate or update the frontend client, run:
 
-```js
-export default {
- // other rules...
- parserOptions: {
- ecmaVersion: 'latest',
- sourceType: 'module',
- project: ['./tsconfig.json', './tsconfig.node.json'],
- tsconfigRootDir: __dirname,
- },
-}
+```bash
+npm run generate-client
 ```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

src/new-frontend/modify-openapi-operationids.js

@@ -0,0 +1,29 @@
+import * as fs from "fs";
+
+const filePath = "./openapi.json";
+
+fs.readFile(filePath, (err, data) => {
+ const openapiContent = JSON.parse(data);
+ if (err) throw err;
+
+ const paths = openapiContent.paths;
+
+ Object.keys(paths).forEach((pathKey) => {
+ const pathData = paths[pathKey];
+ Object.keys(pathData).forEach((method) => {
+ const operation = pathData[method];
+ if (operation.tags && operation.tags.length > 0) {
+ const tag = operation.tags[0];
+ const operationId = operation.operationId;
+ const toRemove = `${tag}-`;
+ if (operationId.startsWith(toRemove)) {
+ const newOperationId = operationId.substring(toRemove.length);
+ operation.operationId = newOperationId;
+ }
+ }
+ });
+ });
+ fs.writeFile(filePath, JSON.stringify(openapiContent, null, 2), (err) => {
+ if (err) throw err;
+ });
+});

src/backend/app/app/main.py

@@ -1,11 +1,19 @@
 from fastapi import FastAPI
+from fastapi.routing import APIRoute
 from starlette.middleware.cors import CORSMiddleware
 
 from app.api.api_v1.api import api_router
 from app.core.config import settings
 
+
+def custom_generate_unique_id(route: APIRoute):
+ return f"{route.tags[0]}-{route.name}"
+
+
 app = FastAPI(
- title=settings.PROJECT_NAME, openapi_url=f"{settings.API_V1_STR}/openapi.json"
+ title=settings.PROJECT_NAME,
+ openapi_url=f"{settings.API_V1_STR}/openapi.json",
+ generate_unique_id_function=custom_generate_unique_id,
 )
 
 # Set all CORS enabled origins

src/new-frontend/README.md

@@ -1,30 +1,17 @@
-# React + TypeScript + Vite
+# Full Stack FastAPI and PostgreSQL - Frontend
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## Generate Client
 
-Currently, two official plugins are available:
+- Start the Docker Compose stack.
+- Download the OpenAPI JSON file from `http://localhost/api/v1/openapi.json` and copy it to a new file `openapi.json` next to the `package.json` file.
+- To simplify the names in the generated frontend client code, modifying the `openapi.json` file, run:
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+```bash
+node modify-openapi-operationids.js
+```
 
-- Configure the top-level `parserOptions` property like this:
+- To generate or update the frontend client, run:
 
-```js
-export default {
- // other rules...
- parserOptions: {
- ecmaVersion: 'latest',
- sourceType: 'module',
- project: ['./tsconfig.json', './tsconfig.node.json'],
- tsconfigRootDir: __dirname,
- },
-}
+```bash
+npm run generate-client
 ```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

src/new-frontend/modify-openapi-operationids.js

@@ -0,0 +1,29 @@
+import * as fs from "fs";
+
+const filePath = "./openapi.json";
+
+fs.readFile(filePath, (err, data) => {
+ const openapiContent = JSON.parse(data);
+ if (err) throw err;
+
+ const paths = openapiContent.paths;
+
+ Object.keys(paths).forEach((pathKey) => {
+ const pathData = paths[pathKey];
+ Object.keys(pathData).forEach((method) => {
+ const operation = pathData[method];
+ if (operation.tags && operation.tags.length > 0) {
+ const tag = operation.tags[0];
+ const operationId = operation.operationId;
+ const toRemove = `${tag}-`;
+ if (operationId.startsWith(toRemove)) {
+ const newOperationId = operationId.substring(toRemove.length);
+ operation.operationId = newOperationId;
+ }
+ }
+ });
+ });
+ fs.writeFile(filePath, JSON.stringify(openapiContent, null, 2), (err) => {
+ if (err) throw err;
+ });
+});

src/backend/app/app/main.py

@@ -1,11 +1,19 @@
 from fastapi import FastAPI
+from fastapi.routing import APIRoute
 from starlette.middleware.cors import CORSMiddleware
 
 from app.api.api_v1.api import api_router
 from app.core.config import settings
 
+
+def custom_generate_unique_id(route: APIRoute):
+ return f"{route.tags[0]}-{route.name}"
+
+
 app = FastAPI(
- title=settings.PROJECT_NAME, openapi_url=f"{settings.API_V1_STR}/openapi.json"
+ title=settings.PROJECT_NAME,
+ openapi_url=f"{settings.API_V1_STR}/openapi.json",
+ generate_unique_id_function=custom_generate_unique_id,
 )
 
 # Set all CORS enabled origins

src/new-frontend/README.md

@@ -1,30 +1,17 @@
-# React + TypeScript + Vite
+# Full Stack FastAPI and PostgreSQL - Frontend
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## Generate Client
 
-Currently, two official plugins are available:
+- Start the Docker Compose stack.
+- Download the OpenAPI JSON file from `http://localhost/api/v1/openapi.json` and copy it to a new file `openapi.json` next to the `package.json` file.
+- To simplify the names in the generated frontend client code, modifying the `openapi.json` file, run:
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+```bash
+node modify-openapi-operationids.js
+```
 
-- Configure the top-level `parserOptions` property like this:
+- To generate or update the frontend client, run:
 
-```js
-export default {
- // other rules...
- parserOptions: {
- ecmaVersion: 'latest',
- sourceType: 'module',
- project: ['./tsconfig.json', './tsconfig.node.json'],
- tsconfigRootDir: __dirname,
- },
-}
+```bash
+npm run generate-client
 ```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

src/new-frontend/modify-openapi-operationids.js

@@ -0,0 +1,29 @@
+import * as fs from "fs";
+
+const filePath = "./openapi.json";
+
+fs.readFile(filePath, (err, data) => {
+ const openapiContent = JSON.parse(data);
+ if (err) throw err;
+
+ const paths = openapiContent.paths;
+
+ Object.keys(paths).forEach((pathKey) => {
+ const pathData = paths[pathKey];
+ Object.keys(pathData).forEach((method) => {
+ const operation = pathData[method];
+ if (operation.tags && operation.tags.length > 0) {
+ const tag = operation.tags[0];
+ const operationId = operation.operationId;
+ const toRemove = `${tag}-`;
+ if (operationId.startsWith(toRemove)) {
+ const newOperationId = operationId.substring(toRemove.length);
+ operation.operationId = newOperationId;
+ }
+ }
+ });
+ });
+ fs.writeFile(filePath, JSON.stringify(openapiContent, null, 2), (err) => {
+ if (err) throw err;
+ });
+});

src/backend/app/app/main.py

@@ -1,11 +1,19 @@
 from fastapi import FastAPI
+from fastapi.routing import APIRoute
 from starlette.middleware.cors import CORSMiddleware
 
 from app.api.api_v1.api import api_router
 from app.core.config import settings
 
+
+def custom_generate_unique_id(route: APIRoute):
+ return f"{route.tags[0]}-{route.name}"
+
+
 app = FastAPI(
- title=settings.PROJECT_NAME, openapi_url=f"{settings.API_V1_STR}/openapi.json"
+ title=settings.PROJECT_NAME,
+ openapi_url=f"{settings.API_V1_STR}/openapi.json",
+ generate_unique_id_function=custom_generate_unique_id,
 )
 
 # Set all CORS enabled origins

src/new-frontend/README.md

@@ -1,30 +1,17 @@
-# React + TypeScript + Vite
+# Full Stack FastAPI and PostgreSQL - Frontend
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## Generate Client
 
-Currently, two official plugins are available:
+- Start the Docker Compose stack.
+- Download the OpenAPI JSON file from `http://localhost/api/v1/openapi.json` and copy it to a new file `openapi.json` next to the `package.json` file.
+- To simplify the names in the generated frontend client code, modifying the `openapi.json` file, run:
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+```bash
+node modify-openapi-operationids.js
+```
 
-- Configure the top-level `parserOptions` property like this:
+- To generate or update the frontend client, run:
 
-```js
-export default {
- // other rules...
- parserOptions: {
- ecmaVersion: 'latest',
- sourceType: 'module',
- project: ['./tsconfig.json', './tsconfig.node.json'],
- tsconfigRootDir: __dirname,
- },
-}
+```bash
+npm run generate-client
 ```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

src/new-frontend/modify-openapi-operationids.js

@@ -0,0 +1,29 @@
+import * as fs from "fs";
+
+const filePath = "./openapi.json";
+
+fs.readFile(filePath, (err, data) => {
+ const openapiContent = JSON.parse(data);
+ if (err) throw err;
+
+ const paths = openapiContent.paths;
+
+ Object.keys(paths).forEach((pathKey) => {
+ const pathData = paths[pathKey];
+ Object.keys(pathData).forEach((method) => {
+ const operation = pathData[method];
+ if (operation.tags && operation.tags.length > 0) {
+ const tag = operation.tags[0];
+ const operationId = operation.operationId;
+ const toRemove = `${tag}-`;
+ if (operationId.startsWith(toRemove)) {
+ const newOperationId = operationId.substring(toRemove.length);
+ operation.operationId = newOperationId;
+ }
+ }
+ });
+ });
+ fs.writeFile(filePath, JSON.stringify(openapiContent, null, 2), (err) => {
+ if (err) throw err;
+ });
+});

src/backend/app/app/main.py

@@ -1,11 +1,19 @@
 from fastapi import FastAPI
+from fastapi.routing import APIRoute
 from starlette.middleware.cors import CORSMiddleware
 
 from app.api.api_v1.api import api_router
 from app.core.config import settings
 
+
+def custom_generate_unique_id(route: APIRoute):
+ return f"{route.tags[0]}-{route.name}"
+
+
 app = FastAPI(
- title=settings.PROJECT_NAME, openapi_url=f"{settings.API_V1_STR}/openapi.json"
+ title=settings.PROJECT_NAME,
+ openapi_url=f"{settings.API_V1_STR}/openapi.json",
+ generate_unique_id_function=custom_generate_unique_id,
 )
 
 # Set all CORS enabled origins

src/new-frontend/README.md

@@ -1,30 +1,17 @@
-# React + TypeScript + Vite
+# Full Stack FastAPI and PostgreSQL - Frontend
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## Generate Client
 
-Currently, two official plugins are available:
+- Start the Docker Compose stack.
+- Download the OpenAPI JSON file from `http://localhost/api/v1/openapi.json` and copy it to a new file `openapi.json` next to the `package.json` file.
+- To simplify the names in the generated frontend client code, modifying the `openapi.json` file, run:
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+```bash
+node modify-openapi-operationids.js
+```
 
-- Configure the top-level `parserOptions` property like this:
+- To generate or update the frontend client, run:
 
-```js
-export default {
- // other rules...
- parserOptions: {
- ecmaVersion: 'latest',
- sourceType: 'module',
- project: ['./tsconfig.json', './tsconfig.node.json'],
- tsconfigRootDir: __dirname,
- },
-}
+```bash
+npm run generate-client
 ```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

src/new-frontend/modify-openapi-operationids.js

@@ -0,0 +1,29 @@
+import * as fs from "fs";
+
+const filePath = "./openapi.json";
+
+fs.readFile(filePath, (err, data) => {
+ const openapiContent = JSON.parse(data);
+ if (err) throw err;
+
+ const paths = openapiContent.paths;
+
+ Object.keys(paths).forEach((pathKey) => {
+ const pathData = paths[pathKey];
+ Object.keys(pathData).forEach((method) => {
+ const operation = pathData[method];
+ if (operation.tags && operation.tags.length > 0) {
+ const tag = operation.tags[0];
+ const operationId = operation.operationId;
+ const toRemove = `${tag}-`;
+ if (operationId.startsWith(toRemove)) {
+ const newOperationId = operationId.substring(toRemove.length);
+ operation.operationId = newOperationId;
+ }
+ }
+ });
+ });
+ fs.writeFile(filePath, JSON.stringify(openapiContent, null, 2), (err) => {
+ if (err) throw err;
+ });
+});

src/backend/app/app/main.py

@@ -1,11 +1,19 @@
 from fastapi import FastAPI
+from fastapi.routing import APIRoute
 from starlette.middleware.cors import CORSMiddleware
 
 from app.api.api_v1.api import api_router
 from app.core.config import settings
 
+
+def custom_generate_unique_id(route: APIRoute):
+ return f"{route.tags[0]}-{route.name}"
+
+
 app = FastAPI(
- title=settings.PROJECT_NAME, openapi_url=f"{settings.API_V1_STR}/openapi.json"
+ title=settings.PROJECT_NAME,
+ openapi_url=f"{settings.API_V1_STR}/openapi.json",
+ generate_unique_id_function=custom_generate_unique_id,
 )
 
 # Set all CORS enabled origins

src/new-frontend/README.md

@@ -1,30 +1,17 @@
-# React + TypeScript + Vite
+# Full Stack FastAPI and PostgreSQL - Frontend
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## Generate Client
 
-Currently, two official plugins are available:
+- Start the Docker Compose stack.
+- Download the OpenAPI JSON file from `http://localhost/api/v1/openapi.json` and copy it to a new file `openapi.json` next to the `package.json` file.
+- To simplify the names in the generated frontend client code, modifying the `openapi.json` file, run:
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+```bash
+node modify-openapi-operationids.js
+```
 
-- Configure the top-level `parserOptions` property like this:
+- To generate or update the frontend client, run:
 
-```js
-export default {
- // other rules...
- parserOptions: {
- ecmaVersion: 'latest',
- sourceType: 'module',
- project: ['./tsconfig.json', './tsconfig.node.json'],
- tsconfigRootDir: __dirname,
- },
-}
+```bash
+npm run generate-client
 ```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

src/new-frontend/modify-openapi-operationids.js

@@ -0,0 +1,29 @@
+import * as fs from "fs";
+
+const filePath = "./openapi.json";
+
+fs.readFile(filePath, (err, data) => {
+ const openapiContent = JSON.parse(data);
+ if (err) throw err;
+
+ const paths = openapiContent.paths;
+
+ Object.keys(paths).forEach((pathKey) => {
+ const pathData = paths[pathKey];
+ Object.keys(pathData).forEach((method) => {
+ const operation = pathData[method];
+ if (operation.tags && operation.tags.length > 0) {
+ const tag = operation.tags[0];
+ const operationId = operation.operationId;
+ const toRemove = `${tag}-`;
+ if (operationId.startsWith(toRemove)) {
+ const newOperationId = operationId.substring(toRemove.length);
+ operation.operationId = newOperationId;
+ }
+ }
+ });
+ });
+ fs.writeFile(filePath, JSON.stringify(openapiContent, null, 2), (err) => {
+ if (err) throw err;
+ });
+});

src/backend/app/app/main.py

@@ -1,11 +1,19 @@
 from fastapi import FastAPI
+from fastapi.routing import APIRoute
 from starlette.middleware.cors import CORSMiddleware
 
 from app.api.api_v1.api import api_router
 from app.core.config import settings
 
+
+def custom_generate_unique_id(route: APIRoute):
+ return f"{route.tags[0]}-{route.name}"
+
+
 app = FastAPI(
- title=settings.PROJECT_NAME, openapi_url=f"{settings.API_V1_STR}/openapi.json"
+ title=settings.PROJECT_NAME,
+ openapi_url=f"{settings.API_V1_STR}/openapi.json",
+ generate_unique_id_function=custom_generate_unique_id,
 )
 
 # Set all CORS enabled origins

src/new-frontend/README.md

@@ -1,30 +1,17 @@
-# React + TypeScript + Vite
+# Full Stack FastAPI and PostgreSQL - Frontend
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## Generate Client
 
-Currently, two official plugins are available:
+- Start the Docker Compose stack.
+- Download the OpenAPI JSON file from `http://localhost/api/v1/openapi.json` and copy it to a new file `openapi.json` next to the `package.json` file.
+- To simplify the names in the generated frontend client code, modifying the `openapi.json` file, run:
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+```bash
+node modify-openapi-operationids.js
+```
 
-- Configure the top-level `parserOptions` property like this:
+- To generate or update the frontend client, run:
 
-```js
-export default {
- // other rules...
- parserOptions: {
- ecmaVersion: 'latest',
- sourceType: 'module',
- project: ['./tsconfig.json', './tsconfig.node.json'],
- tsconfigRootDir: __dirname,
- },
-}
+```bash
+npm run generate-client
 ```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

src/new-frontend/modify-openapi-operationids.js

@@ -0,0 +1,29 @@
+import * as fs from "fs";
+
+const filePath = "./openapi.json";
+
+fs.readFile(filePath, (err, data) => {
+ const openapiContent = JSON.parse(data);
+ if (err) throw err;
+
+ const paths = openapiContent.paths;
+
+ Object.keys(paths).forEach((pathKey) => {
+ const pathData = paths[pathKey];
+ Object.keys(pathData).forEach((method) => {
+ const operation = pathData[method];
+ if (operation.tags && operation.tags.length > 0) {
+ const tag = operation.tags[0];
+ const operationId = operation.operationId;
+ const toRemove = `${tag}-`;
+ if (operationId.startsWith(toRemove)) {
+ const newOperationId = operationId.substring(toRemove.length);
+ operation.operationId = newOperationId;
+ }
+ }
+ });
+ });
+ fs.writeFile(filePath, JSON.stringify(openapiContent, null, 2), (err) => {
+ if (err) throw err;
+ });
+});