Full Stack Project with Vue.js and Flask (Games Library App)

[@BekBrace]

Hope you’ll enjoy this project and learn something new from it

[@travelworld6602]

how did you save the file in nano? with which command?

[@BekBrace]

@Ahmed Shahriar thank you

[@BekBrace]

@@travelworld6602 Ctrl X

[@animeshmishra4282]

Finally a video that uses 3 tier architecture concept and not just simply Flask that renders html pages to provide dynamic content

[@BekBrace]

Thank you, friend 🙂

[@luizferez89]

This is gold, please more of such vue projects, super work thank you very much man

[@BekBrace]

Thanks a lot friend 🙏

[@gabrielteuchert3699]

Not the commenting guy on KZbin but man, this is awesome and I just have to thank you for such a well guided tutorial! Thank you! The first steps are kinda overwhelming if one want to take the step from python coding to a full-stack project 🦈 You saved me days of scrolling through documentations with this vid and it is indeed really enjoyable to watch - thank you Bek (:

[@BekBrace]

Wow, thank you so much for your kind words. I did my best, and i am glad you enjoyed it and found it useful, cheers mate.

[@lovelyalicekim]

Thank you so much for this amazing tutorial. It tooks 2days to finish but I understand the rough concept of flask and vue through the journey. Your explanation is so easy to understand as I have an experience in node.js and express, made broaden my knowledge so much!! Really appreciate 💌

[@BekBrace]

Hey Alice, thank you for watching the whole tutorial, this is really great !

[@Lanciz]

I find this video-tutorial is AMAZING, but unluckily I cannot follow it cause of a lot of errors (prob outdated versions and conflicts). Is there any chance you publish a 2024 version of this project? Thanks for what you do!

[@BekBrace]

Thank you so much. Yes I might refactor the code to create a slightly different app but with same concepts

[@marcus7387]

I was looking for this !!!!! Thank you so much sir for your great videos

[@BekBrace]

Great to hear :)

[@monasser6]

Great explanation , thank you so much for the effort

[@BekBrace]

Thank you 🙏

[@stephenthumb2912]

seems like a good tutorial but there's just way too many issues with eslint. problem doing the edits, eslint errors. trying to install axios, more eslint errors. not sure if this is just my installation of node but I started brand new and still more eslint issues. kind of weird to me that a linter dependency would cause so many issues.

[@creet_z]

yeah wish I could follow along but can't figure out how to fix the eslint and prettier errors

[@戚圣嘉]

The video is great! That's real full stack !

[@BekBrace]

Thank you so much 🙂

[@yukinorhiko7388]

Thank you Bek👍 Great Job !!!

[@gleb.stachev]

First of all, thank you for the explanation. There are two question: How to transfer data that cannot be displayed on the flask route for free access (after deploy). And the second question - is it possible to make part of the routes on flask, and part on vue for one site ?

[@BekBrace]

Thank you for watching 🙂 I will look into both questions and I will get back to you later. Cheers.

[@gleb.stachev]

Thank you, it's really useful materials ! Only, if you will have time, it's can be to complicated, I understand... or maybe you will want to add here tutorial video on this channel, later.

[@avinashpatel6745]

Thanks Bek, and I would like to see more VueJs tutorials with FastAPI or Django plzz man

[@BekBrace]

Thank you Avinash, I’ll do my best 🙂

[@limxunyi1823]

Hi Bek! Thank you for the video, i definitely learned a lot from this video. I was just wondering if you have any videos or experience deploying this type of builds (where you have to run both the Flask and Vue server)? I am a bit confused how to deploy them.

[@BekBrace]

Hey Lim. Thanks a lot for your comment ☺️ Yes, a full stack app is best being deployed using Heroku services. You can check Heroku out online, i do t think I've ever made that on the channel though, bit it should be straightforward. This works with any frontend/backend interactive app, (react And Django, Vue and fastapi, etc..)

[@limxunyi1823]

@@BekBrace Thank you for replying to my comment! Your video was really helpful to building the application that I needed to. Really appreciate it!

[@BekBrace]

@@limxunyi1823 you're always welcome

[@mailtosrajesh]

I am a experienced desktop developer. Have knowledge on python. But new to web , flask and Vue.js . Can I start with this course? Any recommended tutorials to start vue and flask?

[@BekBrace]

Sure, you can start learning flask already. If you're experienced with HTML CSS and JavaScript, then you can learn Vue very quickly

[@mailtosrajesh]

@@BekBrace thanks. Will continue this course.

[@BekBrace]

@@mailtosrajesh I am sure it will be useful if you're good in Python already - Good luck.

[@HenryChidubemEzeh]

That's my stack. HTML, CSS, JavaScript, Vue JS, python Flask, and mongodb database.

[@pinheirobastos]

Amazing tutorial! Could you share which kind of extension/app you use for the icons?

[@BekBrace]

Thank you )) Surprisingly, it's simpler than that, I use a simple online website [getemoji.com] with different emojis and copy the one that I look for. That's it :)

[@mauricefakhry8039]

Hit Like before even opening it :) thanks a lot, bro

[@SanjoliVashisth]

Prettier formatter is not working I have to do it manually.

[@BekBrace]

Had the same issue

[@mischeiwiller]

The tutorial so far is pretty nice! I enjoy it. I just have some issue with the eslint: Probably something in my configs is not right, because i always get outputs like this: Compiled with problems: × ERROR [eslint] /Users/michaellappert/Downloads/repos/flask-vue-library/frontend/frontend/src/components/Shark.vue 2:3 error Delete `··` prettier/prettier 3:1 error Delete `····` prettier/prettier ... /Users/michaellappert/Downloads/repos/flask-vue-library/frontend/frontend/src/router/index.js 3:19 error Replace `'../components/Shark.vue'` with `"../components/Shark.vue";` prettier/prettier 9:9 error Replace `·:·'/shark'` with `:·"/shark"` prettier/prettier ... ✖ 18 problems (18 errors, 0 warnings) 17 errors and 0 warnings potentially fixable with the `--fix` option. And i am not able to fix it yet. Do you have any idea where this comes from? Thanks a lot if you can help out on this issue!

[@BekBrace]

Hey thank you so much for your comment :) Well, I think the errors you're encountering are related to code formatting issues reported by ESLint, and it specifically mentions the prettier/prettier rule. This often occurs when there are inconsistencies between your code and the Prettier configuration. (edit) BTW, you can use : npx eslint --fix This will automatically fix ESLint errors that are fixable.

[@waelmohameddd]

Subscribed because of this great tutorial too !!!!! Thanks a bunch 🙂

[@BekBrace]

Thank you for watching 🙏😊

[@DontBeDumb-z6z]

my eslint does not perform the same as yours, even when following instructions exactly, mine is throwing all kinds of errors and is extremely burdensome

[@toasterv4205]

hey how can i create a searchbar in navbar and display data on a page?

[@yoyo0020]

Thanks for the video, how would I handle deploying this web app? Would I deploy the API seperately and the Vue app seperately and just make the axios fetch from the API?

[@BekBrace]

Hey, thanks for this important question, and I am thinking of making a video on how to do it actually. But to give you an idea on what can you do, well, this can be done by deploying the backend and frontend separately. You'll also need to configure them to communicate with each other via HTTP requests (e.g., Axios) as you mentioned. Once you have your project ready, you can start by: 1- Deploying the Backend (Flask) Choose a hosting provider or server to deploy your Flask application. Common choices include cloud platforms like AWS, Azure, Google Cloud, or a dedicated server. Set up the server environment, including installing required dependencies and configuring the web server (e.g., Nginx or Apache) to reverse proxy requests to your Gunicorn server. Deploy your Flask application to the server and configure it to start automatically, typically using a process manager like systemd or supervisor. Ensure your server's firewall and security settings are properly configured to protect your API. Then: 2- Deploying the Frontend (Vue.js) Choose a hosting provider or server to deploy your Vue.js application. Common choices include cloud platforms, static website hosts like Netlify or Vercel, or a separate directory on the same server as your backend. Upload the contents of the dist folder to your chosen hosting provider or server. Configure your server to serve the static files. Ensure that your Vue.js app's API requests are pointing to the correct production Flask API URL. Hope this answer is satisfactory - All the best now

[@yoyo0020]

@@BekBrace Thank you very much

[@ahmedssss5]

More Vue and Vite also please _ great tutorial man, thanks 👍

[@BekBrace]

Thank you, I'll do my best 😉

[@jaimeviloriogreen]

I love pipenv, the best one!

[@BekBrace]

mine too

[@PiaRiachi]

Nice. Do you have a vue 3 version of the code?

[@BekBrace]

Nope.

[@farizabduhakimov5970]

Hi I really liked your lessons and started learning flask as well, please make a video tutorial on Flask music web application. Thanks

[@BekBrace]

Thank you Fariz , glad you found it useful :)

[@farizabduhakimov5970]

@@BekBrace Of course, I look forward to more new and quality video lessons ;)

[@DontBeDumb-z6z]

seems like a good tutorial but in practice I can't do anything with countless eslint errors that prevent me from actually doing anything... insanely frustrating

[@jeanleloup2205]

Amazing job 🔥 🔥 🔥

[@mohammedaladi2996]

could you please show us how to develop app or how to upload this project on internet ? like pythonanywhere

[@BekBrace]

I am developing a FastAPI App and will show you how to deploy it on heroku

[@mahendranath2504]

Thank you so much ❤❤❤

[@BekBrace]

You're welcome my friend

[@sajaldhingra9321]

Hey! I learned a lot, thanks mate

[@BekBrace]

You're welcome, my friend

[@turembekov]

Thank you so much for this tutorial friend.

[@BekBrace]

You’re welcome, my friend

[@kristyanlofrido7451]

if axios retrive html how to render it in component without using v-html any idea?

[@BekBrace]

f you want to retrieve HTML using Axios and render it in a component without using the v-html directive, you can achieve this by leveraging the DOM manipulation capabilities of JavaScript. Here's a step-by-step guide on how to do it: Fetch HTML Using Axios: Start by using Axios to fetch the HTML content from the server. You can do this in your component's lifecycle hook (e.g., mounted or created). javascript Copy code import axios from 'axios'; export default { data() { return { fetchedHtml: '' }; }, mounted() { axios.get('your_url_here') .then(response => { this.fetchedHtml = response.data; // Call a function to process and render the HTML this.renderFetchedHtml(); }) .catch(error => { console.error('Error fetching HTML:', error); }); }, methods: { renderFetchedHtml() { // Parse and render the fetched HTML // You can call this function after fetching HTML } } } Parse and Render HTML: Once you've fetched the HTML content, you can use the DOM manipulation capabilities to parse and render it. A common approach is to create a hidden element (such as a ) where you can place the HTML content, and then append that element to the component's main content. javascript Copy code renderFetchedHtml() { const tempDiv = document.createElement('div'); tempDiv.innerHTML = this.fetchedHtml; // Copy the nodes from the temporary div to your component's element // For example, assuming you have a div with class "content" in your template: const targetElement = this.$el.querySelector('.content'); while (tempDiv.firstChild) { targetElement.appendChild(tempDiv.firstChild); } } Styling and Adjustments: Depending on the content and the CSS styles, you might need to adjust the styling or make additional adjustments to the rendered HTML. Remember that manipulating the DOM directly like this can make your code more complex and harder to maintain. In many cases, using the v-html directive is a more straightforward and safer approach. If possible, consider restructuring your component to work with Vue's reactivity and components system while using v-html to render HTML content. Hope this was helpful, Best, Amir

[@jingzhenwang9713]

Why is my "played" value always false in the first modal, does someone have the same problem as I?

[@BekBrace]

Hey there. So, I think the "played" value is consistently false in the first modal, and without seeing your code where you might have mistakenly produced a typo I can advise you to check the GitHub repo in the description, and compare the code - if the error persists let me know, we will figure something out

[@-.....-.....-..............-]

This tutorial is well made

[@BekBrace]

Thank you!

[@jawed9691]

does this contain the use of celery?

[@BekBrace]

no

[@jawed9691]

why do you have a frontend inside a frontend, cant we directly make a frontend from our root directory @@BekBrace

[@SwatejTech]

Where is the codebase link?

[@BekBrace]

Open your eyes you'll find it

[@nangapple8290]

Hi what is the name of your extension?

[@BekBrace]

Which one

[@BRISKLYHIDDEN]

Thank you for great tutorial

[@BekBrace]

My pleasure 🙏

[@gazchao]

Thanks. But there is too many inconsistency in this sharing, it just won't work without debugging your code.

[@BekBrace]

What do you mean ?

[@gazchao]

@@BekBrace There few inconsistency on variable naming like, there is editForm in vue script, and suddently in your video it changed to editModalForm, and played is defined as empty array, it got warned by vue.

[@BekBrace]

@@gazchao 👍

[@gazchao]

@@BekBrace Thanks for the video, that taught me a lot. Thumb's up.

[@BekBrace]

@@gazchao thanks 🙏

[@open-source243]

Thanks thanks for your effort :)

[@BekBrace]

Thank You for watching :)

[@danielschmider5069]

You should really show the debugging process as well, not only how to correct them - most of them were typos, and the fix is obvious. It is however not trivial how to debug and find them.

[@BekBrace]

You asked and answered yourself actually, so i don't understand what's your demand now.

[@danielschmider5069]

@@BekBrace my "demand" is to show your debugging process. How did you find where the typos are, what did you use to figure it out, what errors were you getting, etc...

[@SANJOLI-i9b]

bro I am only getting errors please help me.

[@BekBrace]

bro what errors ?!

[@SANJOLI-i9b]

@@BekBrace bro my prettier code formatter isn't working. Now I have to format the errors manually!!

[@salehm9631]

Thank you

[@ilaydelrey3122]

Wish this would be Vue3

[@BekBrace]

You can convert it to Vue 3 as a personal project

[@i4h2x3]

15:10

[@BekBrace]

?

[@i4h2x3]

@@BekBrace it's just a reminder for me, where I was

[@olivechevalier2896]

Super 🔥

[@Aryxst]

Fantabolous

[@BekBrace]

Thank you 😊

[@li.tevezz]

privet 👍

[@BekBrace]

Привет

[@DontBeDumb-z6z]

My eslint is not cooperating with prettier

[@Oncashy]

bro got russian accent

[@BekBrace]

I am Russian