Quickstart
Get started with Jaspr and build your first website in Dart.
To get started with Jaspr, you can either use the Jaspr CLI or our official VSCode Extension. The cli lets you manage the project from the command line, while the extension provides a more integrated experience within your IDE.
VSCode Extension
Install Extension
Install the Jaspr VSCode extension by searching for
Jasprin the extensions menu.Create a Project
To create a new Jaspr project, open the command palette (
Ctrl+Shift+P) and select Jaspr: New Project. You are ask to choose from several templates and set a project folder.
Choosing a template will not lock you into a specific configuration. Starting from one template you can easily modify your code to behave as any other template along the way.
When running for the first time, the extension will ask you to install the Jaspr CLI. This is required to run the Jaspr development server and build your project.
Debug your Jaspr Project
To run and debug a Jaspr applications, launch it using F5 or the Debug menu. The extension will start the debug process and attach the Dart debugger to it.
When developing a Jaspr project in
staticorservermode, this will open two separate debugging sessions, one for the server and one for the client. Switch between the two using the debugging sidebar or process dropdown.Sidebar Dropdown. 
Both processes will be managed by the main Jaspr terminal.
To stop the server, click "Stop Jaspr" in the status bar, or focus the terminal and press
Ctrl+C. This will stop both debugging sessions and the main process. You can also detach the debugging sessions individually using the detach button in the debug bar, but this will keep the app running.
You can now start developing your website. 🎉
Observe that the browser automatically refreshes the page when you change something in your code, like the Welcome text.
Jaspr CLI
Install CLI
Install the Jaspr CLI via:
dart pub global activate jaspr_cliThe
jasprcommand will be available in your terminal.Create a Project
To create a new project run:
jaspr create my_websiteThis will walk you through the setup wizard and create a new Jaspr project inside the
my_websitefolder.The cli will prompt you with a set of options to configure your project. You can read about what each option does below or just start with the recommended ones (simply press Enter each time).
If you are just starting out and are not sure what options to pick, just select the default one for each question (simply press Enter each time).
Choosing a set of options do not lock you into a specific configuration. Starting from one setup you can easily modify your code to behave as any other setup along the way.
Run the Development Server
Start the development server via:
cd my_website jaspr serveThis 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 Welcome text.
Project Options
When creating a new project through the Jaspr CLI, you will go through a set of questions to configure the project to your liking. The options set your rendering mode, hydration strategy, routing, flutter interoperability strategy and more.
You can choose from the following options:
Rendering ModeSelect one of the three rendering modes Jaspr supports. Read about the different modes here.
HydrationconditionalSelect the hydration strategy (automatic or manual). Read about hydration here.
RoutingWhether to set up routing. Selecting Yes will setup a basic Routing with two routes ('/home' and '/about'). This gives you a convenient
starting point when you plan to develop a website with multiple pages.
Multi-Page RoutingconditionalWhether to set up multi-page or single-page routing, also called server-side or client-side routing respectively. This defined how navigating between routes will behave. Either a "real" page load is performed when navigating to a new route (aka. the browser requests the new page using its url from the server). Or the routing happens purely on the client without any request to the server.
There are different advantages and disadvantages for both types. To help you decide you can find many articles about this topic.
Read more about routing here.
Flutter EmbeddingWhether to setup an embedded Flutter application with your site. This will use Jaspr's first-party integration for Flutter element embedding and create a simple Flutter counter app that synchronizes its state with your Jaspr site.
Plugin SupportWhether to enable support for Flutter web plugins. This will switch to Jaspr's custom compiler pipeline (replacing build_web_compilers) which allows the use of most Flutter web plugins in your Jaspr site without any additional setup.
Flutter web plugins refers to any Flutter plugin from pub.dev that supports web and is not concerned with widgets or rendering. This includes packages like shared_preferences or firebase.
Custom BackendconditionalWhether to use a custom backend package or framework for the server part of your project. You can choose between:
- None: No backend setup. This is the default option and is recommended if you are just starting out.
- Shelf: A simple and lightweight web server for Dart. This is a good choice if you want to build a custom backend for your project.
- More options coming soon
Read more about backends here.