Step 2 of 12 17% complete

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:

project structure
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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 scripts

Architecture Flow

Here's how a request flows through NoEgo's layered architecture:

1

Server Flow (Dinner)

Controllerhandles requestServicebusiness logicRepository@QueryBinderDatabaseSQLite/MySQL
2

Frontend Flow (Forge)

Preferred: Direct Service Calls
Browseruser requestPage.svelteLoader.load.tsdirect callService@ComponentRepo@QueryBinderNo HTTP overhead!

Why 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 .env yourself (e.g., import "dotenv/config" in server/boot.ts)
  • Set variables in your shell before running noego dev
.env
1
2
3
4
5
6
7
8
9
# Server configuration
PORT=3000
NODE_ENV=development

# Database connection
DATABASE_URL=./data/app.sqlite

# Application secrets
SESSION_SECRET=your-secret-key-here

Access these variables in your code using process.env:

server/boot.ts
1
2
3
4
5
6
7
8
9
10
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.

Troubleshooting

NoEgo

© 2025 NoEgo. All rights reserved.