Root your static website and effortlessly transform it into a dynamic website using JSCroot. Enjoy the benefits of a low-emission carbon code, making your website both efficient and eco-friendly. Many static web hosting providers seamlessly support JSCroot, offering a simple way to turn your static content into dynamic, interactive experiences.
With JSCroot, you can also take advantage of anti-deface protection, ensuring that your website remains secure against unauthorized changes. This makes your site less vulnerable to malicious alterations, adding an extra layer of security to your dynamic website.
JSCroot offers very low-cost deployment, which can even be done for free with many hosting providers, making it an ideal choice for anyone looking to deploy their website with minimal expenses.
👉 This method is perfect for those who want a super lightweight application without any npm dependencies. 🚀
Ready to test its performance? Dare to Benchmark This?
JavaScript is an asynchronous scripting language.
Every line in JavaScript runs as an independent process in a browser, not waiting.
Use async await or promise if you want to run without a sub-process.
JSCroot leverages ES6+ syntax for modules:
<script type="module" src="index.js"></script>
You can easily Use JSCroot Library from CDN to get started with minimal setup.
For example to get user data using WhatsAuth Token
import {getCookie} from "https://cdn.jsdelivr.net/gh/jscroot/cookie@0.0.1/croot.js";
import {setInner} from "https://cdn.jsdelivr.net/gh/jscroot/element@0.1.5/croot.js";
import {getJSON} from "https://cdn.jsdelivr.net/gh/jscroot/api@0.0.7/croot.js";
import {redirect} from "https://cdn.jsdelivr.net/gh/jscroot/url@0.0.9/croot.js";
if (getCookie("login")===""){
redirect("/");
}
getJSON("https://api.do.my.id/data/user","login",getCookie("login"),responseFunction)
function responseFunction(result){
if (result.status === 404){
setInner("content","Silahkan lakukan pendaftaran terlebih dahulu "+result.data.name);
redirect("/signup");
}else{
setInner("content","Selamat datang "+result.data.name);
redirect("/dashboard");
}
console.log(result);
}
Meet sweet alert with JSCroot:
import {addCSSInHead} from "https://cdn.jsdelivr.net/gh/jscroot/lib@0.1.6/element.js";
import Swal from 'https://cdn.jsdelivr.net/npm/sweetalert2@11/src/sweetalert2.js';
await addCSSInHead("https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.css");
//alert() replacement
Swal.fire({
icon: "error", //success,warning,info,question
title: "Testing",
text: "Hi, from JSCroot",
});
//confirm() replacement
Swal.fire({
title: 'Apakah Anda yakin?',
text: 'Anda akan melanjutkan tindakan ini.',
icon: 'warning',
showCancelButton: true, // Menampilkan tombol Cancel
confirmButtonText: 'OK',
cancelButtonText: 'Cancel'
}).then((result) => {
if (result.isConfirmed) {
Swal.fire('Melanjutkan...', 'Tindakan Anda telah dikonfirmasi.', 'success');
} else {
Swal.fire('Dibatalkan', 'Tindakan Anda dibatalkan.', 'info');
}
});
Using JSCroot assisted by ChatGPT:
I want to use JSCroot as ES modules to build my website, this is my library file from:
https://cdn.jsdelivr.net/gh/jscroot/lib@0.0.1/api.js
I want to use JSCroot as ES modules to build my website, this is my library file from:
https://cdn.jsdelivr.net/gh/jscroot/lib@0.0.1/api.js
...content inside api.js file...
Need a basic concept? don’t worry, follow this tutorial and exercise first:
The first thing to do is create your html file and declare the type module js script.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Module Example</title>
</head>
<body>
<p id="demo"></p>
<script type="module" src="index.js"></script>
</body>
</html>
This is your step:
import { setInner } from "https://cdn.jsdelivr.net/gh/jscroot/lib@0.0.3/element.js";
setInner("demo","Dari croot.js");
import * as croot from "https://cdn.jsdelivr.net/gh/jscroot/lib@0.0.3/element.js";
croot.setInner("demo","Dari croot.js import fungsi dengan nama croot");
index.html file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
</head>
<body>
<table class="table">
<tbody id="lokasi">
<tr>
<th>Type</th>
<th>Nama</th>
<th>Kordinat</th>
</tr>
</tbody>
</table>
<script type="module" src="./main.js"></script>
</body>
</html>
main.js file:
import { get } from "https://cdn.jsdelivr.net/gh/jscroot/lib@0.0.3/api.js";
import {setInner,addChild } from "https://cdn.jsdelivr.net/gh/jscroot/lib@0.0.3/element.js";
export let URLGeoJson = "https://jscroot.github.io/examples/api/get/fromfile/data.json";
export let tableTag="tr";
export let tableRowClass="content is-small";
export let tableTemplate=`
<td>#TYPE#</td>
<td>#NAME#</td>
<td>#KORDINAT#</td>
`
get(URLGeoJson,responseData);
export function responseData(results){
console.log(results.features);
results.features.forEach(isiRow);
}
export function isiRow(value){
let content=tableTemplate.replace("#TYPE#",value.geometry.type)
.replace("#NAME#",value.properties.name)
.replace("#KORDINAT#",value.geometry.coordinates);
console.log(content);
addChild("lokasi",tableTag,tableRowClass,content);
}
We use Micro Front End(MFE) paradigm: Come into examples section to begin your journey with JSCroot.
File Explorer | Fork Github |
PDF Web Viewer | Fork Github |
Swagger | Fork Github |
404 Not Found Template | Fork Github |
Conventional Single Page Application(SPA) : Use our skeleton and look at demo.
Run your rooted dynamic website in this static web hosting providing list: