podium micro-frontends 简单试用

以下是一个简单的podium 试用，包含了layout 以及podlets,使用docker 运行
podium 主要包含了两大部分

• podlets
  片段服务
• layouts
  片段组合服务

环境准备

• docker-compose 文件

 

version: '3'

services:

  layout:

     build:

       context: layouts/home

       dockerfile: Dockerfile

     ports:

     - "7000:7000"

  layout-index:

     build:

       context: podlets/indexpage

       dockerfile: Dockerfile

     ports:

     - "7100:7100"

  layout-userlogin:

     build:

       context: podlets/userlogin

       dockerfile: Dockerfile

     ports:

     - "7101:7101"

服务编写

• podlets/indexpage
  package.json

{

  "name": "indexpage",

  "version": "1.0.0",

  "main": "index.js",

  "license": "MIT",

  "dependencies": {

    "@podium/podlet": "^4.2.0",

    "express": "^4.17.1"

  },

  "scripts": {

    "app":"node index"

  }

}

 

index.js

const express = require("express")

const Podlet = require("@podium/podlet")

const app = express();

​

const podlet = new Podlet({

    name: 'index', // required

    version: '1.0.0', // required

    pathname: '/', // required

    manifest: '/manifest.json', // optional, defaults to '/manifest.json'

    content: '/', // optional, defaults to '/'

    development: true, // optional, defaults to false

});

​

​

app.use(podlet.middleware());

​

app.get(podlet.content(), (req, res) => {

    res.status(200).podiumSend(`

        <div>

            This is the index podlet's HTML content

        </div>

    `);

});

​

app.get(podlet.manifest(), (req, res) => {

    res.status(200).send(podlet);

});

​

app.listen(7100);

​

 

 

Dockerfile

FROM node:alpine

LABEL AUTHOR="1141591465@qq.com"

WORKDIR /app

COPY . /app

RUN yarn

EXPOSE 7100

RUN yarn

CMD [ "yarn", "app"]

 

 

• podlets/userlogin
  package.json

 

{

  "dependencies": {

    "@podium/podlet": "^4.2.0",

    "express": "^4.17.1"

  },

  "name": "userlogin",

  "version": "1.0.0",

  "main": "index.js",

  "license": "MIT",

  "scripts": {

    "app":"node index"

  }

}

 

 

index.js

const express = require("express")

const Podlet = require("@podium/podlet")

const app = express();

​

const podlet = new Podlet({

    name: 'userlogin', // required

    version: '1.0.0', // required

    pathname: '/userlogin', // required

    manifest: '/manifest.json', // optional, defaults to '/manifest.json'

    development: true, // optional, defaults to false

});

​

​

app.use(podlet.middleware());

​

app.get(podlet.content(), (req, res) => {

    res.status(200).podiumSend(`

        <div>

            This is the userlogin podlet's HTML content

        </div>

    `);

});

​

app.get(podlet.manifest(), (req, res) => {

    res.status(200).send(podlet);

});

​

app.listen(7101);

 

 

Dockerfile

FROM node:alpine

LABEL AUTHOR="1141591465@qq.com"

WORKDIR /app

COPY . /app

RUN yarn

EXPOSE 7101

RUN yarn

CMD [ "yarn", "app"]

• layouts/home
  package.json

 

{

  "name": "home",

  "version": "1.0.0",

  "main": "index.js",

  "license": "MIT",

  "dependencies": {

    "@podium/layout": "^4.2.0",

    "express": "^4.17.1"

  },

  "scripts": {

    "app":"node index"

  }

}

 

 

index.js

const express = require('express');

const Layout = require('@podium/layout');

​

const app = express();

​

const layout = new Layout({

    name: 'dashboard', // required

    pathname: '/', // required

});

const index = layout.client.register({

    name: 'index', // required

    uri: 'http://layout-index:7100/manifest.json', // required

});

​

const userlogin = layout.client.register({

    name: 'userlogin', // required

    uri: 'http://layout-userlogin:7101/manifest.json', // required

});

​

app.use(layout.middleware());

​

app.get('/', async (req, res,next) => {

    const incoming = res.locals.podium;

    const [a,b] = await Promise.all([

        index.fetch(incoming),

        userlogin.fetch(incoming),

    ]);

    incoming.view.title = 'My Super Page';

    res.podiumSend(`

    <section>${a.content}</section>

    <section>${b.content}</section>

`);

});

​

app.listen(7000);

Dockerfile

FROM node:alpine

LABEL AUTHOR="1141591465@qq.com"

WORKDIR /app

COPY . /app

RUN yarn

EXPOSE 7000

RUN yarn

CMD [ "yarn", "app"]

构建&&启动

• 构建镜像

docker-compose  build

• 启动

docker-compose up -d

• 效果

打开 http://localhodt:7000

说明

podlets 提供片段服务，layout 提供webpage 的组合服务，使用上还是比较简单的，同时里边也包含了版本的处理（通过元数据服务）

参考资料

https://podium-lib.io/docs/podium/conceptual_overview
https://github.com/rongfengliang/podium-docker-compose