Configuration

This guide covers the key configuration files in a Streak.js project.

tsconfig.json

Streak projects use JSX as a build-time templating language. The following settings are required:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "moduleResolution": "bundler",
    "baseUrl": "src/",
    "strict": true,
    "target": "ESNext",
    "module": "ESNext",
    "types": ["bun-types"]
  },
  "include": ["src/**/*"]
}

Option	Why
`jsx: "react-jsx"`	Enables TSX compilation without explicit React imports
`moduleResolution: "bundler"`	Matches Bun's module resolution behavior
`baseUrl: "src/"`	Allows bare imports like `import { x } from "services/MyService"`
`strict: true`	Catches common errors at build time

With baseUrl set to src/, imports resolve from the src directory:

import { getHomeData } from "services/SanityServices";  // src/services/SanityServices.ts
import Button from "@common/components/button/Button";   // src/common/components/button/Button.tsx

TailwindCSS

Streak uses Tailwind CSS compiled at build time. There is no CSS-in-JS.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

input.css

Create src/common/styles/input.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Build Scripts

Add these scripts to package.json:

{
  "scripts": {
    "css-build": "tailwindcss -i ./src/common/styles/input.css -o ./public/styles/tailwind.css",
    "css-dev": "tailwindcss -i ./src/common/styles/input.css -o ./public/styles/tailwind.css --watch",
    "dev": "concurrently \"bun run css-dev\" \"bun run dev:streak\"",
    "dev:streak": "streak-forge dev",
    "build": "bun run css-build && streak-forge pre-build"
  }
}

The compiled CSS is written to public/styles/tailwind.css and linked from your layout's <head>.

ESLint

Streak projects use ESLint 9 with flat config and TypeScript support.

// eslint.config.js
import eslint from "@eslint/js";
import tseslint from "typescript-eslint";

export default [
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  {
    files: ["src/**/*.{ts,tsx}"],
    rules: {
      "@typescript-eslint/no-explicit-any": "warn",
      "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
    },
  },
  {
    ignores: ["out/", "public/assets/js/"],
  },
];

Install the dependencies:

bun add -d eslint @eslint/js typescript-eslint

Environment Variables

Streak reads the following environment variables at build time and during development:

Variable	Default	Description
`NODE_ENV`	`"development"`	Set to `"production"` for production builds
`PORT`	`3690`	Dev server port
`STATIC_BUILD_DIR`	`"out"`	Output directory for `streak-forge pre-build`
`TARGET_SRC`	`"src"`	Root directory for handlers, layouts, and widgets

Set these in a .env file or pass them inline:

PORT=4000 bun run dev

.gitignore

Recommended .gitignore entries for a Streak project:

node_modules/
out/
.env
*.log
public/styles/tailwind.css

out/ is generated by every build and should not be committed.
public/styles/tailwind.css is compiled from input.css and regenerated on build.
Third-party JS in public/assets/js/should be committed — it is loaded at runtime via loadPackage and is not regenerated by any build step.