Launching the Dev Server & Asset Directories

With your theme active and fully scaffolded, you are ready to enter your daily development routine. In this lesson, we will explore starting the local dev server and how to navigate WP Rig’s source asset folders.

1. Start the Dev Server

Every time you sit down to develop, run this command in your terminal inside the theme directory:

npm run dev

This command: 1. Initiates asset compilers in **watch mode**. 2. Spins up a BrowserSync proxy server. 3. Automatically opens your default web browser to the proxy URL (e.g., `https://wprig.io/`). 4. Launches a live reload loop: CSS modifications are injected instantly into the DOM without refreshing; PHP/JS saves trigger automated browser reloads.

2. Navigating the Source Directories

WP Rig follows a strict **Source vs. Compiled Artifacts** pattern. You **MUST** edit files exclusively under source directories. Never edit files in the root `assets/` directory directly, as they are overwritten by compilers during builds!

Look inside `assets/`:

assets/
├── css/
│   ├── src/             <-- EDIT THESE FILES ONLY
│   │   ├── editor.css
│   │   ├── global.css
│   │   └── navigation.css
│   └── (compiled files) <-- NEVER EDIT THESE (Overwritten)
└── js/
    ├── src/             <-- EDIT THESE FILES ONLY
    │   ├── global.ts
    │   └── navigation.ts
    └── (compiled files) <-- NEVER EDIT THESE (Overwritten)

CSS Architecture & PostCSS

JavaScript Compilation

The Build Watch Cycle

Whenever you save a file in a `/src/` folder: 1. The compiler catches the save event in less than 50ms. 2. It parses syntax, processes imports, low-level bundles, and minifies the results. 3. BrowserSync injects the updated files directly into your active browser tabs instantly!

In our next lesson, we will explore setting up your local AI agent to accelerate your development inside this workspace!