File System Organization#

Jac client supports flexible file organization patterns that allow you to structure your code for maintainability and scalability.

Overview#

This guide covers two main aspects of file organization:

Separating Backend and Frontend Code - Organizing server-side and client-side logic
Nested Folder Imports - Managing imports across multiple directory levels

Quick Start#

Backend/Frontend Separation#

Jac allows you to organize code by execution environment: - Use .jac files for backend logic (nodes, walkers) - Use .cl.jac files for frontend-only code - Or mix both in the same file using cl blocks

Example:

# Backend
node Todo { has text: str; }

# Frontend
cl {
    def app() -> any {
        return <div>Hello</div>;
    }
}

Nested Folder Imports#

Jac preserves folder structure during compilation, allowing you to organize code in nested folders:

Example:

# From level1/Button.jac importing from root
cl import from ..ButtonRoot { ButtonRoot }

# From root importing from level1
cl import from .level1.Button { Button }

Guides#

The app.jac Entry Point - Required entry point file and app() function
Backend/Frontend Separation - Complete guide to organizing server and client code
Nested Folder Imports - Guide to managing imports across directory levels

Examples#

Working examples demonstrating file organization:

nested-basic/ - Simple nested folder structure
nested-advance/ - Advanced multi-level nesting

Run any example:

cd jac-client/jac_client/examples/nested-folders/<example-name>
npm install
jac serve app.jac