AbsoluteJS

Build & Manifest

The build system that bundles your frontend code and creates the asset manifest.

#Configuration File

AbsoluteJS uses an absolute.config.ts file at the root of your project to configure the build. Use defineConfig() for type-safe configuration:

Build Pipeline
Input
Frontend Directories
pages/
styles/
build()
Bundles all components
Generates content hashes
Creates asset manifest
Output
Manifest Object
{
  HomeIndex: "/build/Home-a1b2c3.js",
  HomeCSS: "/assets/css/home.m93k7s.css"
}
Usage
asset(manifest, key)
Looks up bundled path from the manifest object
.get('/', () => handleReactPageRequest(
  Home,
  asset(manifest, 'HomeIndex'),
  { cssPath: asset(manifest, 'HomeCSS') }
))
TS
// absolute.config.ts
import { defineConfig } from '@absolutejs/absolute';

export default defineConfig({
  buildDirectory: 'build',          // Default: 'build'
  assetsDirectory: 'assets',        // Default: 'assets'
  publicDirectory: 'public',        // Public static assets
  reactDirectory: 'src/frontend',   // Path to React files
  svelteDirectory: 'src/svelte',    // Path to Svelte files
  vueDirectory: 'src/vue',          // Path to Vue files
  htmlDirectory: 'src/html',        // Path to HTML files
  htmxDirectory: 'src/htmx',        // Path to HTMX files
  angularDirectory: 'src/angular',  // Path to Angular files
  tailwind: {                       // Tailwind CSS configuration
    input: './src/styles/globals.css',
    output: './build/styles.css'
  },
  options: {                        // Additional build options
    preserveIntermediateFiles: false,
    throwOnError: false
  }
});

#The prepare() Function

The prepare() function loads your config, builds the app, and returns an Elysia plugin with HMR support plus the asset manifest:

TS
import { prepare, asset } from '@absolutejs/absolute';
import { handleReactPageRequest } from '@absolutejs/absolute/react';
import { Elysia } from 'elysia';
import { Home } from '../frontend/pages/Home';

// prepare() loads absolute.config.ts and builds your app
const { absolutejs, manifest } = await prepare();

new Elysia()
  .use(absolutejs)  // Adds HMR routes in development
  .get('/', () =>
    handleReactPageRequest({ Page: Home, index: asset(manifest, 'HomeIndex') })
  )
  .listen(3000);
absolutejsAn Elysia plugin that adds HMR routes in development
manifestMaps entry point names to their bundled asset paths

#Configuration Examples

For a simple React app, you only need to specify the React directory:

TS
// absolute.config.ts
import { defineConfig } from '@absolutejs/absolute';

export default defineConfig({
  reactDirectory: './src/frontend'
});

For multi-framework apps, specify multiple directories:

TS
// absolute.config.ts
import { defineConfig } from '@absolutejs/absolute';

export default defineConfig({
  reactDirectory: './src/frontend/react',
  svelteDirectory: './src/frontend/svelte',
  vueDirectory: './src/frontend/vue',
  angularDirectory: './src/frontend/angular'
});

#The Manifest

The manifest is an object that maps entry point names to their bundled file paths:

TS
// The manifest maps entry point names to their bundled paths
{
  "HomeIndex": "/build/HomeIndex-x7f2a.js",
  "AboutIndex": "/build/AboutIndex-b3c1d.js",
  "DashboardIndex": "/build/DashboardIndex-e9k4m.js"
}
Entry point namesDerived from your component file names (e.g., Home.tsx -> HomeIndex)
Hashed pathsInclude content hashes for cache busting

#Asset Lookup with asset()

Use the asset() function to look up bundled paths from the manifest:

TS
import { asset } from '@absolutejs/absolute';

// asset() looks up the bundled path from the manifest
const indexPath = asset(manifest, 'HomeIndex');
// Returns: "/build/HomeIndex-x7f2a.js"

// Use it in your page handlers
.get('/', () =>
  handleReactPageRequest({ Page: Home, index: asset(manifest, 'HomeIndex') })
)

#Tailwind CSS Integration

Enable Tailwind CSS by providing the input and output paths in your config:

TS
// absolute.config.ts
import { defineConfig } from '@absolutejs/absolute';

export default defineConfig({
  reactDirectory: './src/frontend',
  tailwind: {
    input: './src/styles/globals.css',
    output: './build/styles.css'
  }
});

#Build Options

Additional build options can be set in your config:

TS
// absolute.config.ts
import { defineConfig } from '@absolutejs/absolute';

export default defineConfig({
  reactDirectory: './src/frontend',
  options: {
    preserveIntermediateFiles: true  // Keep intermediate build artifacts
  }
});

#CLI Commands

AbsoluteJS provides a CLI for development and production:

BASH
# Development server with HMR
absolute dev src/backend/server.ts

# Production build and start
absolute start src/backend/server.ts

# With custom config path
absolute dev src/backend/server.ts --config ./my-config.ts

# Format code
absolute prettier --write

# Lint code
absolute eslint

# Show system info
absolute info