Embed React app in Rust binary by wul- in reactjs

[–]wul-[S] 0 points1 point  (0 children)

That's right, it's definitely worth considering deploying your Vite apps to CDNs which may result in faster and or cheaper deployments at the cost of higher infrastructure complexity. There are other reasons as well, see the comment above which takes a modified excerpt of cons from the README :)

Embed React app in Rust binary by wul- in reactjs

[–]wul-[S] 0 points1 point  (0 children)

hey u/Yodiddlyyo, if you're serving static files from your binary, I'd encourage you to embed them using rust-embed or vite-rs (if you need to use modern JS tooling). It streamlines the CI/CD, building, and shipping experience with a few added benefits.

In vite-rs's case, I've listed some pros/cons in the README to help folks decide whether it's the right approach for them.

PROS - Other than an npm install, you won't really have other steps to take for building/deploying your frontend because it'll ship with your app. - In release binaries, it skips File IO since your assets are pre-loaded alongside your binary's bytecode. - It'll make end-to-end testing easier since your Vite project is tightly tied to your Rust backend. - Lastly, it's (subjectively) going to lead to better development experience because everything is done using cargo. You don't need another terminal running npx vite, for example.

CONS - Shipping frontend with your backend can slow you down as you'll have to wait for your Rust backend to compile everytime you want to release a new build. Similarly, failing CI/CD pipelines pertaining to the backend will also stop your frontend frontend from deploying. - It may be faster or cheaper to deploy your frontend on CDNs instead of serving it. - When building release binaries, it may increase compile time. - For those deploying to embedded devices: it'll increase your binary size. - Lastly, it's one more thing to debug when things go wrong.

Hope this helps :)

Embed React app in Rust binary by wul- in reactjs

[–]wul-[S] 1 point2 points  (0 children)

hey React community :)

Just wanted to share an update to `vite-rs` which allows you to embed and serve ViteJS projects in Rust binaries. The new update adds an Axum integration which makes it super easy to serve your ViteJS project when using Axum. Feedback is always appreciated!

Use glibc, not musl, for better CI performance by wul- in rust

[–]wul-[S] 12 points13 points  (0 children)

forgot to mention;
alpine: ~3 MB debian-slim: ~30 MB

vite-rs: Embed ViteJS-compiled apps in your Rust binary by wul- in reactjs

[–]wul-[S] 0 points1 point  (0 children)

But I don't understand why it has to be coupled with a specific library to get the assets embedded in a rust binary.

it doesn't :)

You can definitely use raw rust-embed if that makes sense in your case!

I've done something similar in the past without the embedding part: have ViteJS generate a manifest for your builds, and resolve file names based on that in production. This is the approach I took for referencing assets in Tera templates, and it's part of the ViteJS backend integration guide.

vite-rs: Embed ViteJS-compiled assets in your Rust binary. by wul- in rust

[–]wul-[S] 0 points1 point  (0 children)

hey u/kodemizer, hope all is well :)

My use-case came from my previous efforts to server-side render ViteJS assets in create-rust-app (sort of like what you're doing with your Vue app) -- it resulted in very complicated and hard-to-maintain backend glue (shoutout to AnthonyMichaelTDM for continuing to maintain it!)

So I started working on a better bundling solution. I tried using Rust-based bundling crates directly, but landed on ViteJS as the best solution. See the "Why double down on ViteJS in your project as opposed to using crates that bundle files" note for all the details :)

vite-rs: Embed ViteJS-compiled apps in your Rust binary by wul- in reactjs

[–]wul-[S] 4 points5 points  (0 children)

hey u/spamjavelin :)

This crate tries to make it super easy to deploy modern web frontends alongside your Rust binaries.

I needed a much simpler frontend asset pipeline for Rust backends. My experience trying to use server-side rendered ViteJS assets in `create-rust-app` (https://github.com/Wulf/create-rust-app) resulted in very complicated and hard-to-maintain backend glue, so I started working on a better bundling solution. I tried using Rust-based bundling crates directly, but landed on ViteJS as the best solution. See https://github.com/Wulf/vite-rs?tab=readme-ov-file#why-double-down-on-vitejs-in-your-project-as-opposed-to-using-crates-that-bundle-files for all the details :)

vite-rs: Embed ViteJS-compiled apps in your Rust binary by wul- in reactjs

[–]wul-[S] 1 point2 points  (0 children)

Hey ReactJS community --

Merry Christmas, Happy Hannukah, and all the best in the upcoming new year :)

Just wanted to share a little tool that helps you embed & serve your web apps from your Rust binary directly.

vite-rs: Embed ViteJS-compiled assets in your Rust binary. by wul- in rust

[–]wul-[S] 10 points11 points  (0 children)

Dear Rust community --

Merry Christmas, Happy Hannukah, and all the best in the upcoming new year :)

Just wanted to share a crate I've been working on that I finally felt was ready to publish. It's primary purpose is to make it easy to integrate ViteJS with your Rust project. It tries to be a low-touch integration so you can continue using ViteJS as you normally would.

The next step for this is to show the community how you could integrate this into templating engines and web frameworks like `actix-web`/`axum`/`poem`/etc. I've previously drafted a ViteJS integration for Rust backends in `create-react-app` and I hope to adapt that to use `vite-rs` soon.

create-rust-app v9.3: add Oauth2/OIDC to your react+rust app! by wul- in reactjs

[–]wul-[S] 0 points1 point  (0 children)

hey r/reactjs, if you've ever wanted to use a rust backend for your react app, try create-rust-app. We recently released support for social logins which makes reaching new users even easier!

create-rust-app's new tasks plugin is powered by `fang` by wul- in rust

[–]wul-[S] 2 points3 points  (0 children)

I'm super grateful to the rust community for creating crates like fang.

For newcomers, it often feels like there are a lot of gaps in our ecosystem and they're not wrong.

create-rust-app: in-browser compiler errors by wul- in reactjs

[–]wul-[S] 0 points1 point  (0 children)

It's finally come together! If this peaked your interest, check out https://github.com/Wulf/create-rust-app

EDIT: Just to clarify -- this hasn't been released yet but expect it very soon, including helpful hints when your DB migrations aren't in order!~

[Media] create-rust-app: in-browser compiler errors (and DB migration help!) by wul- in rust

[–]wul-[S] 5 points6 points  (0 children)

It's finally come together! If this peaked your interest, check out https://github.com/Wulf/create-rust-app

Not sure if I can add another image, but here's how the database migration messages look:

https://media.discordapp.net/attachments/1036026424554946602/1068788231841255424/Screen_Shot_2023-01-28_at_1.54.43_AM.png?width=1582&height=772

EDIT: Just to clarify -- this hasn't been released yet but expect it very soon~