nette/claude-code/frontend-development

Frontend Development

Technology Stack

• Build system: Vite with TypeScript support
• JavaScript: ES Modules (ESM) with "type": "module" in package.json
• Styling: SCSS with modular component architecture
• Asset integration: Nette Assets for PHP-frontend bridge
• Admin framework: Bootstrap for rapid interface development
• Code quality: ESLint with @nette/eslint-plugin
• Forms: Nette Forms with progressive enhancement

Asset Architecture Strategy

Source vs Built Assets separation:

• Development assets: assets/ directory with source files (SCSS, TypeScript, images)
• Production assets: www/assets/ with optimized, versioned files for browsers

Coding Standards

• Use single quotes for strings unless containing apostrophes (CSS, SCSS, JavaScript)

Nette Assets Integration Patterns

Basic asset loading

{* Loads complete bundle with all dependencies *}
{asset 'app.js'}

Configuration

assets:
	mapping:
		default:
			type: vite
			path: assets       # REQUIRED in practice - must match Vite's build.outDir

path is optional in the schema and nothing validates it, but when omitted it falls back to %wwwDir%, so the manifest is looked up in www/.vite/manifest.json instead of www/assets/.vite/manifest.json and you get RuntimeException: Failed to read Vite manifest. devServer defaults to true, so there is no need to write it.

HMR works only when the application is in debug mode and the dev server is running, which PHP learns from the file .vite/nette.json that the plugin writes into the mapper's path. The lookup is hardcoded, so renaming the file with the plugin's infoFile option silently disables the detection; then set devServer: '<url>' in NEON by hand.

`type="module"` is added only to Vite entry points. A script served by a file mapper renders as a plain <script>, so an import in it fails with Cannot use import statement outside a module. Write the attribute yourself, <script type="module" n:asset="app.js"></script>; the only option {asset} accepts for such a file is version, anything else throws.

Data Flow from Backend to Frontend

Passing data to JavaScript:

{* In template *}
<script>
window.appConfig = {
	apiUrl: {$baseUrl . '/api'},
	userId: {$user->isLoggedIn() ? $user->getId() : null},
	locale: {$locale},
	csrfToken: {$csrfToken}
};
</script>
{asset 'app.js'}

Latte automatically applies context-sensitive escaping – values inside <script> are JSON-encoded, so strings get quoted and null stays null.

// In JavaScript component
const { apiUrl, userId, csrfToken } = window.appConfig;
fetch(`${apiUrl}/user-data`, {
	headers: { 'X-CSRF-Token': csrfToken }
});

Naja (AJAX Library)

Naja is the standard AJAX library for Nette – it handles snippet redrawing, form submissions, and history integration:

npm install naja

import naja from 'naja';
// Initialize after DOM is ready
naja.initialize();

Naja automatically intercepts links and forms with the ajax CSS class and handles snippet updates from the server. See Naja documentation for configuration and extensions.

Nette Forms Integration

Requires nette-forms npm package:

npm install nette-forms

Standard enhancement pattern:

import netteForms from 'nette-forms';
// Initialize Nette Forms validation
netteForms.initOnLoad();

TypeScript

Vite transpiles .ts entry points out of the box but never type-checks them. For checking, install typescript, set "moduleResolution": "bundler" and "noEmit": true in tsconfig.json, and add a script "typecheck": "tsc --noEmit" to package.json.

ESLint Configuration

npm install --save-dev @nette/eslint-plugin eslint

Basic configuration with recommended rules:

// eslint.config.js
import nette from '@nette/eslint-plugin';
import { defineConfig } from 'eslint/config';
export default defineConfig([
	{
		extends: [nette.configs.recommended],
	},
]);

Linting JavaScript in Latte templates:

npm install --save-dev eslint-plugin-html

// eslint.config.js
import nette from '@nette/eslint-plugin';
import pluginHtml from 'eslint-plugin-html';
import { defineConfig } from 'eslint/config';
export default defineConfig([
	{
		extends: [nette.configs.recommended],
	},
	{
		files: ['app/**/*.latte'],
		plugins: {
			html: pluginHtml,
		},
		processor: '@nette/latte',  // Handles Latte tags in JS
	},
]);

This allows ESLint to check JavaScript inside <script> tags with Latte variables:

<script>
let name = {$name};
</script>

TypeScript support:

npm install --save-dev typescript typescript-eslint

import nette from '@nette/eslint-plugin/typescript';
export default defineConfig([
	{
		extends: [nette.configs.typescript],
	},
]);

Custom rules:

• @nette/no-this-in-arrow-except - Prevents this binding issues in arrow functions
• @nette/prefer-line-comments - Enforces // over /* */ for single-line comments

Tailwind CSS Integration

When using Tailwind CSS, configure it to scan Latte templates for class names:

/* assets/css/app.css */
@import 'tailwindcss';
@source '../app/**/*.latte';

Documentation

The full Nette documentation for this topic is bundled with the plugin. Read a page when you need details beyond this skill:

• Nette Assets – {asset}, n:asset, {preload}, mappers, the PHP API
• Vite Integration – dev server, entry points, production build, Docker and HTTPS
• Assets Configuration – the assets: section

Naja, the AJAX library, has its own documentation at https://naja.js.org/.