Full Stack Project with Vue.js and Flask (Games Library App)
Vložit
- čas přidán 30. 06. 2024
- This is a Full-Stack project to create a Games Library application using VueJs for the frontend UI and Flask for the backend server and Flask Rest API to connect to the frontend.
We are also using Axios to send requests and receive responses, as well as Bootstrap and BootstrapVue for the modals.
⭐⭐⭐ Special Thanks to Michael Hermann who was Ok to let me use his codebase and create this course.
✨Check out Michael on testdriven.io :
testdriven.io/authors/herman/
✨Michael Hermann's Twitter:
/ mikeherman
✨Michael's web site for blogs and articles:
mherman.org
✨Michael's GirtHub:
github.com/mjhea0
📅 Project Contents:
------------------------------------
Introduction [ 00:00 ]
App demo [ 06:42 ]
Tutorial front and back [ 08:08 ]
App testing and outro [1:27:45]
💥Sources
----------------------
Source Code:
github.com/BekBrace/VueJS-Fla...
VueJs Website:
vuejs.org
Bootswatch cdn :
www.bootstrapcdn.com/bootswatch/
Axios ( GitHub ):
github.com/axios/axios
🔗Social Media
--------------------------
Facebook : / bekbrace
DEV profile : dev.to/bekbrace
GitHub profile : github.com/BekBrace
Website : bekbrace.com - Věda a technologie
Hope you’ll enjoy this project and learn something new from it
how did you save the file in nano? with which command?
@Ahmed Shahriar thank you
@@travelworld6602 Ctrl X
Finally a video that uses 3 tier architecture concept and not just simply Flask that renders html pages to provide dynamic content
Thank you, friend 🙂
This is gold, please more of such vue projects, super work thank you very much man
Thanks a lot friend 🙏
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 💌
Hey Alice, thank you for watching the whole tutorial, this is really great !
I was looking for this !!!!! Thank you so much sir for your great videos
Great to hear :)
Not the commenting guy on CZcams 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 (:
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.
Thank you Bek👍 Great Job !!!
Great explanation , thank you so much for the effort
Thank you 🙏
Subscribed because of this great tutorial too !!!!! Thanks a bunch 🙂
Thank you for watching 🙏😊
The video is great! That's real full stack !
Thank you so much 🙂
Amazing job 🔥 🔥 🔥
Thank you so much for this tutorial friend.
You’re welcome, my friend
Thanks Bek, and I would like to see more VueJs tutorials with FastAPI or Django plzz man
Thank you Avinash, I’ll do my best 🙂
Hit Like before even opening it :) thanks a lot, bro
Hey! I learned a lot, thanks mate
You're welcome, my friend
Thank you for great tutorial
My pleasure 🙏
Thank you so much ❤❤❤
You're welcome my friend
More Vue and Vite also please _ great tutorial man, thanks 👍
Thank you, I'll do my best 😉
Thank you
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.
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..)
@@BekBrace Thank you for replying to my comment! Your video was really helpful to building the application that I needed to. Really appreciate it!
@@limxunyi1823 you're always welcome
Super 🔥
Thanks thanks for your effort :)
Thank You for watching :)
Amazing tutorial! Could you share which kind of extension/app you use for the icons?
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 :)
Hi I really liked your lessons and started learning flask as well, please make a video tutorial on Flask music web application. Thanks
Thank you Fariz , glad you found it useful :)
@@BekBrace Of course, I look forward to more new and quality video lessons ;)
This tutorial is well made
Thank you!
I love pipenv, the best one!
mine too
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.
yeah wish I could follow along but can't figure out how to fix the eslint and prettier errors
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!
Thank you so much. Yes I might refactor the code to create a slightly different app but with same concepts
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 ?
Thank you for watching 🙂 I will look into both questions and I will get back to you later. Cheers.
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.
Nice. Do you have a vue 3 version of the code?
Nope.
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
Fantabolous
Thank you 😊
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?
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
@@BekBrace Thank you very much
hey how can i create a searchbar in navbar and display data on a page?
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
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!
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.
could you please show us how to develop app or how to upload this project on internet ? like pythonanywhere
I am developing a FastAPI App and will show you how to deploy it on heroku
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?
Sure, you can start learning flask already. If you're experienced with HTML CSS and JavaScript, then you can learn Vue very quickly
@@BekBrace thanks. Will continue this course.
@@BekBrace could you please suggest any sources for flask and Vue tutorials?
@@mailtosrajesh I am sure it will be useful if you're good in Python already - Good luck.
if axios retrive html how to render it in component without using v-html any idea?
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
privet 👍
Привет
Why is my "played" value always false in the first modal, does someone have the same problem as I?
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
Wish this would be Vue3
You can convert it to Vue 3 as a personal project
does this contain the use of celery?
no
why do you have a frontend inside a frontend, cant we directly make a frontend from our root directory
@@BekBrace
Hi what is the name of your extension?
Which one
Thanks. But there is too many inconsistency in this sharing, it just won't work without debugging your code.
What do you mean ?
@@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.
@@gazchao 👍
@@BekBrace Thanks for the video, that taught me a lot. Thumb's up.
@@gazchao thanks 🙏
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.
You asked and answered yourself actually, so i don't understand what's your demand now.
@@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...
15:10
?
@@BekBrace it's just a reminder for me, where I was
My eslint is not cooperating with prettier
bro got russian accent
I am Russian