Installation
Get started with Jaspr and build your first website in Dart.
Follow the steps below to set up a new Jaspr project on your computer.
New Project
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, 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 Jasprs 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 Jasprs 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.