hqjs

Lightning fast, zero configuration, web application development server

🎓 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, Vue, React, Angular and many others out of the box

😎 Understands formats

.js, .jsx, .mjs, .vue, .ts, .coffee, .json, .css, .scss, .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

Installation

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

Usage

Run inside project root hq

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.

First of all, we need 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>

Second is a very Angular specific problem - 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 in file polyfills.ts and adds the file to your build. So we are going to use the file and import it on top of main.ts


import './polyfills.ts';
...

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

More benefits with .babelrc

With hq you don't need to take care of babel configuration, the latest ecma script standard (including class properties and decorators) 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 optional chaining), just add .babelrc configuration to the root of your project with the list of all desired plugins


{
  "plugins": [
    "@babel/plugin-proposal-optional-chaining"
  ]
}

and it will be automatically merged with hq configuration.

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