Skip to content

Instantly share code, notes, and snippets.

@niko-afv

niko-afv/podlet.js

Created May 4, 2021 00:36
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save niko-afv/58056867787c3836941818e389ad8947 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save niko-afv/58056867787c3836941818e389ad8947 to your computer and use it in GitHub Desktop.
Download ZIP
Podlet.js
Raw
podlet.js
const express = require('express');
const Podlet = require("@podium/podlet");
const fs = require("fs");
const dotenv = require('dotenv');
const externalAssets = require('./assets/externals');
const loggerMiddleware = require('./logger');
dotenv.config();
const {
VUE_APP_ASSETS_URL = 'static',
VUE_APP_OUTPUTDIR = './dist',
VUE_CDN_ASSETS_URL: baseAssets = ''
} = process.env;
const vueFilePath = VUE_APP_OUTPUTDIR + '/' + VUE_APP_ASSETS_URL.toLowerCase();
const vueURLPath = VUE_APP_ASSETS_URL.toLowerCase();
const externalJS = externalAssets.filter((element) => element.type === 'js' || element.type === 'module');
const externalCSS = externalAssets.filter((element) => element.type === 'css');
const app = express();
app.use(loggerMiddleware);
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
// Basic definition of the podlet
const podlet = new Podlet({
name: "fe-section-dash-pack", // required
version: "0.6.0", // required
pathname: "/", // required
manifest: "/manifest.json", // optional
development: true, // optional, defaults to false
});
app.use(podlet.middleware());
// All css and js files in the dist folder should be added to the podlet definition.
const vueCssAssets = fs.readdirSync(`${vueFilePath}/css`)
.filter((file) => file.indexOf('.css') !== -1 && file.indexOf('.css.map') === -1 );
podlet.css(vueCssAssets.map((css) => ({ value: `${baseAssets}/${vueURLPath}/css/${css}` })));
const vueJsAssets = fs.readdirSync(`${vueFilePath}/js`)
.filter((file) => file.indexOf('.js') !== -1 && file.indexOf('.js.map') === -1 );
podlet.js(vueJsAssets.map((js) => ( js.indexOf('legacy') !== -1 ?
{ value: `${baseAssets}/${vueURLPath}/js/${js}`, defer: true, nomodule: true } :
{ value: `${baseAssets}/${vueURLPath}/js/${js}`, defer: true, type: 'module' }
)));
// set external resources
podlet.js(externalJS.map((js) => ( js.type === 'module' ?
{ value: js.path, defer: true, type: 'module'} :
{ value: js.path, defer: true, type: 'js', nomodule: js.nomodule }
)))
podlet.css(externalCSS.map((element) => ({ value: element.path })));
// create a static link to the files for demo purposes.
// In production the localhost URL should be a URL going to a CDN or static file hosting.
app.use(`/${vueURLPath}/css`, express.static(`${vueFilePath}/css/`));
app.use(`/${vueURLPath}/js`, express.static(`${vueFilePath}/js/`));
const wrapHtml = (f) => async (req, res) => {
const { status = 404, headers = {}, body = '' } = await f(req, res);
return res.status(status).set(headers).send(body);
};
const wrapPodium = (f) => async (req, res) => {
const { status = 404, headers = {}, body = '', head = '' } = await f(req, res);
return res.status(status).set(headers).podiumSend(body, head);
};
app.get('/health-check', wrapHtml(async () => ({
body: { status: 'ok' },
status: 200,
})));
// generate the podlet manifest
app.get(podlet.manifest(), wrapHtml(() => ({ body: podlet, status: 200 })));
// add HTML to send. This is the div ID in public/index.html
app.get(podlet.content(), wrapPodium(() => ({
body: '<div id="fe-section-dash-pack"></div>',
head: '<style>body{margin:0}</style>',
status: 200,
})));
//start the app at port 7100
app.listen({ port: process.env.APP_PORT }, () => {
// tslint:disable-next-line:no-console
console.log(`🚀 Server ready at http://localhost:${process.env.APP_PORT}`);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment