Smart server and build tool that gets you
Tags: javascript, webdev, webpack, hq
Published: 2020-07-06 11:16:39

It is difficult to imagine the modem web without complex build tools like Webpack and Rollup. Only 25 years ago, when JavaScript was born, things were quite different. Websites were so simple it was enough to open a notepad, launch a web server and proceed to write your code. Basic html, a sprinkle of css, a pinch of javascript and you were a good enough developer to launch your website, a books catalogue, or a calendar. Just reload your site to see the changes you made in your notepad and get that instant feedback to aid you in your development. This made web dev attractive in its simplicity and openness to experiments.

So what has changed over the years and why is the web so much more complex now? Here’s a few reasons why:
* First off, the websites themselves are much more powerful these days - they can work offline, support complex multimedia and behave more like apps, rather than websites;
* The number of scripts has gone up to megabytes and to make things work fast you have to compress your scripts, delete unnecessary code and develop modules;
* Rapid growth of JavaScript led to a permanent lagging of browser capabilities from the current specifications, so you are forced to compile JavaScript into JavaScript for your browser;
* npm as a package manager has won the masses giving web developers access to a plethora of ready-made solutions backed by security audit. This however popularized CommonJS not supported by browsers;
* Meta Languages like TypeScript, Scss, Less, Pug emerged as a response to the limitations of standard languages. Compiling them is now a part of our building pipelines;
* Last but not least, frameworks that serve template engines, like JSX, Vue and Svelte brought back declarativeness and simplicity to components. They were the answer to a forgotten E4X or incomplete HTML Imports specs, but added another reason why the modern web needs to be compiled.

Not to mention the routine operations like image compression and composing service workers and setting up HTTPS.

All of the above procedures were naturally added for a reason, as we can truly develop impressive projects – coop 3D games using WebGL, group calls using WebRTC or something as mundane as a chat using WebSockets. The baggage we have accumulated over the 25 years helps us develop high quality solutions ready to scale and easy to maintain. That’s all good, but you know what? The simplicity that started the boom off 25 years ago is gone, along with the time to market, and the instant feedback from simply updating your page to see the changes you’ve made.

In 2018, to help ease the pain of modern web development, [hq](https://hqjs.org/) was born. A modern smart static web server and build tool that just works. `Hq` distributes your source files, eliminating the difference between what you write and what the browser understands. In addition, each file is processed on demand, making your work incredibly fast. By analyzing `UserAgent`, `hq` understands what your browser can do and converts a minimum of code to ensure its functionality. So in the latest Chrome, your code will remain virtually unchanged. All modules are converted to ESM format, metalanguages are compiled in JavaScript, CSS and HTML. So no matter what frameworks or technologies you use, `hq` will simply work out of the box. 

To start the server you need:

1. Install hq from npm using ```sh
npm i -g @ hqjs/hq
```
2. Make sure that your project has an `index.html` file with connected scripts and styles (unless of course they are connected in JavaScript). For instance: ```html
<html>
<head>
  <title>Hello HQ</title>
  <link rel="stylesheet" href="/main.scss">
</head>
<body>
  <script src="/index.ts">
</body>
</html>
```
3. Start the server in the root of the project with a command ```sh
hq
```

After that, the development server with a live reboot will instantly be available at the address that appears in the console (usually this is [http://localhost:8080](http://localhost:8080)).

* If you are using VSCode it's even more simple than that. Install the [HQ Live Server plugin](https://marketplace.visualstudio.com/items?itemName=hqjs.hq-live-server#overview) and start `hq` with one click!

* So you need a **PRODUCTION** solution? Set the `NODE_ENV` environment variable to `production` and `hq` will launch this mode:
```sh
NODE_ENV=production hq
```

* Do you need HTTP2/HTTPS? Just add certificates anywhere in the project folder, `hq` will find and use them for signing (during development, you can use the [mkcert tool](https://github.com/FiloSottile/mkcert) to generate certificates).

* If you need a static build, no problem, one ```bash
hq build
``` command will assemble your project in a modular and non-modular mode (to support older browsers). The build result will be placed in the `dist` folder and can be used by any old-generation static server.

There is no configuration in `hq`, which is enough in 99% of cases, but if you need to crank up some non-standard transformations with the code, you can extend `hq` using the [babel](https://babeljs.io/), [postcss](https://postcss.org/) and [posthtml](https://posthtml.org/) plugins. Just install the necessary plugins and add the appropriate configuration file (for example `.babelrc`) to the root of your project.

I hope this tool will simplify your life and bring back the ease and fun of experiments that we saw at the very beginning of the journey. If like `hq`, support the project with a like or a star on [GitHub](https://github.com/hqjs/hq), join me in developing it and [report problems](https://github.com/hqjs/hq/issues/). I will be happy to help.