Making Axum and Vue play nice | Rust Web Development Crash Course
Vložit
- čas přidán 6. 07. 2024
- Welcome back to the pragmatic intro to Rust Web development series! In this third video, we'll look at the process of connecting the frontend to the backend of our web application.
We walk through setting up our frontend project using yarn and vite with the vue-ts template.
Learn how to use cargo watch and concurrently, to streamline the development process without the need for multiple consoles. Or restarting the backend manually.
We're also trying out a fresh keynote-style presentation. Share your thoughts in the comments below, we value your feedback!
If you find this video helpful, give it a thumbs up and subscribe to this channel for more content. Happy coding! 🚀💻
Here is the medium article friend link for this video: medium.com/@lindblomdev/vue-a...
(if the querystring gets chopped of, and you get blocked by the paywal, just append this ?sk=d4c1f4c6c24439e6db03753179f8984b to the url) 😉
Content chapters:
* Introduction (00:00:00)
* Setting Up the Frontend Project (00:00:30)
* Making the Backend Call (00:02:20)
* Streamlining productivity with cargo watch and concurrently (00:05:55)
* Encouraging Personal Projects and Learning (00:08:00)
* Conclusion (00:09:02)
Thanking viewers for watching and supporting the channel
Encouraging likes, subscriptions, and future engagement
#rustlang #webdevelopment #axum #vuejs
Your presentation format is so pleasant to watch and the flow is really easy to understand and follow through. I wish I stumbled upon your video BEFORE I learned Axum. Incredible work.
useful and concise! thanks a lot. The trick to run BE and FE in the same command is neat!
thanks, its not much work to start two terminals, but over time it get annoying.
Thank you for making this. I appreciate it. Some feedback: It is hard to follow the code in the video because the text is so small. Given how much empty space is around most of the code it might be helpful to increase the text size so the code is easier to read on smaller screens.
Are you watching coding videos on a phone?
Yes, you are right. I will make sure to use the screen better in the next video. Thanks for the feedback 🙏
@@romanstingler435 no, I’m not watching on a phone. I’m mostly watching on a 12.9” iPad. I wouldn’t expect a good experience on a phone, or a smaller iPad.
@lindblomdev What you did in the "Dissecting a tiny Axum app" video was perfect. I'm on a 13" mac and can't read this, unfortunately. Thanks for your efforts, regardless.
I think I have a good idea about how I should do it. It will be a combination of the two styles (along with bigger fonts in the presentation Mode). Thanks again for the feedback.
I understand that it's impossible to keep a short video and cover everything, so you're making choices. Though you asked for feedback, here's mine.
1) It would be really great if you'd mention `route_layer` just because it jumped out at it me leaving sad feeling of overall confusion ("should I peek into these, or should I continue with the lecture").
2) It's not clear if we adding CORS stuff just for dev environment or is it for the project itself. And if it's former --- how could we set it up in a Rust way which provides so many cool and simple to use options to divide what goes into _dev_ `build` and what into other flavors...
Great feedback.
1. we added the cors middleware as a layer not a route_layer. Since we want cors to happen even if we hit a path that doesnt exist. We havent touched on a fallback route yet, we will have to put one in in the clean up phase, since all well behaving web servers should have one 👍
2. CORS is a standard browser thing that is required when you use a separate domain for the frontend and backend. Its needed both in dev and production. We will handle the production configuration when we reach the point and it becomes and issue. The thinking being that its easier to understand why we need to have things be configurable/configure things, if we first see the problems that happens if we dont (like CORS in this video). Its good that you asked about CORS, I will clearer going forward.
@@lindblomdev , they highlighted `tower` not that long ago, and there again that `layer`. I guess it's the same concept, though would be great to hear how they relate, how they influenced each other.
Excuse my simple minded question which may be explained by me so far only having worked with backend stuff:
Please describe why there are two webservers listening: The one on port 3000, and the one on 3030. In particular, why is there a need for having Vue listen on a server at all? Is the dual HTTP listeners something which is only needed during initial development? It seems to me Vue's Javascript could simply be served by Axum, and there wouldn't be a need complications like CORS.
During development we have a dev server for vue to get the hot module reloading working, to see our changes on screen as we save, while keeping most of the app state intact.
When we deploy to production we want to be able to run our js code on the server to render then app server side to have a faster meaningful paint.
You are correct that we could have served the page from the same server and by doing this we could have avoided to configure cors, even if I think it's good to know that it exists.
We will later deploy frontend and backend to different hosting environments. So for us it's better to have the set up like this for that reason too.
Is it an appropriate question to ask why do we use `yarn` everywhere *except* the `dev` script where `npm` comes up suddenly?
Wow.. Did I use npm instead of yarn? That was a mistake if so, one should not mix npm and yarn in the same project.
@@lindblomdev 7:15
you are correct, i didnt even think about that. As long as there is no lock file generated for npm, it doesnt matter very much. But it would be more correct to do `concurrently \"yarn:dev:*\"` instead, nice catch!
Do you have any TypeScript course for rusteceans to recommend? Or maybe you're planning to do one?
No I don't, and I don't plan on doing something like it. But I think you will be fine. If you know rust and js you will pick it up as you go. 👍
@@lindblomdev It will be third attempt... I hope it will work this way, but I won't argument against a more systematic approach, heh.
I'm ok with the font, lol! I guess author wanted to show how tiny are the apps considered yet.
ok, I actually have another problem with font X)
when some part is focused I want to be still able to read the text around somehow; and it faded just too much =(
fade less, noted 👍
@@lindblomdev also it's quite common to see white Rust logo... Maybe you'd want to use it instead of black in the dark environment.
curious why you do not include a link to the repo?
Thank you for the comment 🙏. I think there are better code to copy from, if you want to copy (example directories in crate repos). I don't think you should type along. But watch and learn why things are done. Then build by remembering the why and using documentation to fill in the memory gaps.
thx for responding @@lindblomdev -- to be clear, it's not about copying, more about a resource to check along and make sure we're doing it correctly -- this is also a *very* common practice for most online education, most simply because it gives the students/learners something to help them along the journey in case something in the video does not make sense to them, AND because if the video gets outdated somehow, (e.g. updated crates, or new approaches) the available code can still be updated to match current day best practices -- anyway, just some feedback that might be helpful ¯\_(ツ)_/¯
you have changed my mind.. i will make a repo available and update video descriptions, cant say exactly when, but it will be in place before the next video drop. Thanks insisting, this makes it better for everyone, me included 👍
I preferred the previous style with "live-coding" in VSC. The font is too small and it's way harder to understand what's going on. The content is great, but the form is not so well.
Yeah I messed this up, especially with the font size. 🙈
HMR... Had to look it up. I feel like you're biased to explaining Rust to webdevs. (It's not a bad thing, just a fact.) What do you think, is it reasonable to explain webdev to Rust devs as well? X) Or am I only one viewer who doing this from the wrong end. (%
Haha yeah, it was meant to help people curious in building their backends in rust instead of c#/java/ruby/Python or whatever. Therefore I assume knowledge of the web dev stuff and focus is on how to do what they already know in rust, and at the same time prove that it's not more complicated even if it looks like it is when you aren't used to the syntax and how rust work.
With that said, I will elaborate a little more on the web stuff as we add them going forward. I have seen another comment asking for clarification to a web dev question. 👍
font size way too small!
yes, fonts will be bigger next time 👍
Too small
yes, next one will be better 🙈