Skip to main content
Deno 2 is finally here 🎉️
Learn more

About

Fleet is a build tool that prerenders html and bundles ts/js and css.

Tooling

Getting Started

First, install Deno.

Create a folder to house the project. Within this folder, create another folder to contain the source code.

Next, add some content to the source directory.

|-- src
    |-- +client.ts
    |-- +prerender.ts
    |-- +index.html
    |-- +styles.css

File Types

+client

+client.ts/js files are converted to js, bundled, and minified at build time. Link to +client.js (since ts will be converted to js) in +index.html for the scripts to be utilized.

<!-- src/+index.html -->
<body>
   <!-- content -->
   <script type="module" src="./+client.js">
</body>

+prerender

If there is a +prerender.ts/js file in the same directory as a +index.html file, +prerender.ts/js will be run at build time and update +index.html with the new contents.

+prerender.ts/js files must export a prerender async function to be executed during the build. This function has document as a parameter, and must return the modified document. This modified document will be written to the output.

Document methods or other rendering techniques can be utilized to create new content and make updates. You can run this same code in +client.ts/js to have it rendered on the client instead.

// src/+prerender.ts
import { type Prerender } from "https://deno.land/x/fleet/mod.ts";

export const prerender: Prerender = async (document: Document) => {
    // fetch data...

    // update the DOM...
    const content = document.querySelector<HTMLDivElement>("#content");
    if (content) content.textContent = data;

    return document;
};

+styles

+styles.css files are bundled and minified. Be sure to also link to the style sheet in +index.html.

<!-- src/+index.html -->
<head>
   <link rel="stylesheet" href="./+styles.css" />
</head>

Build

To build the project, import fleet to create a build step. fleet is just another function, steps can be added before or after.

// build.ts
import { type Config, fleet } from "https://deno.land/x/fleet/mod.ts";

export const config: Config = {
    srcDir: "src",
    outDir: "public",
    server: true,
};

await fleet(config);

Create a build task in deno.jsonc to run this module.

// deno.jsonc example
{
    "tasks": {
        "build": "deno run -A ./build.ts"
    },
    "fmt": {
        "include": ["./src"],
        "useTabs": true,
        "indentWidth": 4
    },
    "lint": {
        "include": ["./src"]
    },
    "compilerOptions": { "lib": ["dom", "deno.ns"] }
}

Execute deno task build and inspect the contents of the outDir specified. Then navigate to localhost:8000 to view your build.