#hot-reload #html-css #js #wasm #html5 #autoreload #css3

app http-horse

HTTP Hot Reload Server for HTML, CSS, JavaScript/TypeScript and WebAssembly web development

5 releases

0.1.4 Aug 27, 2024
0.1.3 Aug 27, 2024
0.1.2 Aug 25, 2024
0.1.1 Aug 21, 2024
0.1.0 Oct 29, 2023

#116 in Development tools

Download history 514/week @ 2024-08-21 99/week @ 2024-08-28 32/week @ 2024-09-11 21/week @ 2024-09-18 16/week @ 2024-09-25 14/week @ 2024-10-02

208 downloads per month

ISC license

43KB
525 lines

http-horse 🐴

Crates.io

http-horse is an HTTP Hot Reload Server designed for web development with HTML, CSS, JavaScript/TypeScript, and WebAssembly. This tool allows you to automatically reload your web pages as you develop, providing a seamless development experience.

Note: http-horse currently only supports macOS 🍎💻. Support for other operating systems (Linux, FreeBSD) is planned but not yet available. Track the progress in issue #1.

Table of Contents

Installation

In the future, pre-built binaries will be provided for installation.

For now, please build from git repo sources (described in the next section), or use cargo to install the latest release from crates.io:

cargo install -f http-horse

Building http-horse from git repo sources

Ensure you have Rust installed on your macOS system. Then, you can clone this repository and build the application using Cargo:

git clone https://github.com/ctsrc/http-horse.git
cd http-horse
cargo build --release

Usage

Basic Usage

To serve a directory containing your web project's output files, use the following command:

RUST_LOG=debug cargo run --release -- ./example_web_project/out/

This command starts http-horse, which will serve both a status page and your project's pages. The output will provide the URLs for both servers:

2023-10-29T05:06:49.278038Z  INFO http_horse: Status pages will be served on http://[::1]:59917
2023-10-29T05:06:49.278089Z  INFO http_horse: Project pages will be served on http://[::1]:59918

Open these URLs in your web browser to view the status and project pages.

Automatic Browser Launch

To automatically open the status and project pages in your default web browser, use the --open option (-o for short):

RUST_LOG=debug cargo run --release -- --open ./example_web_project/out/

Status Web-UI Color Schemes

The status web-UI supports five built-in color schemes:

  • Midnight Purple (Dark Mode)
  • Slate Green (Dark Mode)
  • Abyss Blue (Dark Mode)
  • Graphite & Copper (Dark Mode, default)
  • Crimson & Charcoal (Dark Mode)

You can select a color scheme using the --color-scheme (-c) option. For example:

RUST_LOG=debug cargo run --release -- -c crimson-and-charcoal --open ./example_web_project/out/

The corresponding argument values for the available color schemes are as follows:

  • midnight-purple
  • slate-green
  • abyss-blue
  • graphite-and-copper
  • crimson-and-charcoal

Editing your Project Source Files

To make changes to your project, edit your project source files using your favorite code editor. For example:

$EDITOR ./example_web_project/www/index.htm

Rebuilding your Project

After editing, rebuild your project.

In the following example, a Makefile is used, but http-horse is compatible with any build system. All that is required is that your build system outputs the built files into some directory that http-horse can then serve from and watch for changes.

cd example_web_project/
make

See example_web_project/GNUmakefile for a very basic sample makefile that copies an index html source file from example_web_project/www/ into example_web_project/out/ without making any changes to it. The principle remains the same although in the real world you would usually have your build system make some kind of transformation on the source file or source files when producing output files.

Viewing Changes

When the project is rebuilt, the project pages that you have open in your browser will automatically reload to reflect the changes.

Advanced Usage

http-horse aims to support more advanced use cases, such as automatically running build commands when source files change. This feature is planned for future releases.

Example of the intended usage (feature not yet implemented):

RUST_LOG=debug cargo run --release -- -x "make" -C example_web_project/ -w example_web_project/www/ example_web_project/out/

Explanation of parameters in form of an ASCII "diagram":

RUST_LOG=debug cargo run --release -- -x "make" -C example_web_project/ -w example_web_project/www/ example_web_project/out/

                                         ^         ^                       ^                        ^
  -x defines build command to run  ------'         '--.                    |                        |
     when changes are detected in                     |                    |                        |
     the source dir.                                  |                    |                        |
                                                      |                    |                        |
  -C specifies working dir to run build command in.  -'                    |                        |
                                                                           |                        |
  -w indicates source dir to watch for changes.  --------------------------'                        |
                                                                                                    |
  Positional argument specifies out-dir to watch for changes.  -------------------------------------'

Put in a bulleted list:

  • -x: Defines the build command to run when changes are detected in the source directory.
    • The build command can be the name of a single command (such as, "make"), but it can also include any parameters that you want to pass to the build command. E.g.: "make -B -d"
  • -C: Specifies the working directory in which the build command is to be executed.
  • -w: Indicates the directory to watch for source file changes.
    • This argument can be repeated multiple times if multiple different source directories are to be watched, provided that the build command (-x argument) and build working directory (-C argument) remains the same for all of these source directories.
  • Positional argument: Specifies the output directory to monitor for changes.

License

http-horse is licensed under the ISC License. See the LICENSE file for details.

Dependencies

~9–18MB
~245K SLoC