JCC Express

The Basics

Views

Introduction

Server-side views are HTML templates rendered during a request. JCC Express MVC uses JCC Blade, a Blade-inspired engine that compiles Laravel-style syntax to HTML on the server (see JCC Blade for directives and custom extensions). Templates live under your configured views directory (typically resources/views) with the configured file extension (often .blade.html).

Configure the engine in app/Config/engine.ts (merged via app/Config/index.ts). The framework registers Express view settings from that config at boot.

For Inertia (React/Vue pages instead of Blade HTML), see Frontend and Response. Many apps use Blade for some routes and Inertia for others.


Configuration

Default shape (your project may adjust paths or the render binding):

TypeScript
// app/Config/engine.ts — illustrative
export const engine = {
  templateEngine: "jcc-blade",
  view: "resources/views",
  viewEngineExtension: "blade.html",
};

Wire the Blade render function in your app’s engine config (see the reference app’s app/Config/engine.ts).

  • view — Directory relative to the application root where templates are resolved.
  • viewEngineExtension — Extension passed to Express (omit it when naming views in code; see below).

Rendering a view

Dot paths, no extension — Express resolves users/index to a file under the views root, using the configured engine extension (e.g. resources/views/users/index.blade.html).

TypeScript
return res.render("users/index", { users, title: "Users" });

Same behavior with the global helper (see Response.md):

TypeScript
return view("users/index", { users, title: "Users" });

Route shorthand — Route.view(uri, viewName, data?) registers a GET route that calls res.render:

TypeScript
import { Route } from "jcc-express-mvc/Core";

Route.view("/welcome", "welcome", { name: "Taylor" });

Data and res.locals

The second argument to render / view becomes template data. In addition, res.locals is merged into what the engine sees. The framework already sets useful keys when middleware runs—for example validation errors and old input after failed validation, and _token for CSRF when csrf() is active (Request.md, CSRF-protection.md).

Use res.locals in middleware or controllers when every view should see a value without passing it on every render call.


Syntax overview (JCC Blade)

See JCC Blade in this folder for the full directive list, whitelisted {{ }} methods, and custom registerDirective usage.


Where files live

See Getting-Started/Directory-structure.md: views under resources/views/ (or your engine.view path), static assets under public/, and Vite sources under resources/ when you use @vite or Inertia.


Summary

  • Wire the engine in app/Config/engine.ts.
  • Render with res.render / view() or Route.view; merge data with res.locals as needed.
  • Blade syntax and directives: JCC Blade.
  • Vite and built assets in templates: Asset bundling.