You can check demo folder to copy paste full version of this quick guide
├── index.js
└── src
├── api
│ └── product
│ └── 1.0.0
│ └── index.js
└── fragments
└── my-product
└── 1.0.0
└── index.js
/src/fragments/my-product/1.0.0/index.js
module.exports = {
placeholder() {
return 'Loading products...';
},
data(req) {
return new Promise(resolve => {
setTimeout(() => {
resolve({
data: {
name: 'A Book',
price: '2.41 $'
}
});
}, 2000);
});
},
content(req, data) {
return {
main: `<div class="product"><div>${data.name}</div><small>${data.price}</small></div>`
};
}
};
/src/api/product/1.0.0/index.js
module.exports = {
getProduct(req, res){
},
newProduct(req, res){
}
};
/index.js
const PuzzleJs = require('@puzzle-js/core');
const path = require('path');
const gateway = new PuzzleJs.Gateway({
name: "Gateway 1",
fragments: [
{
name: "my-product",
testCookie: "my-product-ab",
version: "1.0.0",
versions: {
"1.0.0": {
assets: [],
dependencies: []
}
},
render: {
url: "/"
}
},
],
api: [
{
name: "product",
testCookie: "my-product-ab",
liveVersion: "1.0.0",
versions: {
"1.0.0": {
endpoints: [
{
method: 'get',
path: "/",
controller: "getProduct"
},
{
method: 'post',
path: "/",
controller: "newProduct"
},
]
}
}
}
],
serverOptions: {
port: 4444
},
url: 'http://localhost:4444',
fragmentsFolder: path.join(__dirname, "./src/fragments")
});
gateway.init(() => {
console.log('Gateway is ready to respond');
});
Now your gateway is ready to respond requests.
Your configuration file will be exported from http://localhost:4444/.
Your fragment will be available for preview at http://localhost:4444/my-product/
├── index.js
└── pages
├── homepage.html
/pages/homepage.html
<script>
module.exports = {
onCreate(){
this.visitCount = 0;
},
onRequest(req){
this.visitCount++;
}
}
</script>
<template>
<html>
<head>
<title>Product</title>
</head>
<body>
<div class="product-container">
<fragment from="Browsing" name="my-product"></fragment>
</div>
<div>
This page is viewed ${this.visitCount} times.
</div>
</body>
</html>
</template>
/index.js
const PuzzleJs = require('@puzzle-js/core');
const path = require('path');
const fs = require('fs');
const storefront = new PuzzleJs.Storefront({
serverOptions: {
port: 4445
},
gateways: [
{
name: 'Browsing',
url: 'http://localhost:4444/',
}
],
pages: [
{
name: 'homepage',
url: '/',
html: fs.readFileSync(path.join(__dirname, './pages/homepage.html'), 'utf8')
}
],
dependencies: []
});
storefront.init(() => {
console.log('Storefront is ready to respond');
});
Now your website is ready. Check out http://localhost:4445/
Please check full guide for all great features PuzzleJs has.