Create a local TSX project

Move from the browser-only document to a local TSX project with a generated bundle.

The sequence installs the package, configures automatic TSX, builds `dist.js` and opens the mounted greeting.

Table of contents

Main APIs

mount: Starts a Valyrian.js application on a DOM target.
inline: Bundles build input for server-side tooling.

1. Install

Create the project and install Valyrian.js.

bash

mkdir my-valyrian-app
cd my-valyrian-app
npm init -y
npm install valyrian.js

2. Configure TSX

Create tsconfig.json so TypeScript resolves the automatic TSX runtime from Valyrian.js.

json

{
  &quot;compilerOptions&quot;: {
    &quot;jsx&quot;: &quot;react-jsx&quot;,
    &quot;jsxImportSource&quot;: &quot;valyrian.js&quot;
  }
}

3. Create the browser entry

Create index.tsx with the same mount flow used by the CDN path.

tsx

import { mount } from &quot;valyrian.js&quot;;

function App() {
  return &lt;main&gt;Hello from local Valyrian.js&lt;/main&gt;;
}

mount(&quot;body&quot;, App);

4. Create the build script

Create build.mjs. inline bundles index.tsx and resolves { raw, map, file }. Write raw to dist.js. Unknown file types and transformation failures reject the call.

js

import fs from &quot;node:fs&quot;;
import { inline } from &quot;valyrian.js/node&quot;;

const result = await inline(&quot;./index.tsx&quot;, { compact: true });
fs.writeFileSync(&quot;./dist.js&quot;, result.raw);
console.log(&quot;Built dist.js&quot;);

5. Load the bundle

Create index.html beside dist.js so the browser loads the generated bundle.

html

&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;title&gt;Valyrian.js App&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;script src=&quot;./dist.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;

6. Build and run

Build the entry, start the pinned Node.js static server at http://localhost:8000 and open that URL. The page should show Hello from local Valyrian.js.