{"id":18798600,"url":"https://github.com/liteobject/demo-micro-frontend","last_synced_at":"2026-01-02T02:30:16.149Z","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":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-12-29T18:21:58.397Z","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,"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","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239727055,"owners_count":19687099,"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":["micro-frontend","pilet","piral","react","typescript"],"created_at":"2024-11-07T22:12:27.269Z","updated_at":"2026-01-02T02:30:16.085Z","avatar_url":"https://github.com/LiteObject.png","language":"TypeScript","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)","funding_links":[],"categories":[],"sub_categories":[],"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"}