HTML+

Getting Started

With HTML+ you can write smaller and more powerful HTML templates and with the power of the engine, it automatically manages all pages and resources connected to the pages like CSS, SASS, LESS, Stylus and Typescript.

When you are ready to deploy, it comes with a static site builder to build a static website or you can simply continue to use it in a live server to take advantage of its fast rendering speed.

Requirements

• Node 14 or later
• Express 4 or later

Create Your Project

You may use any tool or strategy that you know to create a node project. You may also use the terminal or command line to run the following commands to set it up.

#create directory named "my-app"
mkdir my-app

#navigate inside the created directory
cd my-app

#initialize npm and follow the prompt
npm init

Installation

Inside your newly created project you can proceed to install HTML+ and express:

npm install express, @beforesemicolon/html-plus

Server Setup

Create your server file and a pages directory(can be named anything you want).

mkdir pages
touch server.js

Your project file structure should look like so:

my-app
  - pages
  - server.js
  - package.json
  - package-lock.json

Inside your server.js file the simplest setup you can have is importing HTML+ engine, create your express app to pass it to the engine along with the path to the directory where you will put the html page files.

// server.js
const express = require('express');
const http = require('http');
const path = require('path');
const {engine} = require('@beforesemicolon/html-plus');

const app = express();

(async () => {
	await engine(app, path.resolve(__dirname, './pages'));

	const server = http.createServer(app);

	server.listen(3000);
})()

HTML+ engine will setup your Routes for your pages and all handlers for CSS(including preprocessors), Javascript and Typescript files.

Config file

The engine function takes an option object as third argument which you can also provide by creating a hp.config.js file on the root of your project with same properties.

// hp.config.js
const homePage = require('./website/data/home.page');
const aboutPage = require('./website/data/about.page');
const {CodeSnippet} = require('./website/tags/code-snippet');
const tailwind = require('tailwindcss');

const env = process.env.NODE_ENV || 'development';

module.exports = {
	env,
	staticData: {
		pages: {
			home: homePage,
			about: aboutPage,
		},
	},
	customTags: [
		CodeSnippet,
	],
	postCSS: [
		plugins: [tailwind]
	]
};