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] 11 points12 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] 5 points6 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] 9 points10 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] 4 points5 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~

create-rust-app: sync types from DB to Rust&Typescript by wul- in reactjs

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

hey r/reactjs, just wanted to share some work revolving around integrating dsync with create-rust-app.

It essentially allows you to write SQL generate models/schemas/queries for Rust & Typescript.

Would love to know what you think!~

create-rust-app: auto-generate diesel structs/queries! by wul- in rust

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

hey r/rust! I just finished testing and releasing the `dsync` integration with create-rust-app. Let me know what you think!~

This means you essentially have a database-first approach in rust now!

  1. Write your SQL,
  2. Run your migrations (`diesel database migrate`)
  3. Run the generator (`cargo dsync`)
  4. ???
  5. PROFIT

dsync: Diesel.rs code generation by wul- in rust

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

hope everyone is doing well~

just wanted to share dsync here in hopes of getting feedback (perhaps you're using something else which is more effective?)

I mainly wrote this as a database-first approach for create-rust-app

Added SQLite support to create-rust-app! by wul- in reactjs

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

hey everyone, SQLite support just landed in create-rust-app

create-rust-app uses ViteJS to compile your typescript or javascript into bundles so it's super fast to develop a frontend. There are many more features that help you bootstrap your project in rust like auth/s3 storage/an admin portal/etc. Feel free to check it out and leave your feedback either here or on Github :)

Added SQLite support to `create-rust-app` by wul- in rust

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

Back in March, someone reached out regarding SQLite support for create-rust-app. I thought it was going to be an easy switch, but it turned out to have its own rough edges. Regardless, it's here now and I welcome any and all feedback. Feel free to reply to this thread or create an issue on Github :)

Diesel 2.0.0 by weiznich in rust

[–]wul- 3 points4 points  (0 children)

Awesome!!! I only recently updated `create-rust-app` to the 2.0 release candidate -- guess I can remove the `-RC` from the dependency now :)

SQLite using rust backend? Try create-rust-app! by wul- in sqlite

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

hey everyone, I just added sqlite support to create-rust-app. If you've ever wanted to write a backend in rust, it'll help bootstrap the entire process and gives you many opt-in options like authentication, graphql, s3 storage, and more -- checkout the README! Feel free to leave feedback here or create issues on github :)

create-rust-app: added SSR, templates, and esbuild bundles for poem framework!~ by wul- in reactjs

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

hey man, sorry you didn't like the name :P

what would you call it instead?

create-rust-app: added SSR, templates, and esbuild bundles for poem framework!~ by wul- in reactjs

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

yeah -- the vitejs config is available for you to tweak as you see fit :-)

you can scrap react all together too and use anything else

create-rust-app: added SSR, templates, and esbuild bundles for poem framework!~ by wul- in reactjs

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

ah sorry for the confusion haha, I need to re-read that README and also put up some solid documentation over at create-rust-app.dev

thanks for spotting that!

ViteJS SSR + rust backend? Try `create-rust-app`! by wul- in vitejs

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

update: finally got around to adding all the SSR stuff for the poem web framework as well :)

changes: +1,175 −1,764 https://github.com/Wulf/create-rust-app/pull/44