๐ซ 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 callsrunApp()
and provides your root document component. -
The optional
lib/jaspr_options.dart
is auto-generated by Jasprs tooling. It exposes a top-leveldefaultJasprOptions
that you should provide to theJaspr.initializeApp(options: ...)
call insidelib/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 callsrunApp()
and provides the main app component.