https://github.com/lucsoft/esbuild_serve

A Deno Web bundler.
https://github.com/lucsoft/esbuild_serve

bundler deno esbuild webdev

Last synced: 14 days ago
JSON representation

A Deno Web bundler.

• Host: GitHub
• URL: https://github.com/lucsoft/esbuild_serve
• Owner: lucsoft
• Created: 2022-03-15T19:39:28.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-08-18T15:07:11.000Z (3 months ago)
• Last Synced: 2024-10-04T16:44:18.268Z (about 1 month ago)
• Topics: bundler, deno, esbuild, webdev
• Language: TypeScript
• Homepage:
• Size: 65.4 KB
• Stars: 11
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# esbuild_serve

Live Reload. Persistent HTTP Import Resolution. Templates. Dev Server. Polyfills. A Deno Web bundler.

## Get denoing 🦕🔨

### Pages

Pages are a simple way to get going fast.

```ts

import { serve } from "https://deno.land/x/esbuild_serve/mod.ts";

serve({

    port: 8100,

    pages: {

        "index": "demo/index.ts"

    }

});

```

This will automatically create a HTML Template for you. If you want to have a custom one just place it in `templates/demo/index.html`.

### Custom Assets

Adding plain assets to your build folder goes like this

```ts

import { serve } from "https://deno.land/x/esbuild_serve/mod.ts";

serve({

    pages: { "index": "index.ts" },

    assets: {

        "favicon.ico": "./static/favicon.ico"

    }

})

```

### Custom Templates

If you have have a setup like this: `serve({ pages: { "/document/page/index": "index.ts" } })`

```

Resoultion will be like this:

/templates/document/page/index.html

If this fails, then:

/templates/index.html

Fallback:

Autogenerated via filename

```

You can place an html file at these locations.

## Releasing your bundle

As simple as starting deno with the args `deno run -A serve.ts build`

## Spicing your Builds

1. Define globalThis variables

    ```ts

    serve({

        globals: {

            "BUID_TIMESTAMP": new Date().getTime(),

            "GIT_BRANCH": getGitBranch(),

            "COPYRIGHT_YEAR": new Date().getFullYear()

        }

    })

    ```

2. Adding Polyfills

    ```ts

    serve({

        polyfills: [

            "https://unpkg.com/construct-style-sheets-polyfill",

            "https://unpkg.com/compression-streams-polyfill"

        ]

    })

    ```

## Note

- Since v1.2.0 live reload is fully done by esbuild (since 0.17) and the dev server is based opon esbuild (with custom routing added on top)

## Internal Plugins

Only want templates or http imports? just import them!

```ts

import { build } from "https://deno.land/x/esbuild/mod.js";

import { autoTemplates } from "https://deno.land/x/esbuild_serve/features/templates.ts";

import { httpImports } from "https://deno.land/x/esbuild_serve/features/httpImports.ts";

build({

    entryPoints: {

        app: "app.ts"

    },

    plugins: [

        autoTemplates({

            pages: {

                "app": "./app.ts"

            }

        }),

        httpImports({ sideEffects: false }),

    ]

})

```