{"id":21528231,"url":"https://github.com/znsio/specmatic-order-ui-js","last_synced_at":"2025-07-02T17:34:10.825Z","repository":{"id":177226851,"uuid":"641598806","full_name":"znsio/specmatic-order-ui-js","owner":"znsio","description":null,"archived":false,"fork":false,"pushed_at":"2024-06-13T21:32:10.000Z","size":579,"stargazers_count":0,"open_issues_count":7,"forks_count":0,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-03-17T18:51:54.240Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/znsio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"License.md","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}},"created_at":"2023-05-16T20:11:17.000Z","updated_at":"2023-05-16T20:11:59.000Z","dependencies_parsed_at":"2024-04-19T22:36:26.927Z","dependency_job_id":"13c4d5f2-9fb6-4e78-9b82-19176dfb41d9","html_url":"https://github.com/znsio/specmatic-order-ui-js","commit_stats":null,"previous_names":["znsio/specmatic-order-ui-js"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/znsio/specmatic-order-ui-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/znsio%2Fspecmatic-order-ui-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/znsio%2Fspecmatic-order-ui-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/znsio%2Fspecmatic-order-ui-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/znsio%2Fspecmatic-order-ui-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/znsio","download_url":"https://codeload.github.com/znsio/specmatic-order-ui-js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/znsio%2Fspecmatic-order-ui-js/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263184881,"owners_count":23427108,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-11-24T01:52:18.897Z","updated_at":"2025-07-02T17:34:10.804Z","avatar_url":"https://github.com/znsio.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Specmatic Sample: UI calling BFF\n\n* [Specmatic Website](https://specmatic.in)\n* [Specmatic Documenation](https://specmatic.in/documentation.html)\n\nThis sample project contains a small static website built using HTML and plain javascript that demonstrates how we can contract driven development and testing of client side/front end by stubbing calls to BFF using specmatic stub option and backend OpenAPI spec. \n\nHere is the BFF [contract/open api spec](https://github.com/znsio/specmatic-order-contracts/blob/main/in/specmatic/examples/store/api_order_v1.yaml)\n\n## Definitions\n* BFF: Backend for Front End\n* Domain API: API managing the domain model\n* Specmatic Stub Server: Create a server that can replace a real service using its open api spec\n\n## Background\nA typical web application might look like this. Specmatic can contract driven development and testing of all the three components below. In this sample project, we look how to do this for the UI which is dependent on BFF.\n\n![HTML client talks to client API which talks to backend api](specmatic-sample-architecture.svg)\n\n_The architecture diagram was created using the amazing free online SVG editor at [Vectr](https://vectr.com)._\n\n## Tech\n1. HTML, Javascript\n2. Specmatic\n3. Karma, Mocha\n \n## Start UI\nThis will start the static server for front end UI\n```shell\nnpm start\n```\nAccess UI at http://localhost:3000\n_*Note:* Unless BFF is running on port 8082, above UI will not present any data. Move to next section for solution!_\n\n## Start UI with BFF Stub\nThis will start the static server with BFF stubbed\n```shell\nnpm run startWithStub\n```\nAccess UI again at http://localhost:3000 with random order data presented each time the page is refreshed.\n\n## Run Tests\nThis will start the specmatic stub server for BFF and run the karma tests on headless chrome.\n```shell\nnpm test\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fznsio%2Fspecmatic-order-ui-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fznsio%2Fspecmatic-order-ui-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fznsio%2Fspecmatic-order-ui-js/lists"}