Project Structure

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

Depending on your chosen Rendering Mode and Hydration settings, your Jaspr project will have a slightly different project structure.

Static/Server Mode with Automatic Hydration

├── 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 that is built during pre-rendering will automatically be hydrated on the client.

• The optional lib/jaspr_options.dart is auto-generated by Jaspr's 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

├── 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

├── 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.