{"id":28344329,"url":"https://github.com/rehanvdm/pets-frontend","last_synced_at":"2026-04-17T15:33:15.641Z","repository":{"id":171100537,"uuid":"490136573","full_name":"rehanvdm/pets-frontend","owner":"rehanvdm","description":"Part of a blog series: Improve Developer Experience (DX) by publishing an API SDK - a CDK Serverless example","archived":false,"fork":false,"pushed_at":"2022-05-10T05:05:14.000Z","size":175,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-20T13:44:57.493Z","etag":null,"topics":["api","aws","cdk","openapi","typescript"],"latest_commit_sha":null,"homepage":"https://www.rehanvdm.com/blog/improve-dx-publishing-an-api-sdk-cdk-serverless","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rehanvdm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-05-09T04:41:42.000Z","updated_at":"2022-05-21T14:43:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"72ed1bd1-fdff-44b8-ae6b-f5222437c66a","html_url":"https://github.com/rehanvdm/pets-frontend","commit_stats":null,"previous_names":["rehanvdm/pets-frontend"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rehanvdm/pets-frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rehanvdm%2Fpets-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rehanvdm%2Fpets-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rehanvdm%2Fpets-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rehanvdm%2Fpets-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rehanvdm","download_url":"https://codeload.github.com/rehanvdm/pets-frontend/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rehanvdm%2Fpets-frontend/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31934344,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-17T12:37:54.787Z","status":"ssl_error","status_checked_at":"2026-04-17T12:37:25.095Z","response_time":62,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","aws","cdk","openapi","typescript"],"created_at":"2025-05-27T09:56:48.708Z","updated_at":"2026-04-17T15:33:15.629Z","avatar_url":"https://github.com/rehanvdm.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend \n\nThis project is used to demo the usage of the SDK API NPM packaged that is published by the backend project here: \n[https://github.com/rehanvdm/pets-backend](https://github.com/rehanvdm/pets-backend). It has a basic HTML file with\na JS file that is built from a TS file using browserify. \n\n\u003e You can use the GULP plugin for your IDE to debug and run the `gulpfile.js` that is used as the build script. \nYou can also run the scripts via`npm run \u003cTASK\u003e`  for your convenience.\n\nImportant note about versioning. The NPM package version is the same as the OpenAPI spec version. To prevent breaking\nchanges, the version number of the API has to be fixed when installing the package.\n\n## Installing\n\n1. Create a [Personal Access Token(PAT) on GitHub](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token#creating-a-token)\n   so that we can get the SDK API NPM package. You need to assign the flowing permissions:\n   - `read:packages` Download packages from GitHub Package Registry\n2. Make a copy of the `.npmrc.example` file and replace:\n   -`\u003cYOUR PERSONAL ACCESS TOKEN HERE\u003e` with your GitHub Personal Access Token (PAT) that you obtained above\n   - `\u003cYOUR GITHUB PROFILE OR ORGANIZATION NAME\u003e` with your GutHub username of where the package is installed\n3. Now you can install packages `npm install`\n\n## Configuring\n\n1. Set the backend URL in the `/src/index.ts` file on line 3, replace `\u003cYOUR URL HERE - NO TRAILING SLASH\u003e` with the URL \nyou got after deploying the backend project.\n\n2. Replace the AWS config values if you want to do deploy to AWS in the `gulpfile.js` on lines 25-27:\n  - `\u003cYOUR AWS PROFILE NAME TO USE FOR DEPLOYMENTS\u003e`\n  - `\u003cAWS REGION TO DEPLOY IN\u003e`\n  - `\u003cAWS ACCOUNT ID TO DEPLOY IN\u003e`\n\n## Running locally\n\nThe `/src` directory contains a basic HTML file that is used to output the JSON contents of the API calls. The `src/index.ts`\nfile uses the API SDK, it is transpiled to JS and then copied along with the `src/index.html` file to the `/dist` directory. \n\nUseful commands: \n\n- `npm run build_source` - Does the TS =\u003e JS transpolation and then copies the `src` files to the `dist` folder.\n- `npm run watch_source` - Watches the `src/index.ts` and `src/index.html` files and if they change, it runs the build \n   command above.\n\n## Running on AWS\n\nThis is just a basic/default S3 bucket + CloudFront setup, the CloudFront URL will be shown after you deployed. \n\n- `npm run cdk_diff` - Runs `build_source` and the `cdk diff` command.\n- `npm run cdk_deploy` - Runs `build_source` and the `cdk deploy` command.\n- `npm run cdk_hotswap` - Runs `build_source` and the `cdk deploy --hotswap` command.\n\n## Using the API SDK package\n\nExample:\n```typescript\nimport {Api} from \"@rehanvdm/pets-api\"\n\nconst apiBaseUrl = \"\u003cYOUR URL HERE - NO TRAILING SLASH\u003e\";\nconst api = new Api({\n   baseUrl: apiBaseUrl,\n   // baseApiParams: {\n   //   headers: {\n   //     \"Authorization\": \"\u003cYOUR TOKEN HERE\u003e\"\n   //   }\n   // }\n});\n\nlet pet = await api.pets.getPetById(1);\nconsole.log(pet);\n ```\n\nNote that you get autocomplete for the function (aka API arguments, with proper types) right in your IDE.\n\n![img.png](.images/img1.jpg)\n![img.png](.images/img2.jpg)\n![img.png](.images/img3.jpg)\n\nThe raw OpenAPI spec file can be seen at `node_modules/@rehanvdm/pets-api/schema.yaml`. The `api.pets.getPetById` \nmethod corresponds to the `GET /pets/{id}` API call. \n\n![img.png](.images/img4.jpg)\n![img.png](.images/img5.jpg)\n![img.png](.images/img6.jpg)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frehanvdm%2Fpets-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frehanvdm%2Fpets-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frehanvdm%2Fpets-frontend/lists"}