Example Flask application using Vue.js instead of jinja templates for web app. The Vue.js Application gets ran from Flask using a static directory.
This is a simple application that just deals the user playing cards. The card deck is stored in the backend in Flask to maintain deck state (so users can't just refresh the app to get a new deck of cards).
This could easily be extended to make an actual card game. Each unique player get's their own id and a deck of cards will be associated to that user and can request the dealer to deal cards:
The user can also cheat and hit the number of cards in deck hyperlink to peek at the rest of the cards in the deck:
If you don't like the order of the cards coming back, you can hit the Shuffle Deck Button to shuffle the remaining cards in the deck (not in your hand)
To actually run this application from flask, you'll need to run the run.py script to start flask and then go to http://localhost:5005/ in your browser (unless you changed the default port the app is running on)
npm install
- By default, the application will run on
http://localhost:5005/, however, if you want to change this modify theconfig.jsonfile
npm run serve
- Note: you only need to run the
servecommand if you want to modify the local dev instance of the vue app. This is not what get's ran from the flask instance (but will use the flask service to fetch cards). If you make changes to the vue app, you must run thebuildcommand below to recompile the production app that will get placed in thestaticflask folder. - in the vue.config.js file, when the
NODE_ENVis pointed toproduction(i.e. being ran from the flask app), thepublicPathgets set to./static/to ensure the vue application is properly routed from thestaticfolder of flask.
npm run build
- Use this command to recompile the app that gets launched flask.