Quickstart
Get started with Jaspr and build your first website in Dart.
Welcome to the Jaspr Getting Started guide. In it, you'll install Jaspr, setup a new project and learn the basics of Jaspr.
1. Install Jaspr
You can install Jaspr either through our VSCode Extension or by installing the Jaspr CLI in the terminal. The CLI lets you manage the project from the command line, while the extension provides a more integrated experience within your IDE.
- Use the Jaspr VSCode Extension to setup and serve your website with full debugging support from inside VSCode.
- Use the Jaspr CLI to setup and serve your website from the command line.
Install the Jaspr VSCode extension by searching for Jaspr in the extensions menu.
After installing and activating the extension, you will get a prompt to install the Jaspr CLI. Accept it to continue.
2. Choose a Rendering Mode
The first thing to do when starting a new project with Jaspr is to decide on a Rendering Mode to use. The rendering mode defines how your website is executed and built and each one has it's own advantages and disadvantages based on what you want to build.
Jaspr supports these three rendering modes:
Static Mode
In static mode Jaspr performs static rendering (also known as Static Site Generation) at build time, generating a fully static site that you can deploy anywhere.
Recommended for most websites, landing pages, portfolios, blogs, documentation sites, etc.
Server Mode
In server mode Jaspr builds a server application that pre-renders your components for each incoming request (also known as Server Side Rendering).
Recommended for web applications that require backend integration, user authentication, or dynamic content that changes frequently.
Client Mode
If you want, you can skip the server and pre-rendering part of Jaspr completely and use it as a client-side only framework.
All modes support client-side interactivity and can be used to build interactive web applications. The main difference is when and how the initial HTML is generated. Read more about rendering modes here.
3. Create your 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.
The first three templates are the default choices for each rendering mode: static, server and client. The fourth option includes an embedded Flutter web app and the fifth comes with a custom backend setup using shelf.
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.
4. Run your 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 static or server mode, 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.
5. Next Steps
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.
Check out the following resources to continue your journey with Jaspr:
-
Server-Side Jaspr: Learn about server-side rendering, component scopes and everything server-side in Jaspr. Relevant for static and server mode.
-
Client-Side Jaspr: Learn about hydration, interactivity, DOM and everything client-side in Jaspr. Relevant for all modes.
-
Static Sites: Learn about static site generation in Jaspr. Relevant for static mode.