Node Webpack
The NPM service allows you to easily use ready-made JavaScript and CSS packages. Of course, using ready-made packages in websites is not straightforward and has its own problems. Among these problems are changes to package versions and loading a large number of files on the page, which reduces speed and also lowers the site's ranking.
Package Management
In Jalno, to manage the packages of each theme, you can declare the required packages in the theme's configuration file, named theme.json, under the assets key. When declaring them, you can also record the required package version so that exactly the same package is installed in subsequent installations.
With this feature, you no longer need to move the package files (which are very large) when relocating the site. You can easily reinstall them after the move.
The node_webpack package automatically detects all themes and installs each theme's required, declared packages into that theme's directory.
Example theme configuration file
{
"name" : "clipone",
"title":"Clip One",
"assets":[
{"type": "package", "name": "bootstrap", "version": "^3.3.7"},
{"type": "package", "name": "jquery", "version": "^3.4.1"},
{"type": "package", "name": "jquery-ui", "version": "^1.12.1"},
{"type": "package", "name": "jquery.growl", "version": "^1.3.5"}
]
}
Version Specification
The specified versions follow NPM's rules exactly and must be recognizable by this service. If no version is specified, the latest version of the package is always installed, and if the specified version is not valid, you will receive an error when running and installing the packages.
| Example | Description |
|---|---|
| ~3.3.7 | Installs version 3.3.7, or any version whose first two numbers are exactly 3.3 and whose third number is greater than 7. |
| =3.3.7 | Installs exactly version 3.3.7. |
| ^3.3.7 or 3.3.7 | Installs version 3.3.7, or any version whose first number is exactly 3, whose second number is 3 or greater, and whose third number is greater than 7. |
However, the problem of the large number of files that must be loaded when the page runs still remains. In Node Webpack, this problem is also solvable.
File Management
After installation, in order to use the packages, the package files must be loaded on the page before your own file so that you can use them. This must be observed on every page, and all the files required on that page must be declared completely, while respecting the correct priority.
Moreover, you cannot use easier and faster technologies such as TypeScript, Less, or SCSS, because these are not recognized by browser engines and must be converted and compiled into other technologies.
But in Jalno, you can focus solely on your own site's concerns without worrying about these issues. In Node Webpack, all packages used in the code, or the files declared in the themes' configuration files, are converted and compiled into a single file for browser technologies.
Example theme configuration file
{
"name" : "clipone",
"title":"Clip One",
"assets":[
{"type": "package", "name": "bootstrap", "version": "^3.3.7"},
{"type": "package", "name": "jquery", "version": "^3.4.1"},
{"type": "css", "file": "node_modules/bootstrap/dist/css/bootstrap.css"},
// or
// {"type": "less", "file": "node_modules/bootstrap/less/bootstrap.less"},
{"type": "less", "file": "assets/less/Main.less"},
{"type": "js", "file": "node_modules/bootstrap/dist/js/bootstrap.min.js"},
{"type": "js", "file": "assets/js/Main.js"}
]
}
Example Main.less file
@import "~bootstrap/less/bootstrap.less"; // Import installed package less file instead write in theme.json
@import "fonts.less"; // Import other less file
body {
font-size: 16px;
line-height: 1.4;
}
@import "responsive.less"; // Import other less file
Example Main.js file
jQuery(function() {
alert("Hello World!");
$("#div").html("Hi");
})(JQuery, this);
You can freely use $ to work with jQuery.
To use TypeScript, you must first save the TS settings in a file named tsconfig.json in the root directory of the theme.
Example TS configuration file
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": false,
"removeComments": true
},
"files": [
"./assets/ts/Main.ts"
]
}
Example TS file
import * as $ from "jquery";
import "bootstrap"; // Import bootstrap js file instead write in theme.json
import NotFound from "./NotFound.ts";
export default class Main {
public static init() {
alert("Hello World!");
$("#div").html("Hi");
NotFound.initIfNeeded();
}
}
$(() => {
Main.init();
});
Because all files run as a single file, code written for one page may be mistakenly loaded on another page and take effect there; therefore, you must restrict each file to its intended page.
Example page-specific TS file
import * as $ from "jquery";
export default class NotFound {
public static initIfNeeded() {
NotFound.$page = $("body.notfound-page");
if (NotFound.$page.length) {
NotFound.init();
}
}
private static $body: JQuery;
private static init() {
alert("NotFound Page!");
}
}
Object-oriented programming is of course available in TypeScript; it simply was not needed in these examples, so it was not used.
Installing Packages
On the command line, go to the packages/node_webpack/nodejs directory. There, run the following command and wait:
$ npm install -- --install
Running the command above detects all themes and installs the required packages.
Running Webpack
On the command line, go to the packages/node_webpack/nodejs directory. There, run the following command and wait:
$ npm install -- --webpack
After the command finishes, the final files are saved in the node_webpack/storage/public/frontend/dist directory. These files are automatically detected by the framework and placed on the page.
After every change to the code, you must run webpack again to apply the changes. You can use Watch mode. In this mode, webpack monitors all your files and, as soon as the smallest change is saved, recompiles the files.
$ npm install -- --webpack -w
This feature is only useful during development and site design. To produce the final file for using the site in its ready state, you can use the Production feature. With this feature, your code is minified. In this mode, in addition to reducing file size when the page loads, your code is encoded and not easily readable.
$ npm install -- --webpack --production
Example HTML file
<html>
<head>
<title>Jalno framework </title>
<?php echo $this->loadCSS(); ?>
</head>
<body>
<div id="div"></div>
<?php $this->loadJS(); ?>
</body>
</html>
Deploying the Site to Hosting Providers
To deploy the site on hosting providers where you do not have command-line access, you can run the site completely in production mode on the programmer's system or your own. The node_modules directories inside the themes' paths are not needed, and you can delete them. Prepare a compressed copy of the site and place it on the host.