LogoJaspr

🛫 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_website

This will walk you through the setup wizard and create a new jaspr project inside the my_website folder.

The cli will prompt you with a set of setup options. If you are not sure yet what to choose, go with the recommended one (simply press Enter each time). Later on you can easily adapt your project for any other setup if you need to.

Next, run the development server using the following commands:

cd my_website
jaspr serve

This will spin up a development server at localhost:8080. You can now start developing your website. 🎉

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 setup, your jaspr project will have some variation of following project structure:

├── lib/
│   ├── components/
│   │   └── counter.dart
│   │   └── ...
│   ├── pages/
│   │   └── home.dart
│   │   └── ...
│   ├── app.dart
│   ├── ...
│   └── main.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. All .dart files in here will be compiled to js and will be accessible through e.g. <domain>/main.dart.js.

Only for static and server mode#

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

  • 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.

Only for client mode#

  • 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 client application. It calls runApp() and provides the main app component.