thedivspace / htbuild

The Power to Your HTML Code with 0-Bytes of Deployment 🚀

htBuild
🚀 0 - Bytes of Deployment

NOTE : Install with -g flag to ensure working of 'htBuild' cli.

Hard things made easy!

htBuild is a framework developed by Divspace. This is the first version of htBuild released in 2021. You need not to install a new tool which in turn forces you to install a programming language you don’t use.

This easy-to-use framework written in JavaScript, lets you use variables and components in your projects in a very easy method. Feel free to change anything according to your tastes, no need to master much complex framework and/or terms and activities.

What's htBuild?

htBuild is a framework that allows user to use variables, components and libraries making a coder's task comprehensible. It does not requires you to learn a very complex framework and/ or terms and activities. Since dynamic sites require cloud for deployment, here, static site do not need cloud. htBuild provides Zero Byte of Deployment in order to save your storage space on server.

Front-end Developers' life made easy, yet simpler than ever before

Installation

Get ready to install htBuild by following the steps given below:

1. Install Nodejs from here
2. Open command line and enter below command

npm install -g @thedivspace/htbuild

Know more on - htBuild Install Guide

Usage

• Component

  Why to use components?

  => When you code a "repetitive-element" used in the site, the main code expands. Hence, in this scenario, htbuild component proves useful. You create a component file, call/import it into your main code once, or 'n' number of times; thus, keeps your code precise and readable for anyone.

  Here's how to create an htBuild Component:

  ​ First, create a file in \components\ directory with component_name.html ​ Then add your component html code in it.

  ​ Following is the usage of component to use in your code:

  <!-- Using Component -->
  <ht-component data-component="/component_name"/>

  Click here for detailed guidelines to create, update and use components.

• Global Variable

  A global variable is a variable with global scope, hence accessible throughout the program, unless shadowed.

  ​ Define a global variable in your code:

  {
      "[global_variable_name]": "[global_variable_value]"
  }

  ​ Refer the following to use a global variable in your code:

  <!-- Using Variable -->
  <h1>Welcome, {{g_[global_variable_name]}} </h1>

  Click here for detailed guidelines to create, update and use global variables.

• Local Variable

  Like components, variables can be used whenever and wherever you desire and helps increasing your code performance and readability.

  ​ Define a local variable in your code:

  <!-- Defining Variable -->
  <ht-variable data-var="[variable_name]" data-val="[variable_value]"/>

  ​ Refer the following to use a local variable:

  <!-- Using Variable -->
  <h1>Welcome, {{[variable_name]}} </h1>

  Click here for detailed guidelines to create, update and use local variables in your code.

• Live Server

  htBuild has live server which allows any updates in your file to display in real-time in your browser without refresh.

Documentation

Check out the README.md guide and other docs of htBuild on our website!

You can find more information (and the manual) on the Documention of htBuild. For questions and discussion, use the discussion forum of #htbuild channel on discord.

htBuild powers up every developer in the simplest way and makes many elements secure, easy to use and work with.

If you like it? Recommended

Click here to give your recommendation on the Linkedin Product page, We are happy to see it!

Contribute

Got a feature request? Please add it as an issue or make a pull request.

If you have a bug to report, please reproduce the bug in htBuild GitHub to help us easily isolate it.

Would you like to contribute?

htbuild's Issues

htbuild having build Issue | TypeError: Cannot read property 'toUpperCase' of undefined

Following error is occurred after running htbuild serve command -

return (path.split(".")[2].toUpperCase()) == 'HTML';
                           ^
TypeError: Cannot read property 'toUpperCase' of undefined
 at Object.isHtml ( ----PATH-------\@thedivspace\htbuild\lib\files.js:165:31)
 at ----PATH-------\@thedivspace\htbuild\lib\build.js:16:18
 at Array.forEach (<anonymous>)
 at Object.build ( ----PATH-------\@thedivspace\htbuild\lib\build.js:14:17)
 at Object.<anonymous> ( ----PATH-------\@thedivspace\htbuild\index.js:22:19)
 at Module._compile (node:internal/modules/cjs/loader:1108:14)
 at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
 at Module.load (node:internal/modules/cjs/loader:973:32)
 at Function.Module._load (node:internal/modules/cjs/loader:813:14)
 at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12)