kreftjs 0.0.5-beta → 0.0.6-beta

package/README.md

@@ -75,7 +75,7 @@ Views are escaped, logins use HttpOnly cookies with CSRF protection, passwords u
 
 ## Migrating from Som.js
 
-Kreft is Som.js under a new name: the package is `kreftjs` (version 0.0.5-beta), the command is `kreft` (`kreftjs` works too), the global is `Kreftjs` and component files end in `.kreftjs`. The old names keep working, so an existing project runs without edits. New files and everything the tools write use the new names. Move over when it suits you. (`kreft` was an earlier spelling of the new name; it is accepted in the same places.)
+Kreft is Som.js under a new name: the package is `kreftjs` (version 0.0.6-beta), the command is `kreft` (`kreftjs` works too), the global is `Kreftjs` and component files end in `.kreftjs`. The old names keep working, so an existing project runs without edits. New files and everything the tools write use the new names. Move over when it suits you. (`kreft` was an earlier spelling of the new name; it is accepted in the same places.)
 
 | Som.js | Kreft | Still works? |
 |---|---|---|

package/bin/build.js

@@ -8,6 +8,7 @@
  *   kreft build --prerender      also save every page as ready HTML (needs: npm i -D jsdom)
  *   kreft build --prerender --urls urls.js   ... and the addresses in that file (pages that come from your data)
  *   kreft build --include docs   also copy another folder into the output
+ *   kreft build --no-htaccess    do not write dist/.htaccess (the Apache / Hostinger page-address rules)
  *
  * What it does:
  *   1. Compiles every .kreftjs file ahead of time into app.js (no .kreftjs files are downloaded in production).
@@ -33,11 +34,12 @@ const SERVER_DIRS = new Set();
 const SKIP = new Set(['node_modules', '.git', '.vscode', '.idea', 'package.json', 'package-lock.json', '.DS_Store']);
 
 module.exports = function build(args) {
-  let folder = null, out = null, base = null, prerender = null, urlsFile = null;
+  let folder = null, out = null, base = null, prerender = null, urlsFile = null, htaccess = true;
   const include = [];
   for (let i = 0; i < args.length; i++) {
     if (args[i] === '--out' || args[i] === '-o') out = args[++i];
     else if (args[i] === '--base') base = args[++i];
+    else if (args[i] === '--no-htaccess') htaccess = false;
     else if (args[i] === '--include') include.push(args[++i]); // another folder to copy in, like the docs
     else if (args[i] === '--prerender') prerender = args[i + 1] && !args[i + 1].startsWith('-') && args[i + 1].includes('/') ? args[++i].split(',') : [];
     else if (args[i] === '--urls') urlsFile = args[++i]; // a file with more addresses to prerender (pages from your data)
@@ -227,6 +229,7 @@ ${indent(components.join('\n\n'))}
       : html.replace(/<head>/i, `<head>\n  <base href="${b}">`);
   }
   write(dist, 'index.html', html);
+  if (htaccess) writeHtaccess(dist, html);
 
   const report = () => {
     const files = walk(dist, null).map((f) => [path.relative(dist, f), fs.statSync(f).size]);
@@ -249,6 +252,25 @@ ${indent(components.join('\n\n'))}
   report();
 };
 
+// Apache (Hostinger, cPanel …) answers /docs with a 404, because only index.html exists on disk. These rules send every address
+// that is not a real file or folder to index.html, so reloading a page works. An .htaccess you keep in public/ is left alone;
+// a relative base (./, as the desktop build uses) has no server and gets no file.
+function writeHtaccess(dist, html) {
+  const m = /<base\b[^>]*\bhref="([^"]*)"/i.exec(html);
+  const base = m ? m[1] : '/';
+  if (!base.startsWith('/') || fs.existsSync(path.join(dist, '.htaccess'))) return;
+  write(dist, '.htaccess', `# Written by kreft build: every address that is not a file or a folder opens index.html (turn off: kreft build --no-htaccess)
+<IfModule mod_rewrite.c>
+  RewriteEngine On
+  RewriteBase ${base}
+  RewriteRule ^index\\.html$ - [L]
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteRule . ${base}index.html [L]
+</IfModule>
+`);
+}
+
 // a frontend .ts file → the browser's JavaScript (types removed); its own './x.ts' imports become './x.js'
 function tsToJs(file, project) {
   const { transpileTs } = require('./backend/typescript.js');

package/bin/kreftjs.js

@@ -163,6 +163,7 @@ function help() {
         --base <path>       Change the <base href> (for example /)
         --prerender [paths] Also save every page as ready HTML (needs: npm i -D jsdom)
         --include <folder>  Also copy this folder into the output (for example docs)
+        --no-htaccess       Do not write dist/.htaccess (page-address rules for Apache and Hostinger)
     kreft add <packages...>     Install npm packages with strict security gatekeeper (alias: kreft install, kreft i)
         -D, --dev           Install as devDependency
         -y, --yes           Auto-confirm unverified community packages in CI/CD

package/docs/README.md

@@ -82,7 +82,7 @@ npx kreftjs dev
 ### Check that it works
 
 ```bash
-kreft --version     # for example 0.0.5-beta
+kreft --version     # for example 0.0.6-beta
 kreft about         # Kreft and Node.js versions, this project's settings and drivers
 kreft list          # every command your version has
 ```
@@ -1737,7 +1737,52 @@ What you get:
 - **A strict Content-Security-Policy works.** Every expression becomes a real function, so the built app never uses `eval` or `new Function`.
 - **Errors before you deploy.** A mistake in any `.kreftjs` file stops the build and names the file and line.
 
-Options: `kreft build ./site --out public` builds another folder, and `--base /` changes `<base href>`. Upload the output folder to any static host.
+Options: `kreft build ./site --out public` builds another folder, and `--base /` changes `<base href>`. `--no-htaccess` skips the `.htaccess` file described below.
+
+### Upload to a host
+
+**Static hosting: Hostinger, cPanel, any Apache host.** Upload what is *inside* `dist/` (not the `dist` folder itself) to the folder the website is served from, normally `public_html`. In Hostinger's hPanel: **Files → File Manager → public_html → Upload**, or use FTP. Do not use the "framework" or "Node.js app" importers for this: they look for a `package.json` and say *Unsupported framework or invalid project structure*, because `dist/` holds only finished files.
+
+`kreft build` also writes `dist/.htaccess`:
+
+```apache
+RewriteEngine On
+RewriteBase /
+RewriteRule ^index\.html$ - [L]
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteRule . /index.html [L]
+```
+
+Apache only knows the files on disk, so without these rules `/docs` or any other clean address gives a 404 when someone opens or reloads it. With them, every address that is not a real file or folder opens `index.html` and the router takes over. Upload the file too (it starts with a dot, so some file managers hide it; turn on "show hidden files"). If the site lives in a folder, build with `--base /folder/` and the rules follow it. An `.htaccess` you keep in `public/` is used as it is. A relative base (`--base ./`, used by the desktop build) gets no file.
+
+> [!NOTE]
+> This hosts the front end only. Login, the database and everything under `/api` need the Node.js server, which Apache does not run.
+
+**A Node.js plan or a VPS.** Upload the whole project (without `node_modules`), not `dist/`. Add Kreft to its dependencies with `npm i kreftjs`, build with `npm run build`, and start the server with `npm run serve` (it reads the `PORT` your host sets). The generated `start` script runs the development server, so do not use it in production.
+
+
+On a VPS, keep it running with PM2 and put nginx in front of it for your domain and HTTPS:
+
+```bash
+npm install && npm run build
+npm i -g pm2
+pm2 start "npm run serve" --name my-app && pm2 save
+```
+
+```nginx
+server {
+    server_name example.com;
+    location / {
+        proxy_pass http://127.0.0.1:8000;
+        proxy_set_header Host $host;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+}
+```
+
+Then `sudo certbot --nginx -d example.com` adds HTTPS. Set `APP_ENV=production` and a real `APP_KEY` in `.env` first, and read the [Production checklist](#production-checklist).
+
 
 ### Ready HTML for every page: `--prerender`
 

package/kreftjs.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for Kreft 0.0.5-beta
+// Type definitions for Kreft 0.0.6-beta
 // Use from TypeScript or for editor hints in plain JavaScript (// @ts-check).
 
 export interface Signal<T> { value: T }

package/kreftjs.js

@@ -1,5 +1,5 @@
 /*!
- * Kreft v0.0.5-beta — reactive by nature
+ * Kreft v0.0.6-beta — reactive by nature
  * The .kreftjs component language (state · derive · action · when · watch · on),
  * { } views with k-if / k-each / k-model, components, slots, router, stores,
  * share / receive, event bus and a template engine.
@@ -5032,7 +5032,7 @@
     stores, storeLog, busLog,
   };
 
-  const VERSION = '0.0.5-beta';
+  const VERSION = '0.0.6-beta';
   const Kreftjs = {
     version: VERSION,
     // PUBLIC_ values from .env (kreft dev and kreft build put them here); never secrets

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kreftjs",
-  "version": "0.0.5-beta",
+  "version": "0.0.6-beta",
   "description": "A tiny reactive framework with its own component language (.kreftjs files): router with nested routes, stores, saved data, animations, an API client, hot reload, DevTools and a template engine.",
   "license": "Elastic-2.0",
   "main": "kreftjs.js",

package/templates/app/frontend/errors/ErrorMonitor.kreftjs

@@ -90,7 +90,7 @@ action copyReport() {
         <div class="badges">
           <span class="badge danger-badge">HTTP {status}</span>
           <span class="badge solid">{currentTitle}</span>
-          <span class="badge">Kreft {Kreftjs.version || '0.0.5-beta'}</span>
+          <span class="badge">Kreft {Kreftjs.version || '0.0.6-beta'}</span>
         </div>
         <div class="actions">
           <button class="sm" @click={copyReport}>{copied ? 'Copied Markdown' : 'Copy Report'}</button>
@@ -187,7 +187,7 @@ action copyReport() {
         <h3>Kreft Runtime</h3>
         <table>
           <tbody>
-            <tr><th>Engine</th><td><code>Kreft v{Kreftjs.version || '0.0.5-beta'}</code></td></tr>
+            <tr><th>Engine</th><td><code>Kreft v{Kreftjs.version || '0.0.6-beta'}</code></td></tr>
             <tr><th>Sanitizer</th><td><code>Active (cleanHtml / SafeHtml)</code></td></tr>
             <tr><th>Environment</th><td><code>development (APP_DEBUG=true)</code></td></tr>
           </tbody>

package/templates/app/frontend/kreftjs.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for Kreft 0.0.5-beta
+// Type definitions for Kreft 0.0.6-beta
 // Use from TypeScript or for editor hints in plain JavaScript (// @ts-check).
 
 export interface Signal<T> { value: T }

package/templates/app/frontend/kreftjs.js

@@ -1,5 +1,5 @@
 /*!
- * Kreft v0.0.5-beta — reactive by nature
+ * Kreft v0.0.6-beta — reactive by nature
  * The .kreftjs component language (state · derive · action · when · watch · on),
  * { } views with k-if / k-each / k-model, components, slots, router, stores,
  * share / receive, event bus and a template engine.
@@ -5032,7 +5032,7 @@
     stores, storeLog, busLog,
   };
 
-  const VERSION = '0.0.5-beta';
+  const VERSION = '0.0.6-beta';
   const Kreftjs = {
     version: VERSION,
     // PUBLIC_ values from .env (kreft dev and kreft build put them here); never secrets

package/templates/app/frontend/pages/Dashboard.kreftjs

@@ -110,7 +110,7 @@ load board = api.get('/api/dashboard')
         <div class="info-list">
           <div class="info-item">
             <span class="info-label">Framework Engine</span>
-            <span class="info-value">Kreft {Kreftjs.version || '0.0.5-beta'}</span>
+            <span class="info-value">Kreft {Kreftjs.version || '0.0.6-beta'}</span>
           </div>
           <div class="info-item">
             <span class="info-label">Active Database</span>

package/templates/errors/ErrorMonitor.kreftjs

@@ -116,7 +116,7 @@ action copyReport() {
         <div class="hero-badges">
           <span class="badge-exception">{currentTitle}</span>
           <span class="badge-env">Node.js {typeof process !== 'undefined' ? process.version : 'v22.0.0'}</span>
-          <span class="badge-env">Kreft v0.0.5-beta</span>
+          <span class="badge-env">Kreft v0.0.6-beta</span>
         </div>
         <h1 class="hero-error-message">{currentMessage}</h1>
       </div>