hqjs

🎓 You already know it

It is just a static server that delivers your application code files

🏂 Zero configuration

One command and you are good to go

🏋️ Frameworks support

Polymer, Svelte, Vue, React, Angular and many others out of the box

😎 Understands formats

.js(x), .mjs, .ts(x), .svelte, .vue, .coffee, .json, .(s)css, .sass, .less, .html and .pug

🎁️ No bundling

To reflect project structure in the browser and make it easier to understand and develop

🦋 Better debugging

Names alligned with the code, debugging tooltips, breakpoints for specific line or expression

🕸 Latest web standards

You can use cutting edge features even if your browser lacks them

⚡ Light and fast

Ships minimum that is required with no bundlers overhead, only the files that were changed

VSCode extension

Get Visual Studio Code Extension and run hq with single Go Live button click.

Installation

Install it once with npm npm install -g @hqjs/hq

Usage

Run inside project root

hq

Build

You can use hq to prepare your code for regular static server. Just type hq build in a project root and build result will appear in dist folder. In case hq missed something - you can pass build target as an argument to build command. It will do proper tree shaking and consist of both module and nomodule versions.

⚠️ Previous content of dist folder will be erased.

Why hq?

There are many development tools out there, including browserify, webpack, rollup and parcel, that provide development servers. But all of them rely on bundling. While bundling might still be usefull for production, it makes the development experience quite a struggle.

Without bundling hq dramatically increases development speed by shipping only files that were changed and improves debugging by providing minimal transformation to a source.

With hq you can start a new project instantly. Just type hq and you are ready for experiments. It supports all kinds of frameworks out of the box, so there is no need to learn all their different tools and know all the buzzwords.

It is worth to say that hq requires no configuration, offering the familiar experience of working with a regular static server.

Example

Let's say we have an existing Angular project and want to improve development experience with hq.

All, we need to do is to add our global style file and script to the head and body of index.html correspondingly. So when hq serves index, it will serve styles and scripts as well

<!doctype html>
<html lang="en">
<head>
    ...
    <link rel="stylesheet" href="/styles.css">
</head>
<body>
    <app-root></app-root>
    <script src="/main.ts"></script>
</body>
</html>

For most of the frameworks that is already enough, and you can skip the next step, but Angular requires a bit more attention. It depends on zones and Reflect.metadata APIs that are on very early stages and are not supported by hq out of the box. In fact angular includes them into your code during the build. So we are going to import necessary polyfills on top of main.ts

import 'core-js/proposals/reflect-metadata';
import 'zone.js/dist/zone';
import 'zone.js/dist/zone-patch-canvas';
...

And that's it, now you are ready to start developing by running hq in the project root.

Is it good for production?

Yes, you can definitely use build command to make a production ready build with all necessary optimisations created for you by hq. hq build

Alternatively you can use hq as a production server for internal projects such as admin panels and dashboards. It will work perfectly with all modern browsers. To activate production server mode set NODE_ENV to production before running hq NODE_ENV=production hq

Does it support HTTP2?

Yes, it does. Drop your certificate and a key somewhere in the root of your project and hq will serve it trough HTTP2 e.g.

cert/server.pem
cert/server-key.pem

For generating self signed certificates check this tool.

More benefits with .babelrc, .postcssrc and .posthtmlrc

With hq you don't need to take care of babel, postcss or posthtml configuration, the latest web standards will be supported out of the box. However if you need to support a feature that does not have a common interpretation (like svg react imports) or experimental features from an early stage (like nested css), or you have your own plugins that only make sense in your project just add .babelrc, .postcssrc or .posthtmlrc configurations to the root of your project with the list of all desired plugins e.g.

.babelrc

{
  "plugins": [
    "babel-plugin-transform-remove-console"
  ]
}

.postcssrc

{
  "plugins": [
    ["postcss-nested", { "preserveempty": true }]
  ]
}

.posthtmlrc

{
  "plugins": [
    ["posthtml-doctype", { "doctype" : "html 5" }],
    "posthtml-md"
  ]
}

and it will be automatically merged with hq configuration. Do not forget to install these additional plugins to your project before running hq.

Looking for documentation? You don't need it!

It just works out of the box. Install it now to create something fascinating npm install -g @hqjs/hq