๐Ÿ›ซ Quick Start

To get started simply activate the jaspr command line tool and run jaspr create:

dart pub global activate jaspr_cli
jaspr create my_web_app

This will setup a new jaspr project inside the my_web_app folder. The cli will prompt you to choose a template.

Templates give you a minimal project to get started. Later on you can easily adapt your project for every architecture and rendering mode. So don't worry if you are not sure yet what to choose.

Next, run the development server using the following commands:

cd my_web_app
jaspr serve

This will spin up a developmet server at localhost:8080. You can now start developing your web app. ๐ŸŽ‰

Observe that the browser automatically refreshes the page when you change something in your code, like the Hello World text.

๐Ÿช† Project structure

Depending on your chosen template, a typical jaspr project could have the following project structure:

โ”œโ”€โ”€ lib/
โ”‚   โ”œโ”€โ”€ components/
โ”‚   โ”‚   โ””โ”€โ”€ ...
โ”‚   โ””โ”€โ”€ main.dart
โ”œโ”€โ”€ web/
โ”‚   โ”œโ”€โ”€ assets/
โ”‚   โ”‚   โ””โ”€โ”€ ...
โ”‚   โ”œโ”€โ”€ index.html
โ”‚   โ”œโ”€โ”€ main.dart
โ”‚   โ””โ”€โ”€ styles.css
โ”œโ”€โ”€ pubspec.lock
โ””โ”€โ”€ pubspec.yaml
  • The lib folder contains all your usual dart code, including components, services, pages, routes etc. depending on your architecture.

  • The lib/main.dart file is the standard entry point for your server application, if you use server-side rendering. It usually contains the void main() method with a single call to runApp(), and provides your root app component.

  • The web folder contains all files that should be shipped to the browser. Files inside the web directory are later accessible through their relative url, e.g. <domain>/styles.css, so it makes sense to put all your public assets inside this folder (e.g. images). All .dart files will be compiled to js and will be accessible through e.g. <domain>/main.dart.js.