All Projects → piral-samples → piral-microfrontend-demo

piral-samples / piral-microfrontend-demo

Licence: MIT License
A demo for microfrontend webshop product page using Piral. 🚀

Programming Languages

typescript
32286 projects
CSS
56736 projects
javascript
184084 projects - #8 most used programming language
shell
77523 projects
HTML
75241 projects

Projects that are alternatives of or similar to piral-microfrontend-demo

angular-react-microfrontend
🚧 React vs Angular ? Why not both ! Micro frontend demo using Angular and React alongs with a NodeJS API
Stars: ✭ 17 (-15%)
Mutual labels:  microfrontends-demo, microfrontend
mooa-boilerplate
microfrontends framewrok mooa's boilerplate.前端微服务化框架 Mooa 脚手架示例
Stars: ✭ 30 (+50%)
Mutual labels:  microfrontends, microfrontends-demo
Qiankun
📦 🚀 Blazing fast, simple and complete solution for micro frontends.
Stars: ✭ 11,497 (+57385%)
Mutual labels:  microfrontends, microfrontend
windowed-observable
Messaging lib using a pub/sub observable scoped by namespaces.
Stars: ✭ 132 (+560%)
Mutual labels:  microfrontends, microfrontend
Microfrontends
Micro-frontend Architecture in Action-微前端的那些事儿
Stars: ✭ 2,696 (+13380%)
Mutual labels:  microfrontends, microfrontend
micro-fun
Micro frontends as Fun with Next.js & module federation
Stars: ✭ 55 (+175%)
Mutual labels:  microfrontends, microfrontend
mf-lite
🎉 优雅且实用的基于 webpack module federation 的微前端解决方案 / Elegant and practical micro front-end solution based on webpack module federation.
Stars: ✭ 126 (+530%)
Mutual labels:  microfrontend
fronts
A progressive micro frontends framework for building Web applications
Stars: ✭ 493 (+2365%)
Mutual labels:  microfrontends
plugin-ceres
This is the official Ceres plugin developed by plentymarkets. Ceres is the default template plugin for plentymarkets 7 online stores.
Stars: ✭ 43 (+115%)
Mutual labels:  webshop
merkur
tiny extensible javascript library for front-end microservices
Stars: ✭ 45 (+125%)
Mutual labels:  microfrontends
microzord
Simple and powerful Micro Frontends framework
Stars: ✭ 81 (+305%)
Mutual labels:  microfrontends
mo360-ftk
MO360 Frontend Toolkit: A toolkit for single page applications (SPA) based on React and Typescript that allows to extract single features into microfrontends.
Stars: ✭ 54 (+170%)
Mutual labels:  microfrontend
Angular-Reactive-Demo-Shop
Angular Demo Shop
Stars: ✭ 79 (+295%)
Mutual labels:  webshop
micro-frontend-gateway
🌐 Micro Frontends PoC in Angular - GATEWAY
Stars: ✭ 26 (+30%)
Mutual labels:  microfrontends
microfest
Manifest management for single page applications driven by micro frontend apps
Stars: ✭ 14 (-30%)
Mutual labels:  microfrontends
micro-frontends-demo
Demo of a micro frontend approach with Web Components. From CodeOne 2019 presentation: Micro Front Ends: Breaking Up the Front-End Monolith
Stars: ✭ 24 (+20%)
Mutual labels:  microfrontends
nut
🌰 A framework born for micro frontends
Stars: ✭ 101 (+405%)
Mutual labels:  microfrontends
rallie
a library that helps users implement decentralized front-end micro service architecture
Stars: ✭ 285 (+1325%)
Mutual labels:  microfrontends
react-microfrontends-demo
Demo of microfrontends using React
Stars: ✭ 36 (+80%)
Mutual labels:  microfrontends
lego
🚀 Web-components made lightweight & Future-Proof.
Stars: ✭ 69 (+245%)
Mutual labels:  microfrontends

Piral Logo

Piral Sample · GitHub License Gitter Chat

piral-microfrontend-demo

A demo for microfrontend webshop product page using Piral. 🚀

View the demo online!

You can visit this demo at tractor.samples.piral.cloud/.

Prerequisites

For running the code you'll need Node.js with NPM. Nothing else is required.

Editing the code should work with convenience in any IDE capable of dealing with TypeScript. Personally, I've used Visual Studio Code.

Installation

Each subdirectory contains a Node project and thus needs to be set up correctly, e.g., (for the app-shell):

cd app-shell
npm i

Alternatively, use the ./install.sh script:

./install.sh

Running

First, make sure you have access to a pilet feed. In the simplest case clone the sample feed repository and follow the instructions for running.

Start the debug version of the app-shell:

cd app-shell
npm start

You should see an empty page (with a red rectangle).

Now open another shell and publish the pilets:

./publish.sh

The upload assumes that the pilet feed service is running at http://localhost:9000/api/v1/pilet. The used API Key is one of the standard ones. If these assumptions are not correct you'll need to correct the settings.

For simplicity, you can also just use the following command (required: install.sh must have been run):

./run.sh

This will clone, install, build, and run a sample feed service. Additionally, everything else will be build, published, and started.

License

Piral and this sample code is released using the MIT license. For more information see the license file.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].