{"id":18798600,"url":"https://github.com/liteobject/demo-micro-frontend","last_synced_at":"2026-04-30T14:31:27.544Z","repository":{"id":193972777,"uuid":"689413631","full_name":"LiteObject/demo-micro-frontend","owner":"LiteObject","description":"Demo Micro Frontend with Piral","archived":false,"fork":false,"pushed_at":"2024-10-19T10:46:25.000Z","size":707,"stargazers_count":1,"open_issues_count":6,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-21T19:13:53.388Z","etag":null,"topics":["micro-frontend","pilet","piral","react","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/LiteObject.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}},"created_at":"2023-09-09T18:16:38.000Z","updated_at":"2024-11-01T07:36:33.000Z","dependencies_parsed_at":"2024-04-05T23:21:06.173Z","dependency_job_id":"f2885cae-75fa-4458-93c2-ba22776f5bbd","html_url":"https://github.com/LiteObject/demo-micro-frontend","commit_stats":null,"previous_names":["liteobject/demo-micro-frontend"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/LiteObject/demo-micro-frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiteObject%2Fdemo-micro-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiteObject%2Fdemo-micro-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiteObject%2Fdemo-micro-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiteObject%2Fdemo-micro-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LiteObject","download_url":"https://codeload.github.com/LiteObject/demo-micro-frontend/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiteObject%2Fdemo-micro-frontend/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32468009,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"ssl_error","status_checked_at":"2026-04-30T13:12:06.837Z","response_time":57,"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":["micro-frontend","pilet","piral","react","typescript"],"created_at":"2024-11-07T22:12:27.269Z","updated_at":"2026-04-30T14:31:27.517Z","avatar_url":"https://github.com/LiteObject.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Micro-Frontend with Piral Framework\n\n## What is a microfrontend?\nA micro-frontend is an architectural style where a frontend app is composed of multiple smaller frontend apps or components. Each component is developed, deployed and maintained by different teams independently.\n\nThe key ideas behind microfrontends are:\n\n- Break down a monolithic frontend into smaller pieces\n- Allow teams to work in parallel on different features\n- Each team owns the full lifecycle of their microfrontend component\n- Components are integrated into a single user interface at runtime\n\nThis approach aims to allow large organizations to scale frontend development by giving teams autonomy and avoiding monolithic codebases that are difficult to maintain and evolve.\n\n## What is Piral?\nPiral is an open source framework for building modular web applications using micro-frontends. It allows you to combine multiple independent applications or components into a single user interface. The key features of Piral include:\n- Composing applications from different sources\n- Isolating team code and deployment\n- Sharing dependencies and state\n- Routing between components\n- Updating components independently\n\nPiral makes it easier to adopt a micro-frontend architecture, where different teams can develop and deploy parts of a web app separately, while still providing a seamless user experience.\n\n![alt text](setup-overview.png)\n\n## Setting up the Piral Tooling\n\n### Install the Piral CLI\n    npm i piral-cli -g\n\n### Check version of the Piral CLI\n    piral --version\n\n## Create an Application Shell (Piral Instance)\n![alt text](mod-dist-web-app.png)\n\n### Setup a new Piral (App Shell) Instance\n    piral new --target app-shell\n\n## Run the Application Shell\n    piral debug\n\n## Create Package for the Application Shell\n    piral build\n\n\u003eThis will trigger the build of a Piral instance. By default, this command will create two folders within the `dist` folder: `emulator` and `release`. The latter contains the files for publishing the app shell to some host later on. The former contains an emulator package.\n\n## Create Pilet using the Piral CLI\n    pilet new ./app-shell/dist/emulator/app-shell-1.0.0.tgz --target my-pilet\n\nWith the `pilet new` command, a new pilet with pre-defined content is created. The first parameter `./app-shell/dist/emulator/app-shell-1.0.0.tgz` specifies the application shell, which the pilet will be built for. Make sure that you adjust the path to the Piral instance located in your local directory structure.\n\n## Start the Pilet\n    pilet debug\n\n## Build pilet\n    pilet build\n\n## Pack pilet\n    pilet pack\n\n## Do all of the three above pilet commands (build, pack, publish) just use `--fresh`\n    pilet publish --fresh --url sample\n\n## Publish pilet to piral cloud\n    pilet publish --fresh  --url https://feed.piral.cloud/api/v1/pilet/mx-demo --api-key \u003cKEY\u003e\n\n## Publish pilet to local feed instance\n    pilet publish --fresh  --url http://localhost:8181/api/v1/pilet --api-key df133a512569cbc85f69788d1b7ff5a909f6bcfe1c9a2794283a2fc35175882c\n\n---\n## Build a docker image\n    docker build -t my-piral-app .\n\n## Run the image\n    docker run -p 3000:1234 my-piral-app\n\n## Run using the docker compose file\n    docker-compose up -d --build\n\n## Stop running container\n    docker-compose down\n\n## Links\n- [Piral: Getting Started](https://docs.piral.io/guidelines/tutorials/02-getting-started)\n- [Publishing Pilets](https://docs.piral.io/guidelines/tutorials/03-publishing-pilets)\n- [Error Codes](https://docs.piral.io/code/0000)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliteobject%2Fdemo-micro-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliteobject%2Fdemo-micro-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliteobject%2Fdemo-micro-frontend/lists"}