Skip to content

Commit

Permalink
use leptos_0.6 for GitHub links except for counters tests
Browse files Browse the repository at this point in the history
  • Loading branch information
gbj committed Aug 20, 2024
1 parent 7074564 commit 9ae8287
Show file tree
Hide file tree
Showing 5 changed files with 33 additions and 41 deletions.
27 changes: 11 additions & 16 deletions src/deployment/csr.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@ trunk build --release

We've created several example repositories which show how to set up and deploy a Leptos CSR app to various hosting services.

*Note: Leptos does not endorse the use of any particular hosting service - feel free to use any service that supports static site deploys.*
_Note: Leptos does not endorse the use of any particular hosting service - feel free to use any service that supports static site deploys._

Examples:

- [Github Pages](#github-pages)
- [Vercel](#vercel)
- [Spin (serverless WebAssembly)](#spin---serverless-webassembly)


## Github Pages

Deploying a Leptos CSR app to Github pages is a simple affair. First, go to your Github repo's settings and click on "Pages" in the left side menu. In the "Build and deployment" section of the page, change the "source" to "Github Actions". Then copy the following into a file such as `.github/workflows/gh-pages-deploy.yml`
Expand Down Expand Up @@ -120,15 +120,14 @@ For more on deploying to Github Pages [see the example repo here](https://github
### Step 1: Set Up Vercel

In the Vercel Web UI...

1. Create a new project
2. Ensure
- The "Build Command" is left empty with Override on
- The "Output Directory" is changed to dist (which is the default output directory for Trunk builds) and the Override is on

- The "Build Command" is left empty with Override on
- The "Output Directory" is changed to dist (which is the default output directory for Trunk builds) and the Override is on

<img src="./image.png" />


### Step 2: Add Vercel Credentials for GitHub Actions

Note: Both the preview and deploy actions will need your Vercel credentials setup in GitHub secrets
Expand All @@ -142,16 +141,15 @@ Note: Both the preview and deploy actions will need your Vercel credentials setu
4. Inside the generated `.vercel` folder, open the the `project.json` file and save the "projectId" and "orgId" for the next step.

5. Inside GitHub, go the repo's "Settings" > "Secrets and Variables" > "Actions" and add the following as [Repository secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets):
- save your Vercel Access Token (from sub-step 1) as the `VERCEL_TOKEN` secret
- from the `.vercel/project.json` add "projectID" as `VERCEL_PROJECT_ID`
- from the `.vercel/project.json` add "orgId" as `VERCEL_ORG_ID`
- save your Vercel Access Token (from sub-step 1) as the `VERCEL_TOKEN` secret
- from the `.vercel/project.json` add "projectID" as `VERCEL_PROJECT_ID`
- from the `.vercel/project.json` add "orgId" as `VERCEL_ORG_ID`

<i>For full instructions see ["How can I use Github Actions with Vercel"](https://vercel.com/guides/how-can-i-use-github-actions-with-vercel)</i>

### Step 3: Add Github Action Scripts

Finally, you're ready to simply copy and paste the two files - one for deployment, one for PR previews - from below or from [the example repo's `.github/workflows/` folder](https://github.com/diversable/vercel-leptos-CSR-deployment/tree/main/.github/workflows) into your own github workflows folder - then, on your next commit or PR deploys will occur automatically.

Finally, you're ready to simply copy and paste the two files - one for deployment, one for PR previews - from below or from [the example repo's `.github/workflows/` folder](https://github.com/diversable/vercel-leptos-CSR-deployment/tree/leptos_0.6/.github/workflows) into your own github workflows folder - then, on your next commit or PR deploys will occur automatically.

<i>Production deployment script: `vercel_deploy.yml`</i>

Expand Down Expand Up @@ -310,11 +308,8 @@ Finally, you're ready to simply copy and paste the two files - one for deploymen
```


See [the example repo here](https://github.com/diversable/vercel-leptos-CSR-deployment) for more.



## Spin - Serverless WebAssembly

Another option is using a serverless platform such as Spin. Although [Spin](https://github.com/fermyon/spin) is open source and you can run it on your own infrastructure (eg. inside Kubernetes), the easiest way to get started with Spin in production is to use the Fermyon Cloud.
Expand All @@ -333,8 +328,8 @@ Start by installing the [Spin CLI using the instructions, here](https://develope

6. With the 'preview' and 'deploy' scripts active, Github Actions will now generate previews on pull requests & deploy automatically on updates to your 'main' branch.


<i>Production deployment script: `spin_deploy.yml`</i>

```admonish example collapsible=true
# For setup instructions needed for Fermyon Cloud, see:
Expand Down Expand Up @@ -531,4 +526,4 @@ Start by installing the [Spin CLI using the instructions, here](https://develope
```

See [the example repo here](https://github.com/diversable/leptos-spin-CSR).
See [the example repo here](https://github.com/diversable/leptos-spin-CSR).
22 changes: 9 additions & 13 deletions src/deployment/ssr.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,20 @@
It's possible to deploy Leptos fullstack, SSR apps to any number of server or container hosting services. The most simple way to get a Leptos SSR app into production might be to use a VPS service and either run Leptos natively in a VM ([see here for more details](https://github.com/leptos-rs/start-axum?tab=readme-ov-file#executing-a-server-on-a-remote-machine-without-the-toolchain)). Alternatively, you could containerize your Leptos app and run it in [Podman](https://podman.io/) or [Docker](https://www.docker.com/) on any colocated or cloud server.

There are a multitude of different deployment setups and hosting services, and in general, Leptos itself is agnostic to the deployment setup you use. With this diversity of deployment targets in mind, on this page we will go over:

- [creating a `Containerfile` (or `Dockerfile`) for use with Leptos SSR apps](#creating-a-containerfile)
- Using a `Dockerfile` to [deploy to a cloud service](#cloud-deployments) - [for example, Fly.io](#deploy-to-flyio)
- Deploying Leptos to [serverless runtimes](#deploy-to-serverless-runtimes) - for example, [AWS Lambda](#aws-lambda) and [JS-hosted WASM runtimes like Deno & Cloudflare](#deno--cloudflare-workers)
- [Platforms that have not yet gained Leptos SSR support](#currently-unsupported-platforms)

*Note: Leptos does not endorse the use of any particular method of deployment or hosting service.*
_Note: Leptos does not endorse the use of any particular method of deployment or hosting service._

## Creating a Containerfile

The most popular way for people to deploy full-stack apps built with `cargo-leptos` is to use a cloud hosting service that supports deployment via a Podman or Docker build. Here’s a sample `Containerfile` / `Dockerfile`, which is based on the one we use to deploy the Leptos website.


### Debian

```dockerfile
# Get started with a build env with Rust nightly
FROM rustlang/rust:nightly-bullseye as builder
Expand Down Expand Up @@ -71,7 +72,9 @@ EXPOSE 8080
# Run the server
CMD ["/app/leptos_start"]
```

### Alpine

```dockerfile
# Get started with a build env with Rust nightly
FROM rustlang/rust:nightly-alpine as builder
Expand Down Expand Up @@ -104,8 +107,8 @@ ENV LEPTOS_SITE_ROOT=./site

CMD ["/app/leptos_start"]
```
> Read more: [`gnu` and `musl` build files for Leptos apps](https://github.com/leptos-rs/leptos/issues/1152#issuecomment-1634916088).

> Read more: [`gnu` and `musl` build files for Leptos apps](https://github.com/leptos-rs/leptos/issues/1152#issuecomment-1634916088).
## Cloud Deployments

Expand Down Expand Up @@ -159,7 +162,6 @@ to create a new Fly app and register it with the service. Git commit your new `f

To set up the Github Actions deployment workflow, copy the following into a `.github/workflows/fly_deploy.yml` file:


```admonish example collapsible=true
# For more details, see: https://fly.io/docs/app-guides/continuous-deployment-with-github-actions/
Expand Down Expand Up @@ -216,27 +218,21 @@ However, please keep in mind that some native server functionality does not work

The other factor to bear in mind is the 'cold-start' time for functions as a service - depending on your use case and the FaaS platform you use, this may or may not meet your latency requirements; you may need to keep one function running at all times to optimize the speed of your requests.



### Deno & Cloudflare Workers

Currently, Leptos-Axum supports running in Javascript-hosted WebAssembly runtimes such as Deno, Cloudflare Workers, etc. This option requires some changes to the setup of your source code (for example, in `Cargo.toml` you must define your app using `crate-type = ["cdylib"]` and the "wasm" feature must be enabled for `leptos_axum`). [The Leptos HackerNews JS-fetch example](https://github.com/leptos-rs/leptos/tree/main/examples/hackernews_js_fetch) demonstrates the required modifications and shows how to run an app in the Deno runtime. Additionally, the [`leptos_axum` crate docs](https://docs.rs/leptos_axum/latest/leptos_axum/#js-fetch-integration) are a helpful reference when setting up your own `Cargo.toml` file for JS-hosted WASM runtimes.
Currently, Leptos-Axum supports running in Javascript-hosted WebAssembly runtimes such as Deno, Cloudflare Workers, etc. This option requires some changes to the setup of your source code (for example, in `Cargo.toml` you must define your app using `crate-type = ["cdylib"]` and the "wasm" feature must be enabled for `leptos_axum`). [The Leptos HackerNews JS-fetch example](https://github.com/leptos-rs/leptos/tree/leptos_0.6/examples/hackernews_js_fetch) demonstrates the required modifications and shows how to run an app in the Deno runtime. Additionally, the [`leptos_axum` crate docs](https://docs.rs/leptos_axum/latest/leptos_axum/#js-fetch-integration) are a helpful reference when setting up your own `Cargo.toml` file for JS-hosted WASM runtimes.

While the initial setup for JS-hosted WASM runtimes is not onerous, the more important restriction to keep in mind is that since your app will be compiled to WebAssembly (`wasm32-unknown-unknown`) on the server as well as the client, you must ensure that the crates you use in your app are all WASM-compatible; this may or may not be a deal-breaker depending on your app's requirements, as not all crates in the Rust ecosystem have WASM support.

If you're willing to live with the limitations of WASM server-side, the best place to get started right now is by checking out the [example of running Leptos with Deno](https://github.com/leptos-rs/leptos/tree/main/examples/hackernews_js_fetch) in the official Leptos Github repo.

If you're willing to live with the limitations of WASM server-side, the best place to get started right now is by checking out the [example of running Leptos with Deno](https://github.com/leptos-rs/leptos/tree/leptos_0.6/examples/hackernews_js_fetch) in the official Leptos Github repo.

## Platforms Working on Leptos Support

### Deploy to Spin Serverless WASI (with Leptos SSR)

WebAssembly on the server has been gaining steam lately, and the developers of the open source serverless WebAssembly framework Spin are working on natively supporting Leptos. While the Leptos-Spin SSR integration is still in its early stages, there is a working example you may wish to try out.

The full set of instructions to get Leptos SSR & Spin working together are available as [a post on the Fermyon blog](
https://www.fermyon.com/blog/leptos-spin-get-started), or if you want to skip the article and just start playing around with a working starter repo, [see here](https://github.com/diversable/leptos-spin-ssr-test).


The full set of instructions to get Leptos SSR & Spin working together are available as [a post on the Fermyon blog](https://www.fermyon.com/blog/leptos-spin-get-started), or if you want to skip the article and just start playing around with a working starter repo, [see here](https://github.com/diversable/leptos-spin-ssr-test).

### Deploy to Shuttle.rs

Expand Down
11 changes: 6 additions & 5 deletions src/interlude_styling.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ fn Home() -> impl IntoView {
}
```

It can be a little complicated to set up the Tailwind integration at first, but you can check out our two examples of how to use Tailwind with a [client-side-rendered `trunk` application](https://github.com/leptos-rs/leptos/tree/main/examples/tailwind_csr) or with a [server-rendered `cargo-leptos` application](https://github.com/leptos-rs/leptos/tree/main/examples/tailwind_actix). `cargo-leptos` also has some [built-in Tailwind support](https://github.com/leptos-rs/cargo-leptos#site-parameters) that you can use as an alternative to Tailwind’s CLI.
It can be a little complicated to set up the Tailwind integration at first, but you can check out our two examples of how to use Tailwind with a [client-side-rendered `trunk` application](https://github.com/leptos-rs/leptos/tree/leptos_0.6/examples/tailwind_csr) or with a [server-rendered `cargo-leptos` application](https://github.com/leptos-rs/leptos/tree/leptos_0.6/examples/tailwind_actix). `cargo-leptos` also has some [built-in Tailwind support](https://github.com/leptos-rs/cargo-leptos#site-parameters) that you can use as an alternative to Tailwind’s CLI.

## Stylers: Compile-time CSS Extraction

Expand Down Expand Up @@ -85,13 +85,13 @@ pub fn App() -> impl IntoView {
}
```

## Stylance: Scoped CSS Written in CSS Files
## Stylance: Scoped CSS Written in CSS Files

Stylers lets you write CSS inline in your Rust code, extracts it at compile time, and scopes it. [Stylance](https://github.com/basro/stylance-rs) allows you to write your CSS in CSS files alongside your components, import those files into your components, and scope the CSS classes to your components.

This works well with the live-reloading features of `trunk` and `cargo-leptos` because edited CSS files can be updated immediately in the browser.

```rust
```rust
import_style!(style, "app.module.scss");

#[component]
Expand All @@ -103,9 +103,10 @@ fn HomePage() -> impl IntoView {
```

You can edit the CSS directly without causing a Rust recompile.
```css

```css
.jumbotron {
background: blue;
background: blue;
}
```

Expand Down
2 changes: 1 addition & 1 deletion src/islands.md
Original file line number Diff line number Diff line change
Expand Up @@ -395,7 +395,7 @@ There are other, larger architectural changes that I’m [not sold on yet](https

## Additional Information

Check out the [islands PR](https://github.com/leptos-rs/leptos/pull/1660), [roadmap](https://github.com/leptos-rs/leptos/issues/1830), and [Hackernews demo](https://github.com/leptos-rs/leptos/tree/main/examples/hackernews_islands_axum) for additional discussion.
Check out the [islands PR](https://github.com/leptos-rs/leptos/pull/1660), [roadmap](https://github.com/leptos-rs/leptos/issues/1830), and [Hackernews demo](https://github.com/leptos-rs/leptos/tree/leptos_0.6/examples/hackernews_islands_axum) for additional discussion.

## Demo Code

Expand Down
12 changes: 6 additions & 6 deletions src/testing.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ more idiomatic your code will feel and the easier it will be to test.

## 2. Test components with end-to-end (`e2e`) testing

Our [`examples`](https://github.com/leptos-rs/leptos/tree/main/examples) directory has several examples with extensive end-to-end testing, using different testing tools.
Our [`examples`](https://github.com/leptos-rs/leptos/tree/leptos_0.6/examples) directory has several examples with extensive end-to-end testing, using different testing tools.

The easiest way to see how to use these is to take a look at the test examples themselves:

Expand All @@ -65,7 +65,7 @@ This is a fairly simple manual testing setup that uses the [`wasm-pack test`](ht

#### Sample Test

````rust
```rust
#[wasm_bindgen_test]
fn clear() {
let document = leptos::document();
Expand Down Expand Up @@ -108,9 +108,9 @@ assert_eq!(
})
);
}
````
```

### [`wasm-bindgen-test` with `counters_stable`](https://github.com/leptos-rs/leptos/tree/main/examples/counters_stable/tests/web)
### [`wasm-bindgen-test` with `counters`](https://github.com/leptos-rs/leptos/tree/leptos_0.6/examples/counters/tests/web.rs)

This more developed test suite uses a system of fixtures to refactor the manual DOM manipulation of the `counter` tests and easily test a wide range of cases.

Expand All @@ -137,7 +137,7 @@ fn should_increase_the_total_count() {
}
```

### [Playwright with `counters_stable`](https://github.com/leptos-rs/leptos/tree/main/examples/counters_stable/e2e)
### [Playwright with `counters`](https://github.com/leptos-rs/leptos/tree/main/examples/counters/e2e)

These tests use the common JavaScript testing tool Playwright to run end-to-end tests on the same example, using a library and testing approach familiar to many who have done frontend development before.

Expand All @@ -162,7 +162,7 @@ test.describe("Increment Count", () => {
});
```

### [Gherkin/Cucumber Tests with `todo_app_sqlite`](https://github.com/leptos-rs/leptos/blob/main/examples/todo_app_sqlite/e2e/README.md)
### [Gherkin/Cucumber Tests with `todo_app_sqlite`](https://github.com/leptos-rs/leptos/blob/leptos_0.6/examples/todo_app_sqlite/e2e/README.md)

You can integrate any testing tool you’d like into this flow. This example uses Cucumber, a testing framework based on natural language.

Expand Down

0 comments on commit 9ae8287

Please sign in to comment.