---
title: Project Structure
description: The structure of a new Jaspr project.
---

---

Each Jaspr project is a normal Dart project including a `pubspec.yaml` file and `lib/` directory.

Depending on your chosen [**Rendering Mode**](/get_started/modes) and [**Hydration**](/get_started/hydration) settings,
your Jaspr project will have a slightly different project structure.

## Static/Server Mode with Automatic Hydration

```markdown
├── lib/
│   ├── components/
│   │   ├── counter.dart
│   │   └── ...
│   ├── pages/
│   │   ├── home.dart
│   │   └── ...
│   ├── app.dart
│   ├── ...
│   ├── jaspr_options.dart
│   └── main.dart
├── web/
│   └── images/
│       └── ...
├── pubspec.lock
└── pubspec.yaml
```

- The `lib` directory contains all your usual dart code, including components, pages, routes etc.
  depending on your architecture.

- The `lib/main.dart` file is the entry point for your **server** application. It calls `runApp()`
  and provides your root document component.

  Any component annotated with [`@client`](/utils/at_client) that is built during pre-rendering will automatically be hydrated on the client.

- The optional `lib/jaspr_options.dart` is auto-generated by Jasprs tooling. It exposes a top-level `defaultJasprOptions`
  that you should provide to the `Jaspr.initializeApp(options: ...)` call inside `lib/main.dart`.

- The `web` directory contains any static assets you want to access from your website, like images or fonts.
  Files inside this directory are later accessible through their relative url, e.g. `<domain>/images/logo.png`.

---

## Static/Server Mode with Manual Hydration

```markdown
├── lib/
│   ├── components/
│   │   ├── counter.dart
│   │   └── ...
│   ├── pages/
│   │   ├── home.dart
│   │   └── ...
│   ├── app.dart
│   ├── ...
│   └── main.dart
├── web/
│   ├── images/
│   │   └── ...
│   └── main.dart
├── pubspec.lock
└── pubspec.yaml
```

- The `lib` directory contains all your usual dart code, including components, pages, routes etc.
  depending on your architecture.

- The `lib/main.dart` file is the **server** entry point for your application. It calls `runApp()`
  and provides your root document component.

- The `web` directory contains any static assets you want to access from your website, like images or fonts.
  Files inside this directory are later accessible through their relative url, e.g. `<domain>/images/logo.png`.

  Additionally, any `.dart` file in here will be compiled to js and accessible through `<domain>/<filename>.dart.js`.

- The `web/main.dart` file is the **client** entry point for your application. It calls `runApp()` and provides
  the main app component, hydrating the pre-rendered html created by the server.

---

## Client Mode

```markdown
├── lib/
│   ├── components/
│   │   ├── counter.dart
│   │   └── ...
│   ├── pages/
│   │   ├── home.dart
│   │   └── ...
│   └── app.dart
├── web/
│   ├── images/
│   │   └── ...
│   ├── index.html
│   ├── styles.css
│   └── main.dart
├── pubspec.lock
└── pubspec.yaml
```

- The `lib` directory contains all your usual dart code, including components, pages, routes etc.
  depending on your architecture.

- The `web` directory contains any static assets you want to access from your website, like images or fonts.
  Files inside this directory are later accessible through their relative url, e.g. `<domain>/images/logo.png`.

  Additionally, any `.dart` files in here will be compiled to js and accessible through `<domain>/<filename>.dart.js`.

- The `web/index.html` file (along with other html and css files) contains the static markup and styling for your website.

- The `web/main.dart` file is the entry point for your application. It calls `runApp()` and provides
  the main app component.
