├── .nvmrc
├── docs
    └── images
    │   ├── icon.png
    │   ├── 84xLDr.png
    │   ├── 84xLDr-big.png
    │   ├── 84xLDr-small.png
    │   ├── exadel-logo.png
    │   └── file-routing.png
├── localdev-startup.js
├── config
    ├── instance.js
    ├── service.js
    └── default.js
├── lib
    ├── middleware
    │   ├── routers.js
    │   ├── 404.js
    │   ├── optimization.js
    │   ├── project-middleware.js
    │   ├── static-folders.js
    │   ├── error-handler.js
    │   └── http-proxy.js
    ├── view-engine
    │   ├── prerender-hooks.js
    │   ├── Page.js
    │   └── Component.js
    ├── app.js
    ├── browserSync.js
    ├── helpers.js
    └── routers
    │   └── fsAsPages.js
├── views
    ├── partials
    │   ├── back-button.html
    │   └── invalid-component.html
    ├── 404.html
    ├── layouts
    │   ├── html5.html
    │   └── localdev-theme.html
    ├── error.html
    └── index.html
├── .whitesource
├── CHANGELOG.md
├── .gitignore
├── .editorconfig
├── localdev.js
├── LICENSE
├── controllers
    ├── InnerPages.js
    └── Breadcrumbs.js
├── bin
    └── www
├── package.json
└── README.md


/.nvmrc:
--------------------------------------------------------------------------------
1 | 12.13.0
2 | 


--------------------------------------------------------------------------------
/docs/images/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/exadel-inc/server-sketch/HEAD/docs/images/icon.png


--------------------------------------------------------------------------------
/docs/images/84xLDr.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/exadel-inc/server-sketch/HEAD/docs/images/84xLDr.png


--------------------------------------------------------------------------------
/docs/images/84xLDr-big.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/exadel-inc/server-sketch/HEAD/docs/images/84xLDr-big.png


--------------------------------------------------------------------------------
/docs/images/84xLDr-small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/exadel-inc/server-sketch/HEAD/docs/images/84xLDr-small.png


--------------------------------------------------------------------------------
/docs/images/exadel-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/exadel-inc/server-sketch/HEAD/docs/images/exadel-logo.png


--------------------------------------------------------------------------------
/docs/images/file-routing.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/exadel-inc/server-sketch/HEAD/docs/images/file-routing.png


--------------------------------------------------------------------------------
/localdev-startup.js:
--------------------------------------------------------------------------------
1 | // Simple bootstrap with default options
2 | require('./localdev').start({
3 |   openAfterStart: null
4 | });
5 | 


--------------------------------------------------------------------------------
/config/instance.js:
--------------------------------------------------------------------------------
1 | const merge = require('lodash/merge');
2 | const defaultConfig = require('./default');
3 | 
4 | module.exports = merge({}, defaultConfig);
5 | 


--------------------------------------------------------------------------------
/lib/middleware/routers.js:
--------------------------------------------------------------------------------
1 | const config = require('./../../config/instance');
2 | 
3 | // Bind default router
4 | module.exports = (app) => require(config.baseRouter)(app);
5 | 


--------------------------------------------------------------------------------
/views/partials/back-button.html:
--------------------------------------------------------------------------------
1 | <div class="text-center back-btn">
2 |   <a class="btn btn-primary" href="javascript: void 0" role="button"
3 |      onclick="window.history.go(-1); return false;">Back</a>
4 | </div>
5 | 


--------------------------------------------------------------------------------
/.whitesource:
--------------------------------------------------------------------------------
 1 | {
 2 |   "scanSettings": {
 3 |     "baseBranches": []
 4 |   },
 5 |   "checkRunSettings": {
 6 |     "vulnerableCheckRunConclusionLevel": "failure",
 7 |     "displayMode": "diff"
 8 |   },
 9 |   "issueSettings": {
10 |     "minSeverityLevel": "LOW"
11 |   }
12 | }


--------------------------------------------------------------------------------
/views/404.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: %%PATH_TO_BUILTIN_VIEWS%%/layouts/localdev-theme.html
 3 | ---
 4 | 
 5 | {{##body:
 6 | <h1 class="text-center">😯 404 😯</h1>
 7 | <h2 class="text-center">Page not found </h2>
 8 | {{= partial('./partials/back-button.html') }}
 9 | #}}
10 | 
11 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | ## [1.0.0](https://github.com/exadel-inc/esl/compare/v0.6.0...v1.0.0) (2025-02-21)
2 | 
3 | Bump inner dependency versions and resolve npm vulnerability issues.
4 | 
5 | Minimum required Node.js version is 20.0.0.
6 | 
7 | ### ⚠ BREAKING CHANGES
8 | * Drop support for Node <=18
9 | 


--------------------------------------------------------------------------------
/views/layouts/html5.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="{{= layout.lang || 'en' }}">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>{{= page.getTitle(layout.title) || 'Home' }}</title>
 6 |   {{= layout.head || '' }}
 7 | </head>
 8 | <body>
 9 | {{= layout.body }}
10 | </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/lib/middleware/404.js:
--------------------------------------------------------------------------------
 1 | module.exports = (app) => {
 2 | 
 3 |   // catch 404 and forward to error handler
 4 |   app.use((req, res, next) => {
 5 |     const err = new Error('Not Found'); // Delegating to regular "error-handler.js" middleware
 6 |     err.status = 404;
 7 |     next(err);
 8 |   });
 9 | 
10 | };
11 | 


--------------------------------------------------------------------------------
/views/error.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: %%PATH_TO_BUILTIN_VIEWS%%/layouts/localdev-theme.html
 3 | ---
 4 | 
 5 | {{##body:
 6 | <h1 class="text-center">Unknown Error</h1>
 7 | <h5>{{= page.data.message }}</h5>
 8 | <hr/>
 9 | <pre>
10 |   {{= page.data.stack }}
11 | </pre>
12 | <hr/>
13 | {{= partial('./partials/back-button.html') }}
14 | #}}
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Ignore IDE and Operating System artifacts
 2 | .idea
 3 | .classpath
 4 | .metadata
 5 | .project
 6 | .settings
 7 | maven-eclipse.xml
 8 | *.iml
 9 | *.ipr
10 | *.iws
11 | .DS_Store
12 | target
13 | Author
14 | *.diff
15 | 
16 | # Temp files
17 | *.log
18 | .gitconfig
19 | .temp/
20 | node_modules/
21 | package-lock\.json
22 | 
23 | # Sonar Related
24 | .scannerwork
25 | *sonar*.*
26 | 


--------------------------------------------------------------------------------
/lib/middleware/optimization.js:
--------------------------------------------------------------------------------
 1 | const { optimization, cacheTime } = require('./../../config/instance');
 2 | const compression = require('compression');
 3 | 
 4 | // Caching
 5 | module.exports = (app) => {
 6 |   if (optimization) {
 7 |     app.use(compression());
 8 |     app.set('view cache', true);
 9 |     app.get(/.*\.html$/, (request, response, next) => {
10 |       response.header('Cache-Control', `max-age=${cacheTime * 60}, must-revalidate`);
11 |       next();
12 |     });
13 |   }
14 | };
15 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # EditorConfig helps developers define and maintain consistent
 2 | # coding styles between different editors and IDEs
 3 | # editorconfig.org
 4 | 
 5 | root = true
 6 | 
 7 | 
 8 | [*]
 9 | 
10 | # Change these settings to your own preference
11 | indent_style = space
12 | indent_size = 2
13 | 
14 | # We recommend you to keep these unchanged
15 | end_of_line = lf
16 | charset = utf-8
17 | trim_trailing_whitespace = true
18 | insert_final_newline = true
19 | 
20 | [*.md]
21 | trim_trailing_whitespace = false
22 | 


--------------------------------------------------------------------------------
/lib/middleware/project-middleware.js:
--------------------------------------------------------------------------------
 1 | const glob = require('glob');
 2 | const config = require('./../../config/instance');
 3 | const { serverRoot } = require('./../helpers');
 4 | 
 5 | module.exports = (app) => {
 6 | 
 7 |   // Install user's middleware
 8 |   config.middleware && glob.sync(config.middleware, {
 9 |     cwd: serverRoot,
10 |     absolute: true
11 |   }).forEach((modulePath) => {
12 |     try {
13 |       require(modulePath)(app);
14 |     } catch (e) {
15 |       console.error(`Some problems with middleware: ${modulePath}. Reason: ${e.message}`);
16 |     }
17 |   });
18 | 
19 | };
20 | 


--------------------------------------------------------------------------------
/lib/middleware/static-folders.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const config = require('./../../config/instance');
 3 | const { resolveServerPath } = require('./../helpers');
 4 | 
 5 | module.exports = (app) => {
 6 | 
 7 |   // Setup folder with static files (assets)
 8 |   config.public && config.public.forEach((folder) => {
 9 |     folder = resolveServerPath(folder);
10 |     if (config.optimization) {
11 |       app.use(express.static(folder, { maxAge: config.cacheTime * 60 * 1000 })); // Cache time
12 |     } else {
13 |       app.use(express.static(folder));
14 |     }
15 |   });
16 | 
17 | };
18 | 


--------------------------------------------------------------------------------
/lib/middleware/error-handler.js:
--------------------------------------------------------------------------------
 1 | const { findView, renderPage } = require('./../helpers');
 2 | 
 3 | module.exports = (app) => {
 4 | 
 5 |   // error handler
 6 |   app.use((err, request, response, next) => {
 7 |     response.locals.message = err.message;
 8 |     response.locals.error = err;
 9 | 
10 |     // render the error page
11 |     response.status(err.status || 500);
12 |     const customErrorRendition = findView(`${err.status}.html`); // Try to find template page for specific error
13 |     renderPage(request, response, customErrorRendition || 'error', err); // Render Error page :)
14 |   });
15 | 
16 | };
17 | 


--------------------------------------------------------------------------------
/views/partials/invalid-component.html:
--------------------------------------------------------------------------------
 1 | <div class="alert alert-danger">
 2 |   <h4>Component Error</h4>
 3 |   <h5>{{= data.message }} (<a href="javascript: void 0;"
 4 |                               onclick="this.parentElement.nextElementSibling.removeAttribute('style');">Show more
 5 |     details</a>)</h5>
 6 |   <div style="display: none">
 7 |     <h6>Details:</h6>
 8 |     <ul>
 9 |       <li><strong>Component: </strong>{{= component.name }}</li>
10 |       <li><strong>Options: </strong>{{= JSON.stringify(component.options) }}</li>
11 |     </ul>
12 |     <div>
13 |       <h6>Call stack:</h6>
14 |       <pre>{{= data.stack }} </pre>
15 |     </div>
16 |   </div>
17 | 
18 | </div>
19 | 


--------------------------------------------------------------------------------
/localdev.js:
--------------------------------------------------------------------------------
 1 | exports.start = (serverConfig = {}) => {
 2 |   require('./config/service').createConfiguration(serverConfig);
 3 | 
 4 |   // Bootstrap
 5 |   require('./bin/www');
 6 | 
 7 |   const config = require('./config/instance');
 8 |   // Setup browser sync integration
 9 |   if (config.browserSync) {
10 |     require('./lib/browserSync').setupBrowserSync(config);
11 |   }
12 | 
13 |   // Open page. (if enabled browserSync integration, then browserSync will open page)
14 |   if (config.openAfterStart && (!config.browserSync || config.browserSync.open === false)) {
15 |     setTimeout(() => {
16 |       require('better-opn')(config.openAfterStart);
17 |     }, 500);
18 |   }
19 | 
20 | };
21 | 


--------------------------------------------------------------------------------
/views/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: %%PATH_TO_BUILTIN_VIEWS%%/layouts/localdev-theme.html
 3 | ---
 4 | 
 5 | {{##body:
 6 | 
 7 | <h1 class="text-center">{{= page.getPageTitle(layout.title) || 'Home' }}</h1>
 8 | 
 9 | <hr/>
10 | {{ let childPages = page.invokeController('InnerPages', page.location.pathname); }}
11 | {{? childPages && childPages.length }}
12 | <ul class="nav flex-column">
13 |   {{~ childPages :childPage}}
14 |   <li class="nav-item">
15 |     <a href="{{= page.resolveURL(childPage.href) }}" class="nav-link">
16 |       {{= childPage.title }}
17 |     </a>
18 |   </li>
19 |   {{~}}
20 | </ul>
21 | {{??}}
22 | <h5>No pages</h5>
23 | {{?}}
24 | 
25 | <hr/>
26 | 
27 | {{= partial('./partials/back-button.html') }}
28 | 
29 | #}}
30 | 


--------------------------------------------------------------------------------
/lib/view-engine/prerender-hooks.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const config = require('./../../config/instance');
 3 | 
 4 | module.exports = {
 5 |   // Simple wrapper to replace placeholders in HTML pages with some constants
 6 |   process: (content = '', templateOptions = {}) => {
 7 |     const { file, options } = templateOptions;
 8 |     return content.replace(/%%([\s\S]*?)%%/g, (pattern, hookName) => {
 9 |       try {
10 |         return module.exports[hookName]({ file, content, pattern, options });
11 |       } catch (e) {
12 |         return pattern;
13 |       }
14 |     });
15 |   },
16 |   PATH_TO_VIEWS: (options) => {
17 |     const file = path.dirname(options.file);
18 |     return path.relative(file, config.serverViews);
19 |   },
20 |   PATH_TO_BUILTIN_VIEWS: (options) => {
21 |     const file = path.dirname(options.file);
22 |     return path.relative(file, config.localViews);
23 |   }
24 | };
25 | 


--------------------------------------------------------------------------------
/lib/app.js:
--------------------------------------------------------------------------------
 1 | const config = require('./../config/instance');
 2 | const express = require('express');
 3 | const engine = require('express-dot-engine');
 4 | const { serverRoot } = require('./helpers');
 5 | 
 6 | const app = express(); // Create express app
 7 | global.SERVER_ROOT = serverRoot; // Path to server root folder
 8 | 
 9 | // view engine setup
10 | engine.settings.dot = config.doT; // Configure doT.js engine (for pages)
11 | app.engine('html', engine.__express);
12 | app.set('views', config.views);
13 | app.set('view engine', 'html');
14 | 
15 | require('./middleware/optimization')(app); // Configure folders with static
16 | require('./middleware/static-folders')(app); // Configure folders with static
17 | require('./middleware/project-middleware')(app); // Install original project callbacks
18 | require('./middleware/routers')(app); // Setup base routers
19 | require('./middleware/http-proxy')(app); // Setup proxy requests
20 | require('./middleware/404')(app); // setup 404 handler
21 | require('./middleware/error-handler')(app); // Handle errors
22 | 
23 | module.exports = app;
24 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Exadel
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/controllers/InnerPages.js:
--------------------------------------------------------------------------------
 1 | const { startCase } = require('lodash');
 2 | const { dirname } = require('path');
 3 | const config = require('./../config/instance');
 4 | const glob = require('glob');
 5 | 
 6 | /**
 7 |  * Get list of sub pages for current request (usefull with default routing)
 8 |  */
 9 | 
10 | module.exports = function (folderPath) {
11 |   if (folderPath.endsWith('.html')) {
12 |     folderPath = dirname(folderPath);
13 |     if (!folderPath.endsWith('/')) {
14 |       folderPath += '/';
15 |     }
16 |   }
17 |   return glob.sync('*', {
18 |     cwd: `${config.serverViews}/pages/${folderPath}`, // Get all sub folders and HTML pages
19 |     mark: true
20 |   }).sort().map((file) => {
21 |     if (file.startsWith('_')) {
22 |       return null; // Ignore files, started with "_" (but they are available directly)
23 |     }
24 |     const isDir = file.endsWith('/');
25 |     return {
26 |       title: startCase(file.replace(/\.html$/, '')), // User friendly format
27 |       isDir: isDir,
28 |       href: isDir ? `${folderPath}${file}${config.defaultPageUrl}` : `${folderPath}${file}` // link to page
29 |     };
30 |   }).filter(Boolean);
31 | };
32 | 


--------------------------------------------------------------------------------
/controllers/Breadcrumbs.js:
--------------------------------------------------------------------------------
 1 | const { startCase } = require('lodash');
 2 | const config = require('./../config/instance');
 3 | 
 4 | 
 5 | /**
 6 |  * Get list of breadcrumbs for current request  (usefull with default routing)
 7 |  */
 8 | module.exports = function () {
 9 |   // Available as "page._breadcrumbs"
10 |   if (!this._breadcrumbs) {
11 | 
12 |     let href = '/';
13 |     const urlPathname = this.location.pathname;
14 |     // Split page URL by "/" and then generate links and titles for each item
15 |     this._breadcrumbs = urlPathname.split('/').map((urlPart) => {
16 |       if (urlPart) {
17 |         const htmlPage = urlPart.endsWith('.html') ? urlPart : config.defaultPageUrl;
18 | 
19 |         if (!urlPart.endsWith('.html')) {
20 |           href += `${urlPart}/`;
21 |         } else if (htmlPage === config.defaultPageUrl) {
22 |           return null;
23 |         }
24 | 
25 |         return {
26 |           title: startCase(urlPart.replace(/\.html$/, '')), // User friendly format
27 |           href: href + htmlPage
28 |         };
29 | 
30 |       } else {
31 |         // Root
32 |         return {
33 |           title: 'Home',
34 |           href: '/'
35 |         };
36 |       }
37 |     }).filter(Boolean);
38 |   }
39 | };
40 | 


--------------------------------------------------------------------------------
/config/service.js:
--------------------------------------------------------------------------------
 1 | const merge = require('lodash/merge');
 2 | const once = require('lodash/once');
 3 | const config = require('./instance');
 4 | 
 5 | exports.createConfiguration = once((serverConfig = {}) => {
 6 | 
 7 |   merge(config, serverConfig);
 8 | 
 9 |   const { resolveServerPath, resolveLocalPath, template, normalizePort } = require('./../lib/helpers');
10 | 
11 |   const serverViews = resolveServerPath(config.views);
12 |   const localViews = resolveLocalPath('views/');
13 | 
14 |   merge(config, {
15 |     serverViews, // user's views
16 |     localViews, // server local views
17 |     views: [ // merge built-in page views and user's
18 |       serverViews,
19 |       localViews
20 |     ],
21 |     controllers: [ // merge built-in page controllers and user's
22 |       resolveServerPath(config.controllers),
23 |       resolveLocalPath('./controllers')
24 |     ],
25 |     baseRouter: resolveServerPath(config.baseRouter) || resolveLocalPath('lib/routers/fsAsPages'), // setup base router
26 |     pageClass: resolveServerPath(config.pageClass) || resolveLocalPath('lib/view-engine/Page'), // setup base page class
27 |     componentClass: resolveServerPath(config.componentClass) || resolveLocalPath('lib/view-engine/Component'), // setup base component class
28 |     'public': config.public.concat(config.jscssDestFolders || []), // config for static folders (return without preprocessing)
29 |   });
30 | 
31 |   config.openAfterStart = template(config.openAfterStart) || config.openAfterStart;
32 | 
33 |   config.port = normalizePort(config.port);
34 | });
35 | 


--------------------------------------------------------------------------------
/bin/www:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | 
 3 | /**
 4 |  * Module dependencies.
 5 |  */
 6 | require('./../config/service').createConfiguration();
 7 | 
 8 | const config = require('./../config/instance');
 9 | const { port, listenDomain } = config;
10 | const app = require('../lib/app');
11 | const http = require('http');
12 | 
13 | // server config stored as a global variable. Required for templates
14 | global.SERVER_CONFIG = config;
15 | 
16 | /**
17 |  * Setup port
18 |  */
19 | app.set('port', port);
20 | 
21 | /**
22 |  * Create HTTP server.
23 |  */
24 | const server = http.createServer(app);
25 | 
26 | /**
27 |  * Listen on provided port, on all network interfaces.
28 |  */
29 | 
30 | listenDomain ? server.listen(port, listenDomain) : server.listen(port);
31 | 
32 | server.on('error', onError);
33 | server.on('listening', onListening);
34 | 
35 | /**
36 |  * Event listener for HTTP server "error" event.
37 |  */
38 | 
39 | function onError(error) {
40 |   if (error.syscall !== 'listen') {
41 |     throw error;
42 |   }
43 | 
44 |   // handle specific listen errors with friendly messages
45 |   switch (error.code) {
46 |     case 'EACCES':
47 |       console.error(`${port} requires elevated privileges`);
48 |       process.exit(1);
49 |       break;
50 |     case 'EADDRINUSE':
51 |       console.error(`${port} is already in use`);
52 |       process.exit(1);
53 |       break;
54 |     default:
55 |       throw error;
56 |   }
57 | }
58 | 
59 | 
60 | /**
61 |  * Event listener for HTTP server "listening" event.
62 |  */
63 | 
64 | function onListening() {
65 |   const addr = server.address();
66 |   const bind = typeof addr === 'string' ? 'pipe ' + addr : 'port ' + addr.port;
67 |   console.log('Listening on ' + bind);
68 | }
69 | 


--------------------------------------------------------------------------------
/lib/middleware/http-proxy.js:
--------------------------------------------------------------------------------
 1 | const httpProxy = require('express-http-proxy');
 2 | const template = require('lodash/template');
 3 | const url = require('url');
 4 | let { proxy } = require('./../../config/instance');
 5 | 
 6 | const convertToExtFormat = (simpleFormat) => {
 7 | 
 8 |   const extFormat = {
 9 |     defaultHost: simpleFormat.defaultHost,
10 |     rules: []
11 |   };
12 | 
13 |   for (const from in simpleFormat) {
14 |     if (simpleFormat.hasOwnProperty(from) && from !== 'defaultHost') {
15 |       extFormat.rules.push({
16 |         'from': from,
17 |         'to': simpleFormat[from]
18 |       });
19 |     }
20 |   }
21 | 
22 |   return extFormat;
23 | };
24 | 
25 | 
26 | module.exports = (app) => {
27 | 
28 |   if (proxy) {
29 |     // Possible to use mapping for proxy.rules config
30 |     if (!Array.isArray(proxy.rules)) proxy = convertToExtFormat(proxy);
31 | 
32 |     const defaultHost = url.parse(proxy.defaultHost || '');
33 |     const fakeUserResDecorator = (proxyRes, proxyResData) => proxyResData;
34 |     const fakeUserResHeaderDecorator = (headers) => headers;
35 | 
36 |     proxy.rules.forEach(({ from, to, transform, transformHeaders }) => {
37 |       const parsedTo = url.parse(to);
38 |       const hostObject = parsedTo.host ? parsedTo : defaultHost;
39 |       const https = hostObject.protocol === 'https:';
40 | 
41 |       // Just to delegate options to 'express-http-proxy'
42 |       app.use(from, httpProxy(hostObject.host, {
43 |         https,
44 |         proxyReqPathResolver: template(to),
45 |         userResDecorator: transform || fakeUserResDecorator,
46 |         userResHeaderDecorator: transformHeaders || fakeUserResHeaderDecorator
47 |       }));
48 | 
49 |     });
50 | 
51 |   }
52 | };
53 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@exadel/server-sketch",
 3 |   "version": "1.0.0",
 4 |   "description": "Fast, flexible & extensible web-server for Component-Based architecture/applications. Easy way to use with AEM (Adobe Experience Manager (TM)). Best for local development. Helps developers quickly provide POC & demo for business. Based on Express server. Supports: file based structure, express server, doT.js templates, components, themes etc.",
 5 |   "keywords": [
 6 |     "ui",
 7 |     "frontend",
 8 |     "server",
 9 |     "ui.frontend",
10 |     "sketch",
11 |     "server-sketch",
12 |     "AEM",
13 |     "backend",
14 |     "front-end",
15 |     "Adobe Experience Manager",
16 |     "express",
17 |     "web server",
18 |     "express.js",
19 |     "simple server",
20 |     "fast server",
21 |     "flexible server",
22 |     "quick start",
23 |     "bootstrap",
24 |     "http",
25 |     "http server",
26 |     "static",
27 |     "dotjs",
28 |     "dot.js",
29 |     "doT",
30 |     "templates",
31 |     "components",
32 |     "pages",
33 |     "themes",
34 |     "OOTB",
35 |     "DMTP",
36 |     "exadel",
37 |     "Exadel Inc."
38 |   ],
39 |   "main": "localdev.js",
40 |   "scripts": {
41 |     "test": "echo \"Error: no test specified\" && exit 1"
42 |   },
43 |   "author": "Dzianis Mantsevich <dmantsevich@exadel.com>",
44 |   "license": "MIT",
45 |   "repository": {
46 |     "type": "git",
47 |     "url": "https://github.com/exadel-inc/server-sketch.git"
48 |   },
49 |   "engines": {
50 |     "node": ">=20.0.0",
51 |     "npm": ">=9.0.0"
52 |   },
53 |   "dependencies": {
54 |     "better-opn": "^3.0.2",
55 |     "browser-sync": "^3.0.4",
56 |     "compression": "^1.8.1",
57 |     "express": "^4.21.2",
58 |     "express-dot-engine": "^1.0.8",
59 |     "express-http-proxy": "^2.1.2",
60 |     "glob": "^11.0.3",
61 |     "lodash": "^4.17.21"
62 |   }
63 | }
64 | 


--------------------------------------------------------------------------------
/lib/browserSync.js:
--------------------------------------------------------------------------------
 1 | const browserSync = require('browser-sync').create('server-sketch');
 2 | const { debounce, merge } = require('lodash');
 3 | const { extname } = require('path');
 4 | 
 5 | function watch(pattern, cb) {
 6 |   // simple wrapper on browserSync.watch
 7 |   (pattern && pattern.length) && browserSync.watch(pattern, {}).on('change', debounce(() => cb(), 300));
 8 |   return watch;
 9 | }
10 | 
11 | exports.setupBrowserSync = (config) => {
12 |   // Internal component files
13 |   const templates = [
14 |     `${config.components}**/*.html`, // component's templates
15 |     `${config.serverRoot}views/pages/**/*.html`, // pages
16 |     `${config.components}**/data-*.json`, // component's data
17 |     `${config.components}**/config.json` // component's configs
18 |   ];
19 |   return new Promise((resolve) => {
20 |     const browserSyncConfig = config.browserSync;
21 |     const watchingFiles = templates
22 |       .concat(config.jscssDestFolders || [])
23 |       .concat(browserSyncConfig.watchAndReload || []);
24 | 
25 |     const css = [];
26 |     const reload = [];
27 |     watchingFiles.forEach((dest) => {
28 |       const ext = extname(dest);
29 |       if (ext === '.css') { // watching css file
30 |         css.push(dest);
31 |       } else if (!ext) { // is folder. split with css file or not
32 |         css.push(`${dest}/**/*.css`);
33 |         reload.push(`${dest}/**/*.!(css)`);
34 |       } else {
35 |         reload.push(dest); // other files
36 |       }
37 |     });
38 | 
39 |     watch(reload, browserSync.reload); // full page reload
40 |     watch(css, () => browserSync.reload('*.css')); // reload css files without full page reload
41 | 
42 |     browserSync.init(merge({
43 |       open: !!config.openAfterStart,
44 |       startPath: config.openAfterStart ? new URL(config.openAfterStart).pathname : '/',
45 |       ui: false,
46 |       proxy: `http://localhost:${config.port}`
47 |     }, browserSyncConfig), resolve);
48 | 
49 |   });
50 | };
51 | 


--------------------------------------------------------------------------------
/lib/helpers.js:
--------------------------------------------------------------------------------
 1 | const template = require('lodash/template');
 2 | const path = require('path');
 3 | const config = require('./../config/instance');
 4 | const fs = require('fs');
 5 | 
 6 | // Resolve file in node process folder
 7 | exports.resolvePath = (file) => path.resolve(`${process.cwd()}/${file}`);
 8 | 
 9 | // path to user server root folder
10 | exports.serverRoot = exports.resolvePath(config.serverRoot);
11 | 
12 | // Resolve file in user /server
13 | exports.resolveServerPath = (file) => file ? path.resolve(`${exports.serverRoot}/${file}`) : null;
14 | 
15 | // Resolve file in "server-sketch"
16 | exports.resolveLocalPath = (file) => file ? path.resolve(`${__dirname}/../`, file) : null;
17 | 
18 | // Compile template string and fill config data
19 | exports.template = (tpl, data = config) => typeof tpl === 'string' ? template(tpl)(data) : null;
20 | 
21 | // Find Page/Layout template in views
22 | exports.findView = (view) => {
23 |   view = exports.findFileInFolders(view, config.views);
24 |   if (view) {
25 |     return view.replace(/\.html$/, '');
26 |   }
27 | };
28 | 
29 | // Find first folder with file
30 | exports.findFileInFolders = (file, folders = []) => {
31 | 
32 |   let fullPath = null; // File doesn't exist
33 |   folders.find((folder) => {
34 |     if (fs.existsSync(`${folder}/${file}`)) {
35 |       fullPath = `${folder}/${file}`;
36 |       return true;
37 |     }
38 |     return false;
39 |   });
40 | 
41 |   return fullPath;
42 | };
43 | 
44 | // Initiate page rendering
45 | exports.renderPage = (request, response, view, data = {}) => {
46 |   const Page = require(config.pageClass); // By default ./lib/Page.js
47 |   const page = new Page({ request, response, view, data });
48 |   response.render(view.replace(/\.html$/, ''), page); // render HTML page and send response to user
49 | };
50 | 
51 | // Normalize a port into a number, string, or false.
52 | exports.normalizePort = (val) => {
53 |   const port = parseInt(val, 10);
54 |   if (isNaN(port)) {
55 |     return val;
56 |   }
57 |   if (port >= 0) {
58 |     return port;
59 |   }
60 |   return false;
61 | };
62 | 


--------------------------------------------------------------------------------
/config/default.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   openAfterStart: 'http://localhost:<%= port %>/index.html', // Automatically open URL after web-server will be started
 3 |   baseRouter: null, // Relative (to ${serverRoot} option) path to base router. It disables default file-folder routing. Should exports function. First argument will be express app instance
 4 |   port: 3000, // Port for web server
 5 |   optimization: false, // Enable optimizations. Cache + gzip + view cache + runtime cache for base router
 6 |   cacheTime: 120, // Max live cache
 7 |   listenDomain: null,
 8 |   get doT() { // Configuration for templates
 9 |     return {
10 |       evaluate: /\{\{([\s\S]+?)\}\}/g,
11 |       interpolate: /\{\{=([\s\S]+?)\}\}/g,
12 |       encode: /\{\{!([\s\S]+?)\}\}/g,
13 |       use: /\{\{#([\s\S]+?)\}\}/g,
14 |       define: /\{\{##\s*([\w\.$]+)\s*(\:|=)([\s\S]+?)#\}\}/g,
15 |       conditional: /\{\{\?(\?)?\s*([\s\S]*?)\s*\}\}/g,
16 |       iterate: /\{\{~\s*(?:\}\}|([\s\S]+?)\s*\:\s*([\w$]+)\s*(?:\:\s*([\w$]+))?\s*\}\})/g,
17 |       varname: 'layout, partial, locals, page',
18 |       strip: false,
19 |       append: true,
20 |       selfcontained: false
21 |     }
22 |   },
23 |   defaultPageUrl: 'index.html', // Navigate to that page if ".html" doesn't exists in the url.
24 |   defaultPageRendition: 'index.html', // Default page view for URLs: /path/to/index.html. You can override it with: server/views/index.html
25 | 
26 |   // custom folders
27 |   serverRoot: 'server/', // Server ROOT folder.
28 |   views: 'views/', // Path to directory with views. Relative to Server ROOT
29 |   controllers: 'controllers/', // Folder with page controllers. Relative to Server ROOT
30 |   components: 'src/', // Path to components. Relative to Project ROOT
31 |   middleware: 'middleware/*.js', // Middleware for Express. Can be array. Js files should export function. Function will retrieve as a first argument: express app instance
32 |   public: [ // Path to static files
33 |     'static/'
34 |     // config.jscssDestFolders will be added
35 |   ],
36 |   jscssDestFolders: [ // Path to generated js & css files(used by browserSync & public). Relative to server
37 |     '../dest/',
38 |     '../.temp/dest/'
39 |   ],
40 |   browserSync: {
41 |     port: 3001,
42 |     watchAndReload: [
43 |       // config.jscssDestFolders will be added
44 |     ]
45 |   }
46 | };
47 | 


--------------------------------------------------------------------------------
/lib/routers/fsAsPages.js:
--------------------------------------------------------------------------------
 1 | const fsAsPagesRouter = require('express').Router();
 2 | 
 3 | module.exports = (app) => app.use('/', fsAsPagesRouter);
 4 | 
 5 | module.exports.router = fsAsPagesRouter;
 6 | 
 7 | 
 8 | const config = require('./../../config/instance');
 9 | const url = require('url');
10 | const path = require('path');
11 | 
12 | const DEFAULT_URL_PAGE = config.defaultPageUrl;
13 | const DEFAULT_PAGE_RENDITION = config.defaultPageRendition;
14 | 
15 | const { findView, renderPage } = require('./../helpers');
16 | 
17 | // Cache HTML Response
18 | if (config.optimization) {
19 |   let _runtimeCache = {};
20 |   fsAsPagesRouter.get(/.*\.html$/, (request, response, next) => {
21 |     const _send = response.send;
22 |     Object.keys(_runtimeCache).length > 50 && (_runtimeCache = {}); // Max 50 pages will be cached
23 |     if (_runtimeCache[request.originalUrl]) {
24 |       _send.call(response, _runtimeCache[request.originalUrl]);
25 |       return;
26 |     } else {
27 |       response.send = function (body) {
28 |         _runtimeCache[request.originalUrl] = body;
29 |         _send.call(response, body);
30 |       };
31 |     }
32 |     next();
33 |   });
34 | 
35 |   setInterval(() => _runtimeCache = {}, config.cacheTime * 60 * 1000);
36 | }
37 | 
38 | 
39 | // Navigator for HTML files
40 | fsAsPagesRouter.get(/.*\.html$/, (req, res, next) => {
41 |   try {
42 |     const params = url.parse(req.url, true);
43 |     const pathname = params.pathname;
44 |     const pageFolder = path.dirname(pathname);
45 |     const pageFileName = path.basename(pathname);
46 | 
47 |     let rendition = findPage(pathname);
48 |     if (!rendition && pageFileName === DEFAULT_URL_PAGE && findPage(pageFolder)) { // Folder exists, use default rendition
49 |       rendition = DEFAULT_PAGE_RENDITION; // Use default index file for folders
50 |     }
51 | 
52 |     if (rendition) {
53 |       renderPage(req, res, rendition); // Render Page :)
54 |       return;
55 |     }
56 | 
57 |     next();
58 |   } catch (e) {
59 |     next(e);
60 |   }
61 | });
62 | 
63 | // Redirect to ROOT
64 | fsAsPagesRouter.get('/', (req, res, next) => res.redirect(301, `/${DEFAULT_URL_PAGE}`));
65 | 
66 | // Handler for non .html requests
67 | fsAsPagesRouter.get('/*', (req, res, next) => {
68 |   const urlParams = url.parse(req.url, true);
69 |   const pathname = urlParams.pathname;
70 | 
71 |   // If folders exists, then redirect to index
72 |   if (!pathname.endsWith('.html') && findPage(pathname)) {
73 |     urlParams.pathname = `${urlParams.pathname}/${DEFAULT_URL_PAGE}`.replace(/\/\/+/g, '/');
74 |     res.redirect(301, url.format(urlParams));
75 |     return;
76 |   }
77 | 
78 |   next();
79 | });
80 | 
81 | function findPage(page) {
82 |   return findView(`/pages/${page}`);
83 | }
84 | 
85 | 


--------------------------------------------------------------------------------
/views/layouts/localdev-theme.html:
--------------------------------------------------------------------------------
  1 | ---
  2 | layout: ./html5.html
  3 | ---
  4 | 
  5 | {{##head:
  6 | <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
  7 |       integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  8 | <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  9 |         integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
 10 |         crossorigin="anonymous"></script>
 11 | <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
 12 |         integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
 13 |         crossorigin="anonymous"></script>
 14 | <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
 15 |         integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
 16 |         crossorigin="anonymous"></script>
 17 | <style>
 18 |   /** Custom styles **/
 19 |   body {
 20 |     font-size: 14px;
 21 |   }
 22 | 
 23 |   main.container {
 24 |     padding-top: 30px;
 25 |     padding-bottom: 30px;
 26 |   }
 27 | 
 28 |   .back-btn {
 29 |     margin: 20px 0;
 30 |   }
 31 | 
 32 |   .back-btn a {
 33 |     padding: 0.4rem 5rem;
 34 |   }
 35 | 
 36 |   .breadcrumb-container {
 37 |     background-color: #e9ecef;
 38 |   }
 39 | 
 40 |   .breadcrumb {
 41 |     padding: .75em 0;
 42 |     margin-bottom: 0;
 43 |   }
 44 | 
 45 |   .footer {
 46 |     background-color: #f5f5f5;
 47 |     padding: 15px 0;
 48 |   }
 49 | </style>
 50 | {{= layout.head || '' }}
 51 | #}}
 52 | 
 53 | 
 54 | {{##body:
 55 | <nav aria-label="Main Navigation" class="navbar navbar-expand-md navbar-dark bg-dark">
 56 |   <div class="container">
 57 |     <a class="navbar-brand" href="{{= page.resolveURL('/' + SERVER_CONFIG.defaultPageUrl) }}">server-sketch</a>
 58 |     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
 59 |             aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
 60 |       <span class="navbar-toggler-icon"></span>
 61 |     </button>
 62 | 
 63 |     <div class="collapse navbar-collapse" id="navbarsExampleDefault">
 64 |       <ul class="navbar-nav mr-auto">
 65 |         {{ let rootPages = page.invokeController('InnerPages', '/'); }}
 66 | 
 67 |         {{~ rootPages :innerPage }}
 68 |         <li class="nav-item {{? innerPage.href === page.location.pathname }}active{{?}}">
 69 |           <a class="nav-link" href="{{= page.resolveURL(innerPage.href) }}">{{= innerPage.title }}</a>
 70 |         </li>
 71 |         {{~}}
 72 |       </ul>
 73 |     </div>
 74 |   </div>
 75 | </nav>
 76 | 
 77 | <main role="main" class="container">
 78 |   {{= layout.body }}
 79 | </main>
 80 | 
 81 | {{ page.invokeController('Breadcrumbs'); }}
 82 | <nav class="breadcrumb-container" aria-label="breadcrumb">
 83 |   <div class="container">
 84 |     <ol class="breadcrumb">
 85 |       {{~ page._breadcrumbs :crumb:i}}
 86 |       {{? i === page._breadcrumbs.length - 1 }}
 87 |       <li class="breadcrumb-item active">{{= crumb.title }}</li>
 88 |       {{??}}
 89 |       <li class="breadcrumb-item "><a href="{{= page.resolveURL(crumb.href) }}">{{= crumb.title }}</a></li>
 90 |       {{?}}
 91 |       {{~}}
 92 |     </ol>
 93 |   </div>
 94 | </nav>
 95 | 
 96 | <footer class="footer">
 97 |   <div class="container">
 98 |     <div class="text-center">
 99 |       <div class="text-muted">© 2020 Exadel, Inc</div>
100 |       <div class="text-muted">mail: <a href="mailto:dmantsevich@exadel.com">dmantsevich@exadel.com</a></div>
101 |     </div>
102 |   </div>
103 | </footer>
104 | 
105 | #}}
106 | 


--------------------------------------------------------------------------------
/lib/view-engine/Page.js:
--------------------------------------------------------------------------------
  1 | const url = require('url');
  2 | const fs = require('fs');
  3 | const path = require('path');
  4 | const _ = require('lodash');
  5 | const config = require('./../../config/instance');
  6 | const { findFileInFolders, resolveServerPath } = require('./../helpers');
  7 | 
  8 | // Currently doT.js express view engine doesn't support class instance
  9 | function Page(options) {
 10 |   this.request = options.request;
 11 |   this.response = options.response;
 12 |   this.view = options.view;
 13 |   this.data = options.data || {};
 14 |   this.location = url.parse(this.request.originalUrl, true);
 15 | 
 16 |   !this.view.endsWith('.html') && (this.view += '.html');
 17 | }
 18 | 
 19 | Page.prototype = {
 20 | 
 21 |   getTemplate(filename, options, callback) {
 22 |     const isAsync = callback && typeof callback === 'function';
 23 |     !filename.endsWith('.html') && (filename += '.html');
 24 | 
 25 |     if (!isAsync) return processPageTemplate(fs.readFileSync(filename, 'utf8'), filename, options);
 26 | 
 27 |     // async
 28 |     fs.readFile(filename, 'utf8', (err, str) => {
 29 |       if (err) {
 30 |         callback(new Error(`Failed to open view file (${filename})`));
 31 |         return;
 32 |       }
 33 |       try {
 34 |         str = processPageTemplate(str, filename, options);
 35 |         callback(null, str);
 36 |       } catch (processErr) {
 37 |         callback(processErr);
 38 |       }
 39 |     });
 40 |   },
 41 | 
 42 |   // Helpers
 43 |   getPageTitle(layoutTitle) {
 44 |     if (layoutTitle) {
 45 |       return layoutTitle;
 46 |     } else {
 47 |       let pathname = this.location.pathname;
 48 |       if (pathname.endsWith(config.defaultPageUrl)) {
 49 |         pathname = path.dirname(pathname);
 50 |       } else {
 51 |         pathname = pathname.replace(/\.html$/, '');
 52 |       }
 53 |       return _.startCase(_.last(pathname.split('/')));
 54 |     }
 55 |   },
 56 | 
 57 |   getTitle(layoutTitle) {
 58 |     if (layoutTitle) {
 59 |       return layoutTitle;
 60 |     } else {
 61 |       let pathname = this.location.pathname;
 62 |       if (pathname.endsWith(config.defaultPageUrl)) {
 63 |         pathname = path.dirname(pathname);
 64 |       } else {
 65 |         pathname = pathname.replace(/\.html$/, '');
 66 |       }
 67 |       return _.compact(pathname.split('/').reverse().map(_.startCase)).join(' | ');
 68 |     }
 69 |   },
 70 | 
 71 |   resolveURL(pathname = '') {
 72 |     if (pathname.startsWith('/')) {
 73 |       const folder = path.dirname(this.location.pathname);
 74 |       return `./${path.posix.relative(folder, pathname)}`;
 75 |     }
 76 |     return pathname;
 77 |   },
 78 | 
 79 |   invokeController(controllerName, ...args) {
 80 |     try {
 81 |       let controller = findFileInFolders(`${controllerName}.js`, config.controllers);
 82 |       if (!controller) {
 83 |         throw new Error(`Can't find files: ${config.controllers.map((folder) => folder + '/' + controllerName + '.js')}`);
 84 |       }
 85 |       controller = require(controller);
 86 |       if (typeof controller === 'function') return controller.apply(this, args) || '';
 87 |       return '';
 88 |     } catch (e) {
 89 |       throw new Error(`Problems with "${controllerName}" controller. Reason: ${e.message}`);
 90 |     }
 91 |   },
 92 | 
 93 |   getFile(file) {
 94 |     return fs.readFileSync(resolveServerPath(file));
 95 |   },
 96 | 
 97 |   initComponent(component, options) {
 98 |     const Component = require(config.componentClass);
 99 |     return new Component(component, options, this);
100 |   },
101 | 
102 |   renderComponent(component, options) {
103 |     return this.initComponent(component, options).render();
104 |   }
105 | 
106 | };
107 | 
108 | function processPageTemplate(pageTemplate, file, options) {
109 |   return require('./prerender-hooks').process(pageTemplate, { file, options });
110 | }
111 | 
112 | module.exports = Page;
113 | 
114 | 


--------------------------------------------------------------------------------
/lib/view-engine/Component.js:
--------------------------------------------------------------------------------
  1 | const fs = require('fs');
  2 | const _ = require('lodash');
  3 | const config = require('./../../config/instance');
  4 | const { resolvePath, resolveLocalPath } = require('./../helpers');
  5 | const prerender = require('./prerender-hooks');
  6 | const doT = require('dot/doT.js');
  7 | const glob = require('glob');
  8 | const path = require('path');
  9 | 
 10 | class Component {
 11 | 
 12 |   constructor(alias, options = {}, context = null) {
 13 |     this.config = {};
 14 |     this.data = {};
 15 |     this.name = alias;
 16 |     this.id = _.uniqueId(alias.replace(/\W/g, '-'));
 17 |     this.options = options;
 18 |     this.context = context;
 19 |     this.error = null;
 20 |     this.componentPath = this.getComponentPath();
 21 | 
 22 |     return this._init() || this;
 23 |   }
 24 | 
 25 |   getComponentPath() {
 26 |     return resolvePath(`${config.components}/${this.name}`);
 27 |   }
 28 | 
 29 |   _init() {
 30 |     try {
 31 | 
 32 |       if (!fs.existsSync(this.componentPath)) {
 33 |         throw new Error(`Component "${this.name}" doesn't exist.`);
 34 |       }
 35 | 
 36 |       const configJSON = this.getConfig();
 37 |       this.config = configJSON;
 38 | 
 39 |       this.evalData();
 40 | 
 41 |       this.view = this._getFile(configJSON.view);
 42 | 
 43 | 
 44 |       if (configJSON.controller) {
 45 |         const controller = _.extend(this, require(this.resolvePath(configJSON.controller)));
 46 |         controller.init && (controller.init());
 47 |         return controller;
 48 |       }
 49 | 
 50 |     } catch (e) {
 51 |       this.onError(`Can't init component: "${this.name}". Error: ${e.message}.`, e);
 52 |     }
 53 |   }
 54 | 
 55 |   evalData() {
 56 |     const { options: { data }, config: configJSON } = this;
 57 | 
 58 |     // Eval data
 59 |     if (!configJSON.ignoreDataProcessing) {
 60 |       if (typeof data === 'string') {
 61 |         if (configJSON.data[data]) {
 62 |           this.data = configJSON.data[data]
 63 |         } else {
 64 |           throw new Error(`Invalid data(value: "${data}") option was provided into the component. Possible values: ${Object.keys(configJSON.data).join(', ') || 'no'}`);
 65 |         }
 66 |       } else if (typeof data === 'object') {
 67 |         this.data = data;
 68 |       } else {
 69 |         this.data = configJSON.data;
 70 |       }
 71 |     } else {
 72 |       this.data = data;
 73 |     }
 74 |   }
 75 | 
 76 |   resolvePath(file) {
 77 |     return `${this.componentPath}/${file}`;
 78 |   }
 79 | 
 80 |   _getFile(file) {
 81 |     try {
 82 |       return fs.readFileSync(this.resolvePath(file), 'utf8');
 83 |     } catch (e) {
 84 |       this.onError(`Can't read file: ${file}. Error: ${e.message}`, e);
 85 |     }
 86 |   }
 87 | 
 88 |   onError(msg, error = new Error()) {
 89 |     error.message = msg;
 90 |     this.error = this.error || error;
 91 |   }
 92 | 
 93 |   getConfig(configFileName = 'config.json') {
 94 |     try {
 95 |       let configFile = prerender
 96 |         .process(this._getFile(configFileName), { file: this.resolvePath(configFileName), options: {} });
 97 | 
 98 |       configFile = JSON.parse(configFile);
 99 |       configFile.data = configFile.data || {};
100 | 
101 |       this._mergeDataFiles(configFile.data);
102 | 
103 |       if (configFile['@extendConfig']) {
104 |         configFile = _.merge({}, this.getConfig(configFile['@extendConfig']), configFile);
105 |       }
106 |       return configFile;
107 |     } catch (e) {
108 |       this.onError(`Can't parse config file: ${configFileName}. Error: ${e.message}`, e);
109 |     }
110 |   }
111 | 
112 |   getDataFile(dataFileName) {
113 |     try {
114 |       let dataFile = prerender
115 |         .process(this._getFile(dataFileName), { file: this.resolvePath(dataFileName), options: {} });
116 | 
117 |       dataFile = JSON.parse(dataFile);
118 | 
119 |       if (dataFile['@extend']) {
120 |         dataFile = _.merge({}, this.getDataFile(dataFile['@extend']), dataFile);
121 |       }
122 |       return dataFile;
123 |     } catch (e) {
124 |       this.onError(`Can't parse data file: ${dataFileName}`, e);
125 |     }
126 |   }
127 | 
128 |   _mergeDataFiles(originalData) {
129 |     glob.sync('./data-*.json', {
130 |       cwd: this.componentPath
131 |     }).forEach((dataFile) => {
132 |       const [, name] = path.basename(dataFile).match(/data-(.+)\.json$/);
133 |       originalData[name] = this.getDataFile(dataFile);
134 |     });
135 |   }
136 | 
137 |   // Rendition methods
138 |   initComponent(alias, options) {
139 |     return new this.constructor(alias, options, this);
140 |   }
141 | 
142 |   renderComponent(alias, options) {
143 |     const component = this.initComponent(alias, options);
144 |     return component.render();
145 |   }
146 | 
147 |   render() {
148 |     if (this.error) {
149 |       return this.renderError(this.error);
150 |     }
151 |     const result = this._compileView();
152 |     return this.error ? this.renderError(this.error) : result;
153 |   }
154 | 
155 |   _compileView(view = this.view, data = this.data, fileName = this.resolvePath(this.config.view)) {
156 |     try {
157 |       const tplsConfig = Object.assign({}, config.doT);
158 |       tplsConfig.varname = `${this.config.var || 'component'}, data, options, page, partial`;
159 |       return doT.template(view, tplsConfig)(this, data, this.options, this._page, this.partial.bind(this));
160 |     } catch (e) {
161 |       this.onError(`Can't compile template: "${fileName}". Error: ${e.message}`, e);
162 |     }
163 |   }
164 | 
165 |   partial(partialPath, data) {
166 |     try {
167 |       return this._compileView(this._getFile(partialPath), data, this.resolvePath(partialPath));
168 |     } catch (e) {
169 |       this.onError(`Can't compile partial: "${partialPath}". Error: ${e.message}`, e);
170 |     }
171 |   }
172 | 
173 |   get _page() {
174 |     let context = this.context;
175 |     while (context && !context.location) context = context.context;
176 |     return context || null;
177 |   }
178 | 
179 |   renderError(error) {
180 |     try {
181 |       const standartErrorView = resolveLocalPath('views/partials/invalid-component.html');
182 |       return config.invalidComponent ?
183 |         this.renderComponent(config.invalidComponent, { data: error }) :
184 |         this._compileView(fs.readFileSync(standartErrorView, 'utf-8'), error, standartErrorView);
185 |     } catch (e) {
186 |       return error.message;
187 |     }
188 |   }
189 | }
190 | 
191 | module.exports = Component;
192 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ![](docs/images/icon.png)
  2 | 
  3 | # @exadel/server-sketch
  4 | 
  5 | 
  6 | ![](docs/images/84xLDr-small.png)
  7 | 
  8 | ## Overview
  9 | Fast, flexible and extensible web-server (🌐) for [Component-Based](#components) architecture/applications 💻. Best for local development and quickly provide POC for business(🧰). Based on [express.js](http://expressjs.com/) web-server.
 10 | 
 11 | Has possibility to use by front developers as a part of AEM ([Adobe Experience Manager (TM)](https://www.adobe.com/marketing/experience-manager.html)) development process.
 12 | 
 13 | Easy way to quickly [setup](#configuration) and [start server](#how-to-use) for frontend developers(🐜), who doesn't want to spend a lot of time to do it ⌚. 
 14 | 
 15 | 
 16 | ## How to use
 17 | ### Install
 18 | 1) Install **[NodeJs](https://nodejs.org/en/)** (This will also install **npm**)
 19 |    Note minimum required version: **NodeJs 20.x** for server-sketch v1
 20 | 2) Create simple *package.json* (`` npm init ``)
 21 | 3) Install [@exadel/server-sketch](https://www.npmjs.com/package/@exadel/server-sketch) as dependency for your project (👍):
 22 | ```shell script
 23 | npm i @exadel/server-sketch --save-dev
 24 | ```
 25 | 
 26 |  
 27 | ### Quick Start
 28 | 1) Create demo project(structure) _[optional]_:
 29 | ```shell script
 30 | npx server-sketch create-demo-project 
 31 | ```
 32 | 
 33 | 2) Start server:
 34 | ```shell script
 35 | npm run server
 36 | ```
 37 | 
 38 | 3) Easiest! You can make a ☕ :) 
 39 | 
 40 | 
 41 | ### Engine
 42 | Project based on [express.js](http://expressjs.com/) web server with simple, but useful middleware. 
 43 | 
 44 | Template engine for pages: [express-dot-engine](https://www.npmjs.com/package/express-dot-engine) with some improvements.
 45 | 
 46 | Default routing based on [folder/file](#routing-based-on-file-system) structure under 📂: ``${PROJECT_ROOT}/server/views/pages/``.
 47 | 
 48 | Server supports **[pages](#page)**, **[layouts](#page-template-structure)**, **inheriting pages** (``layout`` property), **[integrated proxy](#popular-options)**, **[partials](#component-view-template)**, **[static resources](#popular-options)**, **[middleware](#extended-options)**, **[multiprojects](#component-folder-structure)**, **[browserSync](https://browsersync.io/) [integration](#popular-options)** and **[reusable components](#components)**.
 49 | 
 50 | 
 51 | ### Configuration
 52 | Configuration object should be passed as a first argument into ``.start()`` function (see ``server/start.js``).
 53 | 
 54 | #### Popular options
 55 | 
 56 | | Param     | Type      | Default Value     | Description |
 57 | |--------   |:------:   |:---------------:  |-------------|
 58 | | ``port``  | *{integer}* | **3000**            | Port for your web-server           |
 59 | | ``openAfterStart``  | *{string / null}* | **http://localhost:<%= port %>/index.html**            | Automatically open URL after web-server will be started |
 60 | | ``optimization``  | *{bool}* | **false**            | Enable optimizations. Cache + gzip + view cache + runtime cache for base router |
 61 | | ``cacheTime``  | *{integer}* | **120**            | Cache time (minutes) |
 62 | | ``public``  | *[string, ...]* | **['static/']**            | List of folders(📂), where you are stored static resources(images, js, css, json etc.). Relative to server root folder. |
 63 | | ``jscssDestFolders``  | *[string, ...]* | **['../.temp/dest/', '../dest/']** | Paths to folders(📂) with generated js & css files(used with ``browserSync.watchAndReload`` & ``public`` options). Relative to server root folder. |
 64 | | ``browserSync``  | *{object / null}* | **object** | Enable [BrowserSync](https://browsersync.io/) integration |
 65 | | &nbsp;&nbsp;&nbsp;``browserSync.port``  | *{integer}* | **3001** | BrowserSync port |
 66 | | &nbsp;&nbsp;&nbsp;``browserSync.watchAndReload``  | *[string, ...]* | **[]** | List of folders(📂) for watching. When it will be changed, then pages will be reloaded |
 67 | | ``proxy``  | *{object / null}* | **null** | If you need to use a proxy, you can configure individual requests with the proxies. Usefull to prevent problems with CORS, if you need to have integrating with backend |
 68 | | &nbsp;&nbsp;&nbsp;``proxy.rules``  | *[object, ...]* | **[]** | List of proxies. Object format: [below](#proxy-rules-object-format)  |
 69 | | &nbsp;&nbsp;&nbsp;``proxy.defaultHost``  | *string / null* | **null** | Default host for "to" params from proxy config [objects](#proxy-rules-object-format) |
 70 | 
 71 | #### Proxy rules object format
 72 | - ``from``: *{string}* | *[required]* URL on you local web-server. Example: '/service/books/all.json'.  
 73 | - ``to``: *{string}* | *[required]* Destination URL for request. Example: 'https://my-backend-api-server.com/service/books/all.json'. (both examples: all requests from '/service/books/all.json' will delegated to 'https://my-backend-api-server.com/service/books/all.json')  
 74 | - ``transform(proxyRes, proxyResData)``: *[optional]* Custom response transformer. Should returns transformed data
 75 | - ``transformHeaders(headers)``: *[optional]* Custom response headers transformer. Should returns transformed headers
 76 | 
 77 | 
 78 | #### Extended options
 79 | 
 80 | | Param     | Type      | Default Value     | Description |
 81 | |--------   |:------:   |:---------------:  |-------------|
 82 | | ``serverRoot``  | *{string}* | **server/**   | Server root folder. |
 83 | | ``baseRouter``  | *{string}* | **null**   | Path to base router. It disables default [file-folder routing](#routing-based-on-file-system). Should exports function. First argument will be express app instance. Path should be relative to server folder |
 84 | | ``doT``  | *{object}* | **{...}**   | [doT.templateSettings](https://olado.github.io/doT/index.html) |
 85 | | ``defaultPageUrl``  | *{string}* | **index.html**   | Default redirection if url doesn't contain ".html". Used by [file-folder routing](#routing-based-on-file-system) |
 86 | | ``defaultPageRendition``  | *{string}* | **index.html**   | Default page view(rendition) for URLs: /path/to/index.html. You can customize it here: server/views/index.html.  Used by [file-folder routing](#routing-based-on-file-system) |
 87 | | ``views``  | *{string}* | **views/**   |  Path to directory with [views](#page). Relative to server root folder. |
 88 | | ``controllers``  | *{string}* | **controllers/**   |  Path to directory(📂) with [page controllers](#api-page-object). Relative to server root folder. |
 89 | | ``components``  | *{string}* | **src/**   |  Path to directory(📂) with your [components](#components). Relative to project(cwd) root folder. |
 90 | | ``middleware``  | *{string}* | **middleware/*.js**   |  [Middleware for Express](https://expressjs.com/en/guide/writing-middleware.html). Can be array. Js files should export function. Function will retrieve as a first argument: [express app instance](https://expressjs.com/en/4x/api.html) |
 91 | 
 92 | 
 93 | ### Routing based on file system
 94 | ![](docs/images/file-routing.png)
 95 | 
 96 | ### Page
 97 | #### Overview
 98 | All server pages should be placed under : ``server/views/pages/`` 📂. It can be used as a regular HTML page or can be generated using built-in template engine. 
 99 | 
100 | #### Page template structure
101 | HTML page structure contains 2 sections:
102 | 
103 | - **Configuration section**: [YAML](https://yaml.org/) at the top. Configuration object(defined between ---) available as ``layout`` object. **Best practice:** use it for global layout configuration(title, body classes, scripts for injection). Default values better to defined in parent page (layout option). Properties are inheritable. **layout** property is reserved and used for showing what is html page to use as a parent.   
104 |     Example:
105 |     ```html
106 |         ---
107 |         layout: '%%PATH_TO_VIEWS%%/layouts/html5.html'
108 |         title: My Page
109 |         bodyClass: my-page
110 |         myCustomNumbers: [1, 2, 3]
111 |         ---
112 |         
113 |         {{##myCustomBlock: 
114 |             <!-- I will available as "layout.myCustomBlock" -->  
115 |         #}}  
116 |     
117 |         {{##body:
118 |             <h1> {{! layout.title }} </h1>
119 |             <div class="url"> {{= page.location.path }} </div>
120 |             <ul class="nums">
121 |             {{~ layout.myCustomNumbers :num }}
122 |                 <li> {{! num }} </li>
123 |             {{~}}
124 |             </ul>
125 |         #}}
126 |     ```
127 | - **Definition Blocks Section**: Section with page blocks. **Best Practice:** Split layout with important blocks(see 📂: ``server/views/layouts/`` files). Each block available as property in ``layout`` global object. Example: for previous code ``layout`` object will contain: ``body``, ``myCustomBlock``, ``title``, ``bodyClass``, ``myCustomNumbers`` properties. Minimum 1 definition block (between ``{{##blockName: #}}``) *required*.
128 | 
129 | Small overview about features you can find in **[Templates](#templates)** section [⏬](#templates). 
130 | 
131 | #### API: Page object 
132 | ``page`` object provide properties for current page rendition(request). That object available in all pages under ``server/views/`` 📂 and for each component (in template).
133 | - ``page.renderComponent(componentName, componentOptions)`` : Render [component](#components) by name with options(returns HTML). Example: ``{{= page.renderComponent('demo/hello-world', { data: 'example1' }) }}`` will render component ``src/demo/hello-world/`` with data ``src/demo/hello-world/data-example1.json`` and pass ``{ data: 'example1' }`` as options. 
134 | - ``page.request``: Express [request](https://expressjs.com/en/4x/api.html#req) object
135 | - ``page.response``: Express [response](https://expressjs.com/en/4x/api.html#res) object
136 | - ``page.location``: Request url object
137 | - ``page.getPageTitle(priorityTitle)``: Calculating page title by request url. If ``priorityTitle`` defined, then it will be used. **Best practice**: define ``priorityTitle`` as a yaml property at the top of the page.
138 | - ``page.resolveURL(url)``: Convert url from absolute to relative for request url. Example: request is: ``/my-project/examples/hi.html``. ``page.resolveURL('/images/log.png')`` will return ``./../../images/log.png``.
139 | - ``page.invokeController(controllerName, ...args)``: Run node JS file from ``server/controllers/${controllerName}.js``. Controller should export function. ``this`` context will be ``page`` object.
140 | - ``page.getFile(fileName)``: Read file. Path should be relative to ``server/`` 📂.
141 | - ``page.initComponent(componentName, componentOptions)``: The same as ``page.renderComponent``, but doesn't generate html(it just create [Component Object](#api-component-object)).
142 | 
143 | 
144 | #### Page Controller
145 | Page controller is a js file which exports regular function. JS file should be placed as ``/server/controllers/${controllerName}.js``. Invoke controller you can with [Page API](#api-page-object): ``page.invokeController(controllerName, arg1, arg2, ...)``. ``this`` context in exported function will be **[page object](#api-page-object)**.
146 | 
147 | **Example 1(run function):**
148 | ```js
149 | /* /sever/controllers/log.js */
150 | let i = 0;
151 | module.exports = function (msg) {
152 |     // this === page
153 |     ++i;
154 |     console.log(`${i}. Page: "${this.location.pathname}". Message: "${msg}"`);
155 | }
156 | ``` 
157 | 
158 | ```html
159 | <!-- your html page /server/views/pages/**/*.html -->
160 | {{
161 |     page.invokeController('log', 'Some debug message'); 
162 |     page.invokeController('log', 'Another message');
163 |     // see nodejs console
164 | }}
165 | ```
166 | 
167 | **Example 2(extend "page" with new functionality)**:
168 | ```js
169 | /* /sever/controllers/createLogger.js */
170 | let i = 0;
171 | module.exports = function () {
172 |     // this === page
173 |     this.log = function (msg) {
174 |         ++i;
175 |         console.log(`${i}. Page: "${this.location.pathname}". Message: "${msg}"`);
176 |     };
177 | }
178 | ``` 
179 | 
180 | ```html
181 | <!-- your html page /server/views/pages/**/*.html -->
182 | {{
183 |     page.invokeController('createLogger'); // we extended page with new method ".log(msg)" 
184 |     page.log('Some debug message'); 
185 |     page.log('Another message');
186 |     // see nodejs console
187 | }}
188 | ```
189 | 
190 | 
191 | ### Components
192 | All components should be placed under ``src/`` 📂. **Best practice:** Place all files(related with your component) into component folder. No requirements regarding folder structure, but we recommend to use minimum 2 levels: ``src/${groupName}/${componentName}/``. 
193 | It will help in the future to customize existing components(example: will be created new version of buttons or product cards or new page will be created or redesign existing components 🦄).
194 | 
195 | #### Component folder structure
196 | Only 1 required file is ``config.json``. It should be placed in your component folder. We recommend to follow next structure:
197 | ```js
198 | /server
199 |     start.js <- bootstrap server
200 |     /static <- folder for static files 
201 |         /images
202 |             ...
203 |     /middleware <- folder for middleware 
204 |         ...
205 |     /views
206 |         /layouts <- common pages layouts
207 |             ...
208 |         /pages <- your pages will be here
209 |             ...
210 | /src
211 |     /${groupName} <- group name it is smthg like a scope
212 |         /${componentName}
213 |             /ui <- we recommend put UI resources(js, css(less, scss), images, templates etc. what are using in browser) into "ui"  folder
214 |                 ${componentName}.js (optional)
215 |                 ${componentName}.less (.scss) (optional)
216 |                 ${componentName}.hbs (template which is using in browser) (optional)
217 |                 ...
218 |             config.json <- JSON file with component configuration. Required.
219 |             data-***.json <- JSON files with predefined data. Helps to prevent copy/paste data between usages. Optional.
220 |             ${componentName}.html <- Server side component template(component rendition). Any name can be used. See "config.json > view" property. 
221 |             ${componentName}Controller.js <- Any server side js logic related with component. Optional.
222 |         /${componentName2}
223 |             ...
224 | ```  
225 | #### config.json
226 | ``config.json`` file reserved properties (see demo project: "/src/demo/header/config.json"):
227 | - ``view``:*(required)* Path to server side component html template.
228 | - ``controller``:*(optional)* Path to js file with server side logic related with component. File should export object(will be prototype for your component object). ``init()`` function is required, but you can add another methods for you component and then call them in template. See demo project: "/src/demo/header/HeaderController.js". More details & examples: [Extend Component](#extend-component)
229 | - ``data``:*(optional. deprecated)*. Contains predefined data for component. Better to store data in ``data-***.json`` files.  
230 | 
231 | #### API: Component object
232 | ``component`` object available in component server side templates. You can extend object with ``controller`` property in ``config.json`` file.
233 | - ``component.renderComponent(componentName, componentOptions)``: The same as ``page.renderComponent(componentName, componentOptions)``. See: **["API: Page Object"](#api-page-object)** section
234 | - ``component.initComponent(componentName, componentOptions)``: The same as ``page.initComponent(componentName, componentOptions)``. See: **["API: Page Object"](#api-page-object)** section
235 | - ``component.render()``: Generate HTML for component and fill with data.
236 | - ``component._getFile(filePath)``: Get file content. Path should be *relative* to component folder.
237 | - ``component.config``: JSON from *"config.json"*. See description in: **[config.json](#configjson)** section.
238 | - ``component.data``: JSON from _"data-***.json"_ file or *"data"* value (if object) from component options. See description in: **[Component options](#component-options)** section.
239 | - ``component.name``: Component name.
240 | - ``component.id``: Unique component ID.
241 | - ``component.options``: Component options (second argument in call **.renderComponent(componentName, componentOptions)**). See description in: **[Component options](#component-options)** section.
242 | - ``component.mayCustomMethod(arg1, arg2, ...)``: Any method declared in object exported by js defined via *"config.json > controller"* property.
243 | 
244 | #### Extend Component
245 | Component's controller helps developer to extend [base component API](#api-component-object) with new functionality.
246 | 
247 | Controller is a regular js object(prototype), which exported from js file. Path to js file you can define in [config.json](#configjson) (``controller`` property).
248 | 
249 | ``init()`` function is required, but you can add another methods for you component and then call them in template.
250 | 
251 | **NOTE:** If you have changed controller content(js file), you need to restart server (because it uses native ``require()`` and ``module.exports`` - cached).
252 | 
253 | **Example 1:**
254 | 
255 | */src/my-math/numbers/config.json*
256 | ```json
257 | {
258 |   "view": "NumbersView.html",
259 |   "controller": "NumbersController.js" 
260 | }
261 | ```
262 | 
263 | */src/my-math/numbers/NumbersController.js*
264 | ```js
265 | module.exports = {
266 |     init() {
267 |         // this === component
268 |         // Will be invoked, when component has been created
269 |         console.log(`"${this.name}" was created.`);         
270 |     },
271 | 
272 |     // Extend base component with new functionality
273 |     getPositiveNumbers(nums = []) {
274 |         // this === component
275 |         return nums.filter((num) => num > 0);
276 |     },
277 |     getNegativeNumbers(nums = []) {
278 |         // this === component
279 |         return nums.filter((num) => num < 0);
280 |     }
281 | }
282 | ```
283 | 
284 | */src/my-math/numbers/NumbersView.html*
285 | ```html
286 | <div class="c-numbers">
287 |     <div><strong>Positive numbers:</strong> {{= component.getPositiveNumbers([-1, 10, 100, 0, -200, -345]).join(',') }}</div>
288 |     <div><strong>Negative numbers:</strong> {{= component.getNegativeNumbers([-1, 10, 100, 0, -200, -345]).join(',') }}</div>
289 | </div>
290 | ```
291 | 
292 | #### Component options
293 | Any object can be passed. Reserved properties:
294 | - ``data``: Dataset for component(pre filled data). Can be **string** or **object**. Accessible via ``component.data`` property or ``data`` in [component template](#component-view-template).
295 |     - ``string``: Dataset will be read from **${componentName}/data-${dataValue}.json** file. You can use **@extend: "path/to/data-parent.json"** notation. It helps to prevent copy-past data between json files. 
296 |     - ``object``: Will be used as it is.
297 | 
298 | #### Component view (template)
299 | Currently our system allow to use only [doT.js](https://olado.github.io/doT/index.html) templates. Small overview you can find in **[Templates](#templates)** section. 
300 | 
301 | Next objects are available in component view:
302 | - ``page``: page object. See: **["API: Page Object"](#api-page-object)** section.
303 | - ``component``: component object. See: **["API: Component Object"](#api-component-object)** section.
304 | - ``data``: Component data. Shortcut for ``component.data``.
305 | - ``options``: Component init options. Shortcut for ``component.options``.
306 | - ``partial(data)``: Function to inject HTML from another file.
307 |  
308 | ### Templates
309 | Small overview what features can be used in our **[page](#page-template-structure)** & **[component](#component-view-template)** templates(views). Full documentation you can find [here](https://olado.github.io/doT/index.html).
310 | - ``{{ js_code }}``: Evaluate javascript code on server side. Example: 
311 | ```js
312 | {{
313 |     let myFileContent = component._getFile('./my-file.txt');
314 |     console.log(`Request to: ${page.request.originalUrl}`);
315 |     const rndm = Math.random() * 1000;
316 | }}
317 | ```  
318 | - ``{{= expression }}``: Interpolation. Print expression result. Example: 
319 | ```js
320 | File content: {{= myFileContent )) 
321 | Random number: {{= Math.random() }}
322 | Button component: {{= page.randomComponent('demo/button', { data: { title: 'My button' } }) }}
323 | ```
324 | - ``{{! expression }}``: Interpolation with encoding. The same as regular interpolation, but safer(prevent script injection). 
325 | - ``{{? condition }}``:	Conditionals. Example:
326 | ```html
327 | {{? data.image }} <img src="{{= data.image }}" alt="{{= data.alt}}" /> {{?}}
328 | {{? Math.random() > 0.5 }}
329 |     <!-- if: number is bigger than 0.5 -->
330 | {{??}}
331 |     <!-- else: (0.5 and lower) -->
332 | {{?}}    
333 | ```
334 | - ``{{~ arrayList :item:index }} ...iteration block... {{~}}``: Array iteration(``arrayList.forEach(function (item, index) { ...iteration block... });``). ``item`` and ``index`` can be any variables. 
335 | ```html
336 | <ul>
337 | {{~ ['hello', 'world', 'frontend'] :word:index }}
338 |     <li> {{! index }} {{! word }} </li>
339 | {{~}}
340 | </ul>
341 | ```
342 | 
343 | 
344 | ### Command Line Interface
345 | See: [@exadel/server-sketch-cli](https://www.npmjs.com/package/@exadel/server-sketch-cli) | [git](https://github.com/exadel-inc/server-sketch-cli)
346 | 
347 | ### FAQ
348 | Will be updated. If you have any questions(❓) or ideas(💡) or bugs(🐞), you can ask with "[Issues](./../../issues)". We are open to help you: 🌞
349 | 
350 | #### AEM / ui.frontend integration
351 | Our server is more easier way for frontend developers to work on projects with AEM backend.
352 | 
353 | **Installing:**
354 | 1) Go to ui.frontend folder: ``cd ui.frontend``
355 | 2) Then regular [Install](#install)
356 | 3) Configure it (maybe, need to add folder, with your css & js bundles to ``jscssDestFolders`` option)
357 | 
358 | **Approach:**
359 | 
360 | Main idea - frontend developers should working in their ecosystem and should not touch AEM on implementing phase.
361 | 1) Frontend developers are working in ``ui.frontend`` folder
362 | 2) New components will be placed under: ``ui.frontend/src/${groupName}/${componentName}`` structure.
363 | 3) ui resources for your component should be placed under: ``ui.frontend/src/${groupName}/${componentName}/ui/`` folder.
364 | 4) Frontend developers are implementing components views with doT.js
365 | 5) After, when component will be ready, AEM developer can migrate it to HTL template engine (we are going to add supporting [HTL](https://experienceleague.adobe.com/docs/experience-manager-htl/using/getting-started/getting-started.html?lang=en#getting-started) on sketch-server in the future)
366 | 
367 | **NOTE**: Server Sketch doesn't provide any API to build css & js resources for your project. It is up to you.
368 | 
369 | 
370 | ### Roadmap
371 | TBD
372 | 
373 | ### Features
374 | - [x] [file-folder routing](#routing-based-on-file-system)
375 | - [x] Flexible templates
376 | - [x] Pages
377 | - [x] Layouts
378 | - [x] Components
379 | - [x] JSON data for components
380 | - [x] Controllers
381 | - [x] OOTB BrowserSync integration 
382 | - [x] etc. 
383 | 
384 | ### Links 
385 | - [@exadel/server-sketch](https://www.npmjs.com/package/@exadel/server-sketch) | [git](https://github.com/exadel-inc/server-sketch)
386 | - [@exadel/server-sketch-cli](https://www.npmjs.com/package/@exadel/server-sketch-cli) | [git](https://github.com/exadel-inc/server-sketch-cli)
387 | - [Exadel Inc. Github](https://github.com/exadel-inc/) | [web-site](https://exadel.com)
388 | 
389 | 🧰 
390 | 
391 | ---
392 | **Exadel, Inc.**
393 | 
394 | [![](docs/images/exadel-logo.png)](https://exadel.com)
395 | 


--------------------------------------------------------------------------------