Docs: Deploying Leptos apps #1152
Comments
|
Hey Greg, Here's how I got Vercel to deploy a Leptos CSR project through GitHub actions (with linting, clippy, and build checking + testing). This method also allows for preview deploys on pull requests. Special thanks to @Skyliegirl33 for helping me set this up Vercel setup
Setup Vercel credentials for GitHub ActionsBoth of these actions will need your Vercel credentials setup in GitHub secrets
Instructions from https://vercel.com/guides/how-can-i-use-github-actions-with-vercel GitHub Actions
name: Rust
on:
pull_request:
branches: [ "main" ]
workflow_dispatch:
env:
CARGO_TERM_COLOR: always
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
jobs:
fmt:
name: Rustfmt
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: dtolnay/rust-toolchain@nightly
with:
components: rustfmt
- name: Enforce formatting
run: cargo fmt --check
clippy:
name: Clippy
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: dtolnay/rust-toolchain@nightly
with:
components: clippy
- uses: Swatinem/rust-cache@v2
- name: Linting
run: cargo clippy -- -D warnings
test:
name: Test
runs-on: ubuntu-latest
needs: [fmt, clippy]
steps:
- uses: actions/checkout@v3
- uses: dtolnay/rust-toolchain@nightly
- uses: Swatinem/rust-cache@v2
- name: Run tests
run: cargo test
build-and-preview-deploy:
runs-on: ubuntu-latest
name: Build and Preview Deploy
needs: [test]
permissions:
pull-requests: write
environment:
name: preview
url: ${{ steps.deploy.outputs.preview-url }}
steps:
- name: git-checkout
uses: actions/checkout@v3
- uses: dtolnay/rust-toolchain@nightly
- uses: Swatinem/rust-cache@v2
- uses: jetli/trunk-action@v0.4.0
- name: Build
run: |
cargo build --verbose
rustup target add wasm32-unknown-unknown
trunk build
- name: Preview Deploy
id: deploy
uses: amondnet/vercel-action@v20
with:
vercel-token: ${{ secrets.VERCEL_TOKEN }}
github-token: ${{ secrets.GITHUB_TOKEN }}
vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
github-comment: true
working-directory: ./dist
name: Release
on:
push:
branches:
- main
env:
CARGO_TERM_COLOR: always
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
jobs:
Deploy-Production:
runs-on: ubuntu-latest
environment: production
steps:
- name: git-checkout
uses: actions/checkout@v3
- uses: dtolnay/rust-toolchain@nightly
- uses: Swatinem/rust-cache@v2
- uses: jetli/trunk-action@v0.4.0
- name: Trunk Build
run: |
rustup target add wasm32-unknown-unknown
trunk build
- name: Install Vercel CLI
run: npm install --global vercel@latest
- name: Pull Vercel Environment Information
run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
- name: Deploy Project Artifacts to Vercel
working-directory: ./dist
run: vercel deploy --prod --token=${{ secrets.VERCEL_TOKEN }} |
|
Heya, I've experimented building applications using
This means having separate entry points for CLI, web server binary, and client:
I've only roughly experimented -- the CLI app still looks for |
|
I am currently re-writing our company website with Leptos, we are building a distributed cloud so deployment is one of our main things, but we have a tendency to use lower end deployment options. I'll post more details once the deployment is done, I don't know yet how exactly I will deploy it but probably one of those two options :
In the meantime, I'm very much open to provide feedback and thoughts on anything related to deploying various types of Rust apps. We're also interested in providing early adopter hosting to get feedback. |
|
my playground https://github.com/SilenLoc/outcall is on gh pages. With trunk, tailwind, latest leptos nightly and leptos-struct-table = "0.2.1" https://silenloc.github.io/outcall/ see also the workflow and the Trunk.toml you can also copy paste the whole thing to create an example repo under leptos |
|
Hey, I have a slightly unconventional deployment, which is kind of still in progress, but at least it already works. I've deployed leptos project on to a Raspberry Pi with help of Buildroot (bunch of makefiles and scripts that allow to cross compile full Linux image) Buildroot patchesRight now Buildroot has support for building rust packages with cargo, but I had to fix 2 issues:
Here are changes that fix both of those issues on my fork: buildroot/buildroot@master...eaglesemanation:spectrometer_buildroot:2023.05-rust-wasm Packages out of Buildroot treeOfficial documentation explains this step here: https://buildroot.org/downloads/manual/manual.html#outside-br-custom Creating makefile for leptos projectEssentially you can follow official docs for cargo packages with slight modifications:
# Default build command + WASM build step
define PKGNAME_BUILD_CMDS
cd $(PKGNAME_SRCDIR) && \
$(TARGET_MAKE_ENV) \
$(TARGET_CONFIGURE_OPTS) \
$(PKG_CARGO_ENV) \
$(PKGNAME_CARGO_ENV) \
cargo build \
$(if $(BR2_ENABLE_DEBUG),,--release) \
--offline --manifest-path Cargo.toml --locked \
--no-default-features --features=ssr
cd $(PKGNAME_SRCDIR) && \
$(TARGET_MAKE_ENV) \
$(TARGET_CONFIGURE_OPTS) \
$(PKG_CARGO_ENV) \
$(PKGNAME_CARGO_ENV) \
wasm-pack build \
--out-dir pkg --target web \
$(if $(BR2_ENABLE_DEBUG),--dev,--release) \
-- \
--offline --manifest-path Cargo.toml --locked \
--no-default-features --features=hydrate
cd $(PKGNAME_SRCDIR) && \
tailwindcss --input style/input.css --output style/output.css
endef
# cargo-package uses `cargo install`, which only installs binaries. Copy WASM manually
define PKGNAME_INSTALL_WASM
$(Q)mkdir -p $(TARGET_DIR)/usr/share/pkgname/pkg
$(Q)cp -r $(PKGNAME_SRCDIR)/pkg $(TARGET_DIR)/usr/share/pkgname/
find $(TARGET_DIR)/usr/share/pkgname/pkg/ -type f -exec sed -Ei 's/([a-zA-Z_]+)_bg.wasm/\1.wasm/p' {} \;
for bg_file in $(TARGET_DIR)/usr/share/pkgname/pkg/*_bg*; do \
fixed_file="$$(echo $$bg_file | sed -En 's/(.*)_bg(.*)/\1\2/p')" ; \
mv $$bg_file $$fixed_file ; \
done
$(Q)cp $(PKGNAME_SRCDIR)/style/output.css $(TARGET_DIR)/usr/share/pkgname/pkg/pkgname.css
endef
PKGNAME_POST_BUILD_HOOKS += PKGNAME_INSTALL_WASM
# Randomly generated number, needs to be consistent across ssr and hydrate packages
PKGNAME_CARGO_ENV += SERVER_FN_OVERRIDE_KEY='8306904707'
I don't have a lot of experience of writing docs, and my explanation seems haphazard to me, so if someone wants to read through actual code, rather than my interpretation, it can be found here: https://github.com/eaglesemanation/spectrometer_utils/tree/main/sbc_config |
|
My current deployment flow involves cross-compiling to
or on Mac (tested on M2) 1.a. Optional on Macs
I also have a dockerfile in the works that might be useful when deploying within a container or to Kubernetes. |
|
Maybe Nix can help? I've nixified the development environment: https://github.com/srid/start-axum/tree/nixify However I couldn't package the app ( cc @benwis (see he opened NixOS/nixpkgs#215400) |
|
I'm always happy to see more Nix in here. I actually have a Crane build deployment routine for some of my Leptos sites, so I know it can work. It's a bit clunky since I haven't updated it since cargo-leptos moved into nixpkgs main |
(N/m; fixed by changing version of wasm-bindgen in Cargo.tomlI can't use `cargo-leptops` from nixpkgs, because it leads to this error in the `start-axum` template,(My start-axum fork uses Rust nightly which it seems to require)
Do you happen to have the Nix source available publicly? |
|
Ya,
Forgive the roughness, but here it is:
https://github.com/benwis/benwis_leptos/blob/main/flake.nix
Let me know if you see any improvements.
…-Ben
------- Original Message -------
On Saturday, July 1st, 2023 at 8:35 AM, Sridhar Ratnakumar ***@***.***> wrote:
I can't use cargo-leptops from nixpkgs, because it leads to this error in the start-axum template,
it looks like the Rust project used to create this wasm file was linked against
version of wasm-bindgen that uses a different bindgen format than this binary:
rust wasm file schema version: 0.2.87
this binary schema version: 0.2.84
Currently the bindgen format is unstable enough that these two schema versions
must exactly match. You can accomplish this by either updating the wasm-bindgen
dependency or this binary.
(My start-axum fork uses Rust nightly which it seems to require)
> I actually have a Crane build deployment routine for some of my Leptos sites
Do you happen to have the Nix source available publicly?
—
Reply to this email directly, [view it on GitHub](#1152 (comment)), or [unsubscribe](https://github.com/notifications/unsubscribe-auth/ABVBTCMUGUSSCLOXQPYHWKDXOA7V7ANCNFSM6AAAAAAY3WY264).
You are receiving this because you were mentioned.Message ID: ***@***.***>
|
|
I am deploying everything as containers, all the time. I built Dockerfiles for building either a The files are multi stage and try to be as secure as possible by default. Builder FilesThese builder files usually only need a rebuild when you want to upgrade to a new rust or cargo-leptos version. Otherwise they can be re-used all the time, which speeds up the final build process. GNUFilename: FROM rust:1.70-bullseye
RUN apt update && \
apt install -y binaryen npm protobuf-compiler libssl-dev pkg-config musl-tools \
&& rm -rf /var/lib/apt/lists/*
RUN rustup target add wasm32-unknown-unknown
RUN rustup component add clippy
RUN cargo install cargo-generate
RUN cargo install cargo-leptos
RUN cargo install wasm-opt
RUN npm install -g sass
WORKDIR /work
CMD /bin/bash
Build with: MUSLFilename: FROM rust:1.70-alpine3.18
RUN apk update && \
apk add --no-cache bash binaryen gcc git g++ libc-dev make npm openssl-dev protobuf-dev protoc
RUN rustup target add wasm32-unknown-unknown
RUN rustup component add clippy
RUN cargo install cargo-generate
RUN cargo install cargo-leptos
RUN npm install -g sass
WORKDIR /work
CMD /bin/bash
Build with: App DockerfileI usually have everything in one file and out-comment the necessary # Chose the builder image
# `gnu` is the default target for rust but needs a specific version of GLIBC on the target system
# `musl` is the way smaller one which only need the linux kernel
#
# note: you may need to adopt the image in the 2nd stage down below, if you change this
#FROM leptos-builder-gnu AS builder
FROM leptos-builder-musl AS builder
# I usually do testing with a real database deployed somewhere in the network
ARG TEST_ENV_IP=192.168.220.21
ENV DATABASE_URL="postgresql://localdev:123SuperSafe@$TEST_ENV_IP:5432/localdev"
WORKDIR /work
# IMPORTANT: have a `.dockerignore` file and exclude at least your `target`
# directory to not copy huge amounts of data into the docker context
#
# !!! EVEN MORE IMPORTANT !!!
# If you have any secrets in a `.env` file or something, add this to `.dockerignore` too!
COPY . .
# this small workaround fixes a chicken and egg problem with `rust_embed` in this template
# so we can check clippy before actually compiling
RUN mkdir -p target/site
# make sure we exit early if clippy is not happy
RUN cargo clippy -- -D warnings
# execute tests first
RUN cargo leptos test
# after successful tests, build it
RUN cargo leptos build --release
########################################
########################################
########################################
# If you want to be able to debug the image later and `exec` into the container,
# change this line to alpine instead of scratch. This should only be done for
# debugging / testing, since scratch is way more secure.
FROM scratch as app
#FROM alpine:3.18.2 as app
# use this image instead of one from below, if you are using the `leptos-builder-gnu`
# as your `builder` in stage 1
#FROM gcr.io/distroless/cc:debug
# Must match your `output-name` from the `metadata.leptos` until the next release
ENV LEPTOS_OUTPUT_NAME=leptos-axum-template
ENV LEPTOS_SITE_ROOT=site
ENV LEPTOS_SITE_PKG_DIR=pkg
ENV LEPTOS_SITE_ADDR="0.0.0.0:3000"
ENV LEPTOS_RELOAD_PORT=3001
USER 10001
WORKDIR /app
COPY --chown=10001:10001 --from=builder /work/target/site/ ./site/
COPY --chown=10001:10001 --from=builder /work/target/server/release/server .
# depends on the port you choose
EXPOSE 3000
# must match your final server executable name
ENTRYPOINT ["/app/server"]
These files may use If you need some Kubernetes definitions, I could provide some if necessary. I do have quite a bit of documentation already created for another project: https://sebadob.github.io/rauthy/getting_started/k8s.html#create-and-apply-the-stateful-set |
|
Hello everyone, There's been quite some discussion as part of our community in getting Leptos support at Shuttle. As part of this conversation, I'd like to share the Leptos Starter Template one of our paid open source contributors created, which includes deployment options along with other integrations -- https://github.com/joshua-mo-143/leptos_axum_shuttle_ex For context, Shuttle is a Rust-native cloud development platform that let's you quickly deploy your Rust apps. On top of that, it utilizes Infrastructure from Code which allows you to provision resources just by annotating your code. Our Leptos Starter Template demonstrates an integration of TailwindCSS with the Leptos web framework, Axum support, and utilizes Trunk. With Shuttle on-top of it, deploying is just a matter of running the While the template is not in its final form yet, it is usable and provides clear instructions on getting started. We believe that this template has the potential to help developers kickstart their Leptos projects and make deployment a smoother process. We are very open to collaborating on ensuring a smooth Leptos deployment experience both for our users and Leptos users so thoughts & comments are appreciated! :) |
|
@benwis What do you think of this template using Trunk? Is it easier to nixify projects using Trunk? |
It's probably a little bit easier for Nix, mostly because cargo-leptos wasn't up to date and in the Nix repos. Now it is, so it's just a little bit more complicated moving the final files and getting everything configured. I know you've seen my Flake that does SSR and I'm spending some time improving those the last few days. @ivancernja This template looks good for CSR rendering with Trunk, I'm happy to see more ways to deploy. I'd encourage you to create a template for Leptos in SSR, either with Axum or Actix, and present both options. Leptos in CSR is basically just compiling and serving static files. I feel like most users(and I may be wrong here) are using that, and I wouldn't want to confuse them. |
|
@benwis Thanks for the feedback, and I see it the same way wtr to CSR vs SSR. There's a small blocker on our end when it comes to supporting SSR w/ Leptos (shuttle-hq/shuttle#1002) that we are prioritizing to solve in this week/next week. As soon as we get that over the line, we should be able to create an example with SSR as well. |
|
If anyone is looking to deploy using Nix, checkout https://github.com/srid/leptos-fullstack (It is fairly straightforward to build a Docker image from this.) |
|
Some insights distilled from this thread, including a link to the thread, are now included in the book at https://leptos-rs.github.io/leptos/deployment.html |
|
It would be good if the GitHub Actions could be turned into a gist so we can comment on them individually. ProblemI encountered an issue in the The result was… SolutionThe solution was to add
|
|
If anyone is interested in deploying a Client-Side Rendered Leptos app using the Spin serverless wasm framework, feel free to clone my quickstart example repo available here: https://github.com/diversable/leptos-with-spin. Directions are included in the repo to get you up and going quickly !! The repo's Readme also includes directions for adding Spin to an existing client-side-rendered Leptos app. |
|
For anyone using this Dockerfile that @sebadob proposed to build musl images of cargo-leptos:
note that you may need to add the line I was unable to get the dockerfile to work without that line, as otherwise openssl could not be found by the linker. |
Yeah, sorry. I always assume people use |
@sebadob is there a way to use rustls with leptos? I would much prefer it over openssl, but couldn't see an option for it in the docs. |
There is a |
I get a 404 at this page. |
|
Did anyone try to build MUSL for aarch64? |
I see no reason it wouldn't work, not a terribly common target though |
Work perfectly fine. I am building multi-platform container images all the time without issues. You only may need to set |
|
Cargo Leptos can't build on aarch64 because wasm-opt is not available for ARM.
|
|
Interesting, it builds on the apple arm target, but stuff like this is why we typically wait for cargo-dust to make our lives easy
…On Wed, Jan 3, 2024, at 3:53 PM, Haist Saraiva wrote:
Cargo Leptos can't build on aarch64 because wasm-opt is not available for ARM.
Then I found this cargo configuration <rust-lang/rust#46651 (comment)> but got a memory issue because of Ubuntu's GCC version 11. Finally, I created a helper image builder.
`docker run -v $(pwd):/app -e LEPTOS_BIN_TARGET_TRIPLE=aarch64-unknown-linux-musl haist/leptos_musl`
`docker run -v $(pwd):/app -e LEPTOS_BIN_TARGET_TRIPLE=x86_64-unknown-linux-musl haist/leptos_musl`
—
Reply to this email directly, view it on GitHub <#1152 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABVBTCMUPO4UJTKPK5HHUHTYMYDP5AVCNFSM6AAAAAAY3WY266VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNZWGIYDGMBQGQ>.
You are receiving this because you were mentioned.Message ID: ***@***.***>
|
|
Little help here, I'm able to successfully build the application and deploy to GitHub Pages, but I'm getting this error in my browser and the page is blank here's the link to the repo https://github.com/opeolluwa/utils |
|
@opeolluwa It looks like you are getting 404s on those files. If you can't figure it out I'd recommend opening a new discussion for help, or joining our Discord (where people are more active) — it is much more visible than a comment on an issue that was closed a year ago! |
|
@opeolluwa disallowed MIME type and bad sha hashes usually refer to a problem with your CSP settings. |
|
Turned out Leptos CSR applications can be deployed to https://surge.sh/
|
I've arrived at the final chapter in the Leptos book: Deployment. This is one I'd like to crowd-source a little, because a) I'm weak on this stuff and b) a lot of you have deployed apps in interesting ways, I'm sure.
If you have any info to share on deployment, please post it in this thread and I'll put it together into a chapter!
Many thanks.
The text was updated successfully, but these errors were encountered: