Step 2: Project Structure and Configuration
What You'll Learn
- Understand the NoEgo project directory structure
- Learn about configuration files and their purposes
- Explore the relationship between different components
- Configure TypeScript and build settings
What You'll Build
A clear understanding of where to place different types of code.
Directory Structure
After creating your project, you'll see the following directory structure:
my-app/
├── server/
│ ├── boot.ts # Express app bootstrap
│ ├── server.ts # NoEgo server entry
│ ├── controller/ # HTTP controllers
│ ├── service/ # Business logic services
│ ├── repo/ # Database access layer
│ └── openapi/ # API route definitions
├── frontend/
│ ├── client.ts # NoEgo client entry
│ ├── index.html # HTML shell template
│ ├── component/ # Svelte components
│ ├── lib/ # Frontend utilities (navigate, formatters)
│ ├── layout/ # Page layouts
│ ├── pages/ # Page components
│ ├── openapi/ # UI route definitions
│ └── stitch.yaml # UI configuration
├── migrations/ # Database migrations
├── noego.config.yml # NoEgo configuration
├── proper.json # Migration configuration
├── tsconfig.json # TypeScript configuration
└── package.json # Dependencies and scriptsArchitecture Flow
Here's how a request flows through NoEgo's layered architecture:
Server Flow (Dinner)
Frontend Flow (Forge)
Preferred: Direct Service CallsWhy direct calls? Loaders run on the server, so they can import and call Services directly via dependency injection—no HTTP round-trip needed.
The pattern: Frontend loaders call Services directly (no HTTP), which use Repositories to access the database. Data flows back to render the page. Controllers are only needed for external API access.
Key Directories Explained
server/ Server-Side Code
The server/ directory contains all your server-side TypeScript code:
- boot.ts: Creates the Express app and middleware
- server.ts: Entry that wires Dinner + controllers
- controller/: HTTP request handlers that process API endpoints
- service/: Business logic layer with IoC-managed services
- repo/: Database access using SQLStack
frontend/ Frontend Code
The frontend/ directory contains all your Svelte components and UI configuration:
- component/: Reusable Svelte components
- lib/: Shared UI helpers (navigation, formatting)
- layout/: Page layout wrappers
- pages/: Route-specific page components
- openapi/: YAML files defining page routes
Configuration Files
Your project includes several configuration files. You don't need to modify these to get started - the defaults work out of the box.
- tsconfig.json - TypeScript settings with decorators enabled for dependency injection
- proper.json - Database migration configuration
- frontend/stitch.yaml - Tells Forge where to find your UI OpenAPI routes
- server/stitch.yaml - Tells Dinner where to find your API OpenAPI routes
- noego.config.yml - Build and dev server settings
- vite.config.js - Frontend build configuration (Vite + Svelte)
Open these files in your project to see the full configuration. We'll explore specific options as needed in later steps.
Environment Variables
NoEgo reads environment variables from process.env. It does not auto-load a .env file, so you have two common options:
- Load
.envyourself (e.g.,import "dotenv/config"inserver/boot.ts) - Set variables in your shell before running
noego dev
# Server configuration
PORT=3000
NODE_ENV=development
# Database connection
DATABASE_URL=./data/app.sqlite
# Application secrets
SESSION_SECRET=your-secret-key-hereAccess these variables in your code using process.env:
import "dotenv/config";
import express from "express";
export default function boot() {
const app = express();
app.use(express.json());
const dbUrl = process.env.DATABASE_URL;
return app;
}Important: Never commit your .env file to version control.
Create a .env.example file with placeholder values for documentation.
Development vs Production Mode
NoEgo makes both development and deployment simple:
Development Mode (npx noego dev)
- Changes appear instantly—no manual refresh needed
- Helpful error messages to fix issues fast
Production Mode (npx noego build)
- Optimized output in
dist/ - Run with
node dist/no_ego.js
What's Next?
Now that you understand the project structure and configuration, let's create your first Svelte page and learn the basics of Forge routing.