Skip to content

Commit

Permalink
update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
schultek committed Mar 21, 2024
1 parent 915eb1f commit f2c6ca6
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 132 deletions.
78 changes: 28 additions & 50 deletions docs/cli.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -9,66 +9,43 @@ next: /core/components

Jaspr comes with a cli tool to create, serve and build your web app.

- `jaspr create` will create a new jaspr project. The cli will prompt you for a project name and template to use.
- `jaspr create` will create a new jaspr project. The cli will prompt you for a project name and setup options.
- `jaspr serve` will serve the web-app in the current directory, including hot-reloading.
- `jaspr build` will build the web-app containing the static web assets (compiled js, html, ...) and the server executable.
- `jaspr generate` will generate all routes of your website at build time and build the web-app as a static site.
- `jaspr build` will build the web-app containing the static web assets (compiled js, html, ...) and the optional server executable.

## 📟 Execution Mode
## 📟 Rendering Modes

**Jaspr** is a full-stack web framework, meaning it can run both on the server and the client. Depending on what you
want to build you can choose how your app should be built and executed using jaspr.

- **Server-side Rendering with client-side hydration:**
In the default mode jaspr runs both on the server and client. It renders your html on the server
including any dynamic data from an api or database and then hydrates that html on the client in order to
make it interactive. This is the default mode for the `basic` and `classic` templates.

- **Client-side only:**
If you want, you can skip the server part of jaspr completely and use it as a client-side only framework. This way
you can deploy your built app to any static hosting provider (like firebase hosting) without needing an extra server.
To use it like this, simply use the `client` template when creating a new project.
- **Static Mode**
Jaspr can also perform static site generation, meaning it can generate static pages at build time from your server-side
components. Jaspr will build a fully static site that you can host at any common website hosting service (like firebase hosting),
but you can still use server-side rendering to pre-render pages of your site.

- **Server-side only:**
If you are dealing with a fully static website without needing any interactivity through js, you can also
use jaspr as a purely server-side rendering framework. To set this up, use the `server` template when creating
a new project. Then you won't have any javascript shipped to the browser.
- **Server Mode**
In this mode jaspr runs both on the server and optionally hydrates on the client. It renders your html on the server
for every incoming request, making it possible to use any dynamic data from an api or database to render your components.
Additionally you can setup hydration on the client in order to make your site interactive.

- **Static site generation:**
Jaspr can also perform static site generation, meaning it can generate static pages at build time from your server-side
components. This can be used with any project that has server-side rendering setup, simply by using `jaspr generate`
instead of `jaspr build` when building and deploying your app.
- **Client Mode**
If you want, you can skip the server part of jaspr completely and use it as a client-side only framework. This way
you can deploy your built app to any common website hosting service (like firebase hosting) without needing an extra server.

## 🏗 Templates
## 🏗 Project Scaffolding

When generating a new project, you can choose from one of several templates to get started quickly.
The templates showcase common configurations of jaspr and provide a ready-to use setup.
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.

<Info>
Templates do 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. So if you are not sure yet what to
pick, just start with the recommended 'basic' template.
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).
</Info>

#### Basic Template

The **recommended** template for a standard jaspr app. It gives you a pure-dart web app with ssr &
automatic client hydration.

#### Classic Template

Similar to the basic template, but with an additional `index.html` and `styles.css` file in case
you prefer to write your template in html and global styles in css.

#### Client Template

A pure client-side app without ssr. Allows your site to be deployed to a static file hosting
provider, like Firebase Hosting.

#### Server Template

A purely server-side rendered app without client hydration. This means you will have no generated
js and therefore no client interaction, but a completely static site, like a simple blog.
<Info>
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.
</Info>

## 🛠 Building

Expand All @@ -79,11 +56,12 @@ jaspr build
```

This will build the app inside the `build/jaspr` directory.
You can choose whether to build a standalone executable or an aot or jit snapshot with the `--target` option.

If you are using jaspr with server-side rendering (default), you can run your app by starting the
executable at `build/jaspr/app` (when you deploy your app, make sure to also copy the `build/jaspr/web` folder
next to the executable). If you build with `uses-ssr: false`, you can deploy the files inside
If you build with the server rendering mode, you can choose whether to build a standalone executable or an aot or jit
snapshot with the `--target` option. You can then run your app by starting the executable at `build/jaspr/app` and deploy
it alongside the `build/jaspr/web` folder.

If you build with the static or client mode, you can deploy the files inside
the `build/jaspr` directory to any static hosting provider.


131 changes: 49 additions & 82 deletions docs/quick-start.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@ dart pub global activate jaspr_cli
jaspr create my_website
```

This will setup a new jaspr project inside the `my_website` folder. The cli will prompt you to choose a template.
This will walk you through the setup wizard and create a new jaspr project inside the `my_website` folder.

<Info>
Templates give you a minimal project to get started. Later on you can easily adapt your project for every
architecture and rendering mode. So don't worry if you are not sure yet what to choose.
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.
</Info>

Next, run the development server using the following commands:
Expand All @@ -38,82 +38,49 @@ code, like the `Hello World` text.

## 🪆 Project structure

Depending on your chosen template, your jaspr project will have the following project structure:

<Tabs
defaultValue="basic"
values={[
{label: 'Basic', value: 'basic'},
{label: 'Client', value: 'client'},
{label: 'Server', value: 'server'},
]}
>
<TabItem value="basic">
```markdown
├── lib/
│ ├── components/
│ │ └── app.dart
│ ├── jaspr_options.dart
│ ├── styles.dart
│ └── main.dart
├── web/
│ └── ...
├── pubspec.lock
└── pubspec.yaml
```

- The `lib` folder contains all your usual dart code, including components, services, pages, routes etc.
depending on your architecture.

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

- The `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`.

- The `web` folder is optional and may contain any public assets you want to access from your website, like images
or fonts.
</TabItem>
<TabItem value="client">
```markdown
├── lib/
│ └── app.dart
├── web/
│ ├── index.html
│ ├── styles.css
│ └── main.dart
├── pubspec.lock
└── pubspec.yaml
```

- The `lib` folder contains all your usual dart code, including components, services, pages, routes etc.
depending on your architecture.

- The `web` folder contains all files that should be shipped to the browser. Files inside the `web` directory
are later accessible through their relative url, e.g. `<domain>/styles.css`, so it makes sense to put
all your public assets inside this folder (e.g. images). All `.dart` files will be compiled to
js and will be accessible through e.g. `<domain>/main.dart.js`.
</TabItem>
<TabItem value="server">
```markdown
├── lib/
│ ├── components/
│ │ └── app.dart
│ ├── styles.dart
│ └── main.dart
├── web/
│ └── ...
├── pubspec.lock
└── pubspec.yaml
```

- The `lib` folder contains all your usual dart code, including components, services, pages, routes etc.
depending on your architecture.

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

- The `web` folder is optional and may contain any public assets you want to access from your website, like images
or fonts.
</TabItem>
</Tabs>
Depending on your chosen setup, your jaspr project will have some variation of following project structure:

```markdown
├── 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.

0 comments on commit f2c6ca6

Please sign in to comment.