# Web toolchain

> Run JavaScript and TypeScript with Elide, serve files during development, process web assets, install npm packages and configure web builds in elide.pkl.

Run, serve, build and install dependencies for JavaScript and TypeScript projects.

## Run JavaScript and TypeScript

```bash
elide run app.js
elide run app.ts
```

TypeScript types are stripped. `.mjs`, `.cjs`, `.mts` and `.cts` also work.

## Serve and develop

```bash
elide serve dist   # serve a directory on 127.0.0.1:8080
elide dev public   # dev server on 127.0.0.1:3000; pages reload when files change
```

<img src="https://elide.help/assets/demos/dev-server.gif" alt="Running the Elide development server and reloading a changed page" width="1591" height="691" loading="lazy" decoding="async" class="rounded-lg border border-border my-6 w-full" />

Page reload applies to directories, not to a script passed to `elide dev`. `--host` and `--port` set the address,
`--no-watch` turns off watching, and `--no-tui` prints plain logs. More, including `--contexts`:
[Development Server](https://elide.help/docs/dev-server).

## Process assets

No manifest needed:

```bash
elide web build app.ts --out dist     # JavaScript
elide web build page.md --out dist    # HTML
elide web build style.css --out dist  # CSS
```

Several sources and shell globs are accepted.

## Install npm packages

```bash
elide install --ecosystems=npm
```

See [NPM Installer](https://elide.help/docs/toolchain/web/npm).

## Manifest settings

```pkl
web {
  minifyHtml = true
  css {
    minify = true
    targets {
      new { browser = "chrome"; version = "120" }
      new { browser = "safari" }
    }
  }
}

javascript {
  ecma = "stable"
}
```

| Property | Meaning | Default |
| --- | --- | --- |
| `web.minifyHtml` | Minify HTML, including inline scripts and styles. | `true` |
| `web.css.minify` | Minify CSS. | `true` |
| `web.css.targets` | CSS browser targets: `browser` (`chrome`, `firefox`, `safari`, `edge`, `opera` or other) and optional `version`. | none |
| `web.browsers` | Browser targets for all outputs; `css.targets` overrides it for CSS. | none |
| `javascript.ecma` | Declared ECMAScript edition: a year `2015` … `2025`, `"stable"` or `"latest"`. `elide project info` shows it; it does not change which syntax runs or how code is built ([JavaScript language](https://elide.help/docs/javascript-language)). | `"stable"` |

## Project builds

To build a site with `elide build`, declare a [static-site artifact](https://elide.help/docs/toolchain/web/static-site). To compile Java or
Kotlin for the browser, see [Browser WASM](https://elide.help/docs/toolchain/web/wasm).