Hizzy is a React based fullstack modern web framework!
To install Hizzy simply type this:
npx hizzy- Hizzy
- Installation
- Production Configuration
- Built-in addons
- 🏎️ Blazingly fast and small-sized! 🏎️
- JSX Support
- ⚡ Instant server connection! ⚡
- CLI
- Addon API
- Why Hizzy?
- Project history
You might want to turn off includeOriginalInBuild for faster build scan.
You might want to turn off autoBuild to prevent it from rebuilding every time.
You should turn dev off by setting it to false.
This addon adds these databases:
This addon adds language support to your page!
Check the Language Support Example on GitHub
Check the Local Authentication Example on GitHub
Check the Discord Authentication Example on GitHub
An addon that makes a popup for errors whenever something doesn't work which helps you maintain your project easily!
This feature is not fully done.
This feature is not fully done.
This addon lets you append things on the <head> tag using a custom tag named <Helmet>!
Example:
import Helmet from "@hizzyjs/helmet";
export default <>
<Helmet>
<title>Hello, world!</title>
</Helmet>
Hello, world!
</>Check the Helmet Example on GitHub
An addon that adds a better progressive load to images that first shows the image's blurred version then the actual image.
This feature is not fully done.
Check the Images Example on GitHub
This feature is not fully done.
Hizzy is blazingly fast compared to its competitors!
Coming soon...
You can use JSX which lets you add HTML/Components inside your code!
There are comment decorators in Hizzy that allow you to run specific server-sided functions you want to run!
The @server decorator lets client run a function that is run in the server side!
An example that logs "Hello, world!" to the server terminal whenever a button is pressed:
// @server
function helloWorld() {
console.log("Hello, world!");
}
export default <button onClick={helloWorld}></button>And you might be asking yourself... Can't the client see the inside of the server-sided function then?
No! Only thing the client knows is that the server-sided function is called helloWorld! How amazing is that!?
The @server/respond decorator lets client run a function that is run in the server side and get the returned value!
An example that adds two numbers and sends them back to the client:
// @server/respond
function secretFunction(a, b) {
// Client doesn't know that it's just addition!
return a + b;
}
export default <div>The secret function says {await secretFunction(2, 2)}</div>;The reason is it's not instant in literal sense. Since it uses sockets to run functions, it takes little to no time. But it can't be instant.
The @server/join decorator will be run when a client joins. The function will be executed from the server side.
The @server/leave decorator will be run when a client leaves. The function will be executed from the server side.
The clients won't get any information about the functions assigned with these decorators. Not even their names.
An example that tells the server terminal that someone joined or left:
// @server/join
function onSomeoneJoin() {
console.log("Someone just joined!");
}
// @server/leave
function onSomeoneLeave() {
console.log("Someone just left!");
}
export default <div>What a peaceful page!</div>;The functions assigned with @server/start decorator will be run from server side and will run at the beginning of the
process.
The clients won't get any information about the functions assigned with this decorator. Not even their names.
An example that logs I'm alive to the server terminal when server starts:
// @server/start
function onServerStart() {
console.log("I'm alive!");
}
export default <div>Hey!</div>;Reason for the note: The @server/start runs when the server starts which is possible when it's production mode
since every file is built once per process. Unlike production mode, in development mode the files will be built every
request, therefore it would have to run the @server/start function every REQUEST! That is usually not what you want. So
we disabled it. It will say Internal server error to the client.*
All you have to do to is type hizzy!
This will immediately start your project.
Normally hizzy uses the current directory you are in the terminal,
but you can specify the directory as an argument!
npx hizzy [root]
npx hizzy ./myDirectory/myProject
To create an addon structure you can run the command npx hizzy --addon-init YourAddonName
This function is ran immediately after the file is exported.
This function is ran when the addon is enabled.
First trigger of this function is when server starts listening.
This can be triggered by the a shortcut in the CLI which disables and enables all addons.
This function is ran when the addon is enabled.
This can be triggered by the a shortcut in the CLI which disables and enables all addons.
This will be triggered before the termination of the process.
This function is ran when a client joins the website.
WARNING: This function will be run from the client side therefore you can't use server-sided functions.
For more information check the injections/jsx.js file and search for doAddon(1).
NOTE: If the client is transferred between pages using Hizzy's openPage function or reloadPage this won't be run
again.
This function is only ran when the first request is sent.
This function is ran when a client has done rendering the page.
WARNING: This function will be run from the client side therefore you can't use server-sided functions.
For more information check the injections/jsx.js file and search for doAddon(2).
This function is ran when a client has done rendering the page.
WARNING: This function will be run from the client side therefore you can't use server-sided functions.
For more information check the injections/jsx.js file and search for doAddon(3).
In Turkish "hız" means "speed" in English. We added "zy" at the end to make it easier to pronounce and here you go, Hizzy!
People who helped to find the name: mattmatt0990, lebouwski
- Created the project: June 21, 2023
- First public commit: July 13, 2023