The following guideline is for creating a simple Micro-Frontend project.
Step 1: initial project
# create your project’s folder
npm init -y
npm install node-tailor# Project structure
.
├── ...
├── project_dir # Server directory
│ ├── package.json
│ ├── package-lock.json
└── ... Step 2: create new server.js file
const http = require('http');
const Tailor = require('node-tailor');
const tailor = new Tailor({});
http
.createServer(tailor.requestHandler)
.listen(8080);# Project structure
.
├── ...
├── project_dir # Server directory
│ ├── package.json
│ ├── package-lock.json
| ├── server.js # Server file
└── ... Step 3: create new /templates/index.html file
<!DOCTYPE html>
<html>
<head>
<style></style>
</head>
<body>
<aside>Hello</aside>
<main>main</main>
</body>
</html># Project structure
.
├── ...
├── project_dir # Server directory
│ ├── package.json
│ ├── package-lock.json
| ├── server.js # Server file
│ ├── templates # Templates directory
│ | ├── index.html
└── ... Step 4: replace text with <fragment> tag at /templates/index.html
<!DOCTYPE html>
<html>
<head>
<style></style>
</head>
<body>
<aside>
<!-- replace with fragment tag -->
<fragment src="https://www.google.com/"></fragment>
</aside>
<main>
<!-- replace with fragment tag -->
<fragment src="https://www.lipsum.com/"></fragment>
</main>
</body>
</html>Step 5: add new #layout-wrapper style to /templates/index.html
<!DOCTYPE html>
<html>
<head>
<style>
/* add layout-wrapper class */
#layout-wrapper {
display: grid;
grid-template-columns: 2fr 10fr;
gap: 8px;
}
</style>
</head>
<body>
<!-- add id="layout-wrapper" -->
<div id="layout-wrapper">
<aside>
<fragment src="https://www.google.com/"></fragment>
</aside>
<main>
<fragment src="https://www.lipsum.com/"></fragment>
</main>
</div>
</body>
</html>Step 6: add new sidebar menu server at port 8081 to server.js
const http = require('http');
const Tailor = require('node-tailor');
const tailor = new Tailor({});
http.createServer(tailor.requestHandler).listen(8080);
// add new sidebar menu server at port 8081
http.createServer((_, res) => {
res.writeHead(200, {
'Content-Type': 'text/html'
})
res.end(`
<nav>
<menu><a href="/index">Home</a></menu>
<menu><a href="/character">Characters</a></menu>
</nav>
`);
}).listen(8081);Step 7: update URL on <aside>
<!DOCTYPE html>
<html>
<head>
<style></style>
</head>
<body>
<aside>
<!-- update URL -->
<fragment src="http://localhost:8081"></fragment>
</aside>
<main>
<fragment src="https://www.lipsum.com/"></fragment>
</main>
</body>
</html>Step 8: create a new template /templates/characters.html by duplicate /templates/index.html file
<html>
<head>
<style></style>
</head>
<body>
<aside>
<fragment src="http://localhost:8081"></fragment>
</aside>
<main>
<fragment src="https://www.blognone.com/"></fragment>
</main>
</body>
</html># Project structure
.
├── ...
├── project_dir # Server directory
│ ├── package.json
│ ├── package-lock.json
| ├── server.js # Server file
│ ├── templates # Templates directory
│ | ├── index.html
│ | ├── characters.html
└── ... Step 9: clone a new fragment from https://github.com/trickpeeraze/line-town-characters
git clone https://github.com/trickpeeraze/line-town-characters.git
npm i
npm run serve# Project structure
.
├── ...
├── project_dir # Server directory
│ ├── ...
└── line-town-characters # Fragment directory
│ ├── ...
└── ... Step 10: try integration using a new fragment at /templates/characters.html
<html>
<head>
<style></style>
</head>
<body>
<aside>
<fragment src="http://localhost:8081"></fragment>
</aside>
<main>
<!-- update URL -->
<fragment src="http://localhost:<PORT>/"></fragment>
</main>
</body>
</html>Step 11: change fragment base path at /line-town-characters/vue.config.js
{
publicPath: 'http://localhost:<PORT>',
}
// if localhost doesn’t work use 127.0.0.1 instead.Step: 12: update routes at /line-town-characters/router/index.js
const routes = [
{
// update path from '/' to '/characters'
path: '/characters',
name: 'sally',
component: SallyView,
},
{
// update path from '/brown' to '/characters/brown'
path: '/characters/brown',
name: 'brown',
component() {
return import(/* webpackChunkName: "brown" */ '../views/BrownView.vue');
},
},
];