├── .github └── workflows │ └── combine-prs.yml ├── .gitignore ├── 01_vue_in_jinja ├── app.py ├── static │ └── index.js └── templates │ └── index.html ├── 02_separate_ends ├── api │ └── app.py └── webapp │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ └── HelloWorld.vue │ └── main.js ├── 02_separate_ends_with_ssr ├── api │ └── app.py └── webapp │ ├── .editorconfig │ ├── .gitignore │ ├── assets │ └── README.md │ ├── components │ ├── Logo.vue │ └── README.md │ ├── layouts │ ├── README.md │ └── default.vue │ ├── middleware │ └── README.md │ ├── nuxt.config.js │ ├── package-lock.json │ ├── package.json │ ├── pages │ ├── README.md │ └── index.vue │ ├── plugins │ └── README.md │ ├── static │ ├── README.md │ └── favicon.ico │ └── store │ └── README.md ├── 03_flask_blueprints ├── api │ ├── __init__.py │ └── api.py ├── app.py └── client │ ├── __init__.py │ ├── client.py │ ├── static │ └── index.js │ └── templates │ └── index.html ├── README.md └── requirements.txt /.github/workflows/combine-prs.yml: -------------------------------------------------------------------------------- 1 | name: 'Combine PRs' 2 | 3 | # Controls when the action will run - in this case triggered manually 4 | on: 5 | workflow_dispatch: 6 | inputs: 7 | branchPrefix: 8 | description: 'Branch prefix to find combinable PRs based on' 9 | required: true 10 | default: 'dependabot' 11 | mustBeGreen: 12 | description: 'Only combine PRs that are green (status is success)' 13 | required: true 14 | default: true 15 | combineBranchName: 16 | description: 'Name of the branch to combine PRs into' 17 | required: true 18 | default: 'combine-prs-branch' 19 | ignoreLabel: 20 | description: 'Exclude PRs with this label' 21 | required: true 22 | default: 'nocombine' 23 | 24 | # A workflow run is made up of one or more jobs that can run sequentially or in parallel 25 | jobs: 26 | # This workflow contains a single job called "combine-prs" 27 | combine-prs: 28 | # The type of runner that the job will run on 29 | runs-on: ubuntu-latest 30 | 31 | # Steps represent a sequence of tasks that will be executed as part of the job 32 | steps: 33 | - uses: actions/github-script@v3 34 | id: fetch-branch-names 35 | name: Fetch branch names 36 | with: 37 | github-token: ${{secrets.GITHUB_TOKEN}} 38 | script: | 39 | const pulls = await github.paginate('GET /repos/:owner/:repo/pulls', { 40 | owner: context.repo.owner, 41 | repo: context.repo.repo 42 | }); 43 | branches = []; 44 | prs = []; 45 | base_branch = null; 46 | for (const pull of pulls) { 47 | const branch = pull['head']['ref']; 48 | console.log('Pull for branch: ' + branch); 49 | if (branch.startsWith('${{ github.event.inputs.branchPrefix }}')) { 50 | console.log('Branch matched: ' + branch); 51 | statusOK = true; 52 | if(${{ github.event.inputs.mustBeGreen }}) { 53 | console.log('Checking green status: ' + branch); 54 | const statuses = await github.paginate('GET /repos/{owner}/{repo}/commits/{ref}/status', { 55 | owner: context.repo.owner, 56 | repo: context.repo.repo, 57 | ref: branch 58 | }); 59 | if(statuses.length > 0) { 60 | const latest_status = statuses[0]['state']; 61 | console.log('Validating status: ' + latest_status); 62 | if(latest_status != 'success') { 63 | console.log('Discarding ' + branch + ' with status ' + latest_status); 64 | statusOK = false; 65 | } 66 | } 67 | } 68 | console.log('Checking labels: ' + branch); 69 | const labels = pull['labels']; 70 | for(const label of labels) { 71 | const labelName = label['name']; 72 | console.log('Checking label: ' + labelName); 73 | if(labelName == '${{ github.event.inputs.ignoreLabel }}') { 74 | console.log('Discarding ' + branch + ' with label ' + labelName); 75 | statusOK = false; 76 | } 77 | } 78 | if (statusOK) { 79 | console.log('Adding branch to array: ' + branch); 80 | branches.push(branch); 81 | prs.push('#' + pull['number'] + ' ' + pull['title']); 82 | base_branch = pull['base']['ref']; 83 | } 84 | } 85 | } 86 | if (branches.length == 0) { 87 | core.setFailed('No PRs/branches matched criteria'); 88 | return; 89 | } 90 | core.setOutput('base-branch', base_branch); 91 | core.setOutput('prs-string', prs.join('\n')); 92 | 93 | combined = branches.join(' ') 94 | console.log('Combined: ' + combined); 95 | return combined 96 | # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it 97 | - uses: actions/checkout@v2.3.3 98 | with: 99 | fetch-depth: 0 100 | # Creates a branch with other PR branches merged together 101 | - name: Created combined branch 102 | env: 103 | BASE_BRANCH: ${{ steps.fetch-branch-names.outputs.base-branch }} 104 | BRANCHES_TO_COMBINE: ${{ steps.fetch-branch-names.outputs.result }} 105 | COMBINE_BRANCH_NAME: ${{ github.event.inputs.combineBranchName }} 106 | run: | 107 | echo "$BRANCHES_TO_COMBINE" 108 | sourcebranches="${BRANCHES_TO_COMBINE%\"}" 109 | sourcebranches="${sourcebranches#\"}" 110 | 111 | basebranch="${BASE_BRANCH%\"}" 112 | basebranch="${basebranch#\"}" 113 | 114 | git config pull.rebase false 115 | git config user.name github-actions 116 | git config user.email github-actions@github.com 117 | 118 | git branch $COMBINE_BRANCH_NAME $basebranch 119 | git checkout $COMBINE_BRANCH_NAME 120 | git pull origin $sourcebranches --no-edit 121 | git push origin $COMBINE_BRANCH_NAME 122 | # Creates a PR with the new combined branch 123 | - uses: actions/github-script@v3 124 | name: Create Combined Pull Request 125 | env: 126 | PRS_STRING: ${{ steps.fetch-branch-names.outputs.prs-string }} 127 | with: 128 | github-token: ${{secrets.GITHUB_TOKEN}} 129 | script: | 130 | const prString = process.env.PRS_STRING; 131 | const body = 'This PR was created by the Combine PRs action by combining the following PRs:\n' + prString; 132 | await github.pulls.create({ 133 | owner: context.repo.owner, 134 | repo: context.repo.repo, 135 | title: 'Combined PR', 136 | head: '${{ github.event.inputs.combineBranchName }}', 137 | base: '${{ steps.fetch-branch-names.outputs.base-branch }}', 138 | body: body 139 | }); -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | __pycache__ 2 | .vscode/ 3 | env/ -------------------------------------------------------------------------------- /01_vue_in_jinja/app.py: -------------------------------------------------------------------------------- 1 | from flask import Flask, render_template 2 | 3 | app = Flask(__name__) 4 | 5 | @app.route("/") 6 | def index(): 7 | return render_template("index.html", **{'greeting': 'Hello from Flask!'}) 8 | -------------------------------------------------------------------------------- /01_vue_in_jinja/static/index.js: -------------------------------------------------------------------------------- 1 | const vm = new Vue({ // Again, vm is our Vue instance's name for consistency. 2 | el: '#vm', 3 | delimiters: ['[[', ']]'], 4 | data: { 5 | greeting: 'Hello, Vue!' 6 | } 7 | }) 8 | -------------------------------------------------------------------------------- /01_vue_in_jinja/templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Method 1 - Vue in Jinja 7 | 8 | 9 | 10 |
11 |

{{ greeting }}

12 |

[[ greeting ]]

13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /02_separate_ends/api/app.py: -------------------------------------------------------------------------------- 1 | from flask import Flask 2 | from flask_cors import CORS 3 | 4 | app = Flask(__name__) 5 | CORS(app) 6 | 7 | @app.route("/greeting") 8 | def greeting(): 9 | return {'greeting': 'Hello from Flask!'} 10 | -------------------------------------------------------------------------------- /02_separate_ends/webapp/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /02_separate_ends/webapp/README.md: -------------------------------------------------------------------------------- 1 | # webapp 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Customize configuration 19 | See [Configuration Reference](https://cli.vuejs.org/config/). 20 | -------------------------------------------------------------------------------- /02_separate_ends/webapp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webapp", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "prod": "http-server" 9 | }, 10 | "dependencies": { 11 | "http-server": "^0.12.3", 12 | "vue": "^2.6.11" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-service": "~4.3.0", 16 | "vue-template-compiler": "^2.6.11" 17 | }, 18 | "browserslist": [ 19 | "> 1%", 20 | "last 2 versions", 21 | "not dead" 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /02_separate_ends/webapp/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/based-jace/combining-flask-with-vue/0239f3b7d746b86174a53d1e85b55ef6454196db/02_separate_ends/webapp/public/favicon.ico -------------------------------------------------------------------------------- /02_separate_ends/webapp/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /02_separate_ends/webapp/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 29 | 30 | 40 | -------------------------------------------------------------------------------- /02_separate_ends/webapp/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/based-jace/combining-flask-with-vue/0239f3b7d746b86174a53d1e85b55ef6454196db/02_separate_ends/webapp/src/assets/logo.png -------------------------------------------------------------------------------- /02_separate_ends/webapp/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 39 | 40 | 41 | 57 | -------------------------------------------------------------------------------- /02_separate_ends/webapp/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: function (h) { return h(App) }, 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /02_separate_ends_with_ssr/api/app.py: -------------------------------------------------------------------------------- 1 | from flask import Flask 2 | from flask_cors import CORS 3 | 4 | app = Flask(__name__) 5 | CORS(app) 6 | 7 | @app.route("/greeting") 8 | def greeting(): 9 | return {'greeting': 'Hello from Flask!'} 10 | -------------------------------------------------------------------------------- /02_separate_ends_with_ssr/webapp/.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = tab 6 | indent_size = 4 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /02_separate_ends_with_ssr/webapp/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | /logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | 86 | # macOS 87 | .DS_Store 88 | 89 | # Vim swap files 90 | *.swp 91 | -------------------------------------------------------------------------------- /02_separate_ends_with_ssr/webapp/assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /02_separate_ends_with_ssr/webapp/components/Logo.vue: -------------------------------------------------------------------------------- 1 | 20 | 35 | -------------------------------------------------------------------------------- /02_separate_ends_with_ssr/webapp/components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | The components directory contains your Vue.js Components. 6 | 7 | _Nuxt.js doesn't supercharge these components._ 8 | -------------------------------------------------------------------------------- /02_separate_ends_with_ssr/webapp/layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Application Layouts. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). 8 | -------------------------------------------------------------------------------- /02_separate_ends_with_ssr/webapp/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 56 | -------------------------------------------------------------------------------- /02_separate_ends_with_ssr/webapp/middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your application middleware. 6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages. 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /02_separate_ends_with_ssr/webapp/nuxt.config.js: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | mode: 'universal', 4 | /* 5 | ** Headers of the page 6 | */ 7 | head: { 8 | title: process.env.npm_package_name || '', 9 | meta: [ 10 | { charset: 'utf-8' }, 11 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 12 | { hid: 'description', name: 'description', content: process.env.npm_package_description || '' } 13 | ], 14 | link: [ 15 | { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } 16 | ] 17 | }, 18 | /* 19 | ** Customize the progress-bar color 20 | */ 21 | loading: { color: '#fff' }, 22 | /* 23 | ** Global CSS 24 | */ 25 | css: [ 26 | ], 27 | /* 28 | ** Plugins to load before mounting the App 29 | */ 30 | plugins: [ 31 | ], 32 | /* 33 | ** Nuxt.js dev-modules 34 | */ 35 | buildModules: [ 36 | ], 37 | /* 38 | ** Nuxt.js modules 39 | */ 40 | modules: [ 41 | ], 42 | /* 43 | ** Build configuration 44 | */ 45 | build: { 46 | /* 47 | ** You can extend webpack config here 48 | */ 49 | extend (config, ctx) { 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /02_separate_ends_with_ssr/webapp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webapp", 3 | "version": "1.0.0", 4 | "description": "My astounding Nuxt.js project", 5 | "author": "based-jace", 6 | "private": true, 7 | "scripts": { 8 | "dev": "nuxt", 9 | "build": "nuxt build", 10 | "start": "nuxt start", 11 | "generate": "nuxt generate" 12 | }, 13 | "dependencies": { 14 | "nuxt": "^2.0.0" 15 | }, 16 | "devDependencies": {} 17 | } 18 | -------------------------------------------------------------------------------- /02_separate_ends_with_ssr/webapp/pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /02_separate_ends_with_ssr/webapp/pages/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 28 | 29 | 53 | -------------------------------------------------------------------------------- /02_separate_ends_with_ssr/webapp/plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). 8 | -------------------------------------------------------------------------------- /02_separate_ends_with_ssr/webapp/static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your static files. 6 | Each file inside this directory is mapped to `/`. 7 | Thus you'd want to delete this README.md before deploying to production. 8 | 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 10 | 11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 12 | -------------------------------------------------------------------------------- /02_separate_ends_with_ssr/webapp/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/based-jace/combining-flask-with-vue/0239f3b7d746b86174a53d1e85b55ef6454196db/02_separate_ends_with_ssr/webapp/static/favicon.ico -------------------------------------------------------------------------------- /02_separate_ends_with_ssr/webapp/store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory automatically activates the option in the framework. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /03_flask_blueprints/api/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/based-jace/combining-flask-with-vue/0239f3b7d746b86174a53d1e85b55ef6454196db/03_flask_blueprints/api/__init__.py -------------------------------------------------------------------------------- /03_flask_blueprints/api/api.py: -------------------------------------------------------------------------------- 1 | from flask import Blueprint 2 | 3 | api_bp = Blueprint('api_bp', __name__) # "API Blueprint" 4 | 5 | @api_bp.route("/greeting") # Blueprints don't use the Flask "app" context. They use their own 6 | def greeting(): 7 | return {'greeting': 'Hello from Flask!'} 8 | -------------------------------------------------------------------------------- /03_flask_blueprints/app.py: -------------------------------------------------------------------------------- 1 | from flask import Flask 2 | from api.api import api_bp 3 | from client.client import client_bp 4 | 5 | app = Flask(__name__) 6 | app.register_blueprint(api_bp, url_prefix='/api_v1') 7 | app.register_blueprint(client_bp) -------------------------------------------------------------------------------- /03_flask_blueprints/client/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/based-jace/combining-flask-with-vue/0239f3b7d746b86174a53d1e85b55ef6454196db/03_flask_blueprints/client/__init__.py -------------------------------------------------------------------------------- /03_flask_blueprints/client/client.py: -------------------------------------------------------------------------------- 1 | from flask import Blueprint, render_template 2 | 3 | client_bp = Blueprint('client_bp', __name__, # 'Client Blueprint' 4 | template_folder='templates', # Required for our purposes 5 | static_folder='static', # Again, this is required 6 | static_url_path='/client/static' # Flask will be confused if you don't do this 7 | ) 8 | 9 | @client_bp.route('/') 10 | def index(): 11 | return render_template('index.html') 12 | -------------------------------------------------------------------------------- /03_flask_blueprints/client/static/index.js: -------------------------------------------------------------------------------- 1 | const apiEndpoint = '/api_v1/'; 2 | 3 | const vm = new Vue({ 4 | el: '#vm', 5 | delimiters: ['[[', ']]'], 6 | data: { 7 | greeting: 'Hello, Vue!', 8 | flaskGreeting: 'flaskGreeting' 9 | }, 10 | created: async function(){ 11 | const gResponse = await fetch(apiEndpoint + 'greeting'); 12 | const gObject = await gResponse.json(); 13 | this.flaskGreeting = gObject.greeting; 14 | } 15 | }) 16 | -------------------------------------------------------------------------------- /03_flask_blueprints/client/templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
10 |

[[ greeting ]]

11 |

[[ flaskGreeting ]]

12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Combining Flask and Vue 2 | Blog post for [testdriven.io](https://testdriven.io/). If you want to follow along and create the projects yourself, you can find the post [here](https://testdriven.io/blog/combine-flask-vue/). 3 | 4 | ## Initial Setup 5 | If you don't already have them, install [Git](https://git-scm.com/downloads), [Python](https://www.python.org/downloads/), and [node](https://nodejs.org/en/download/). 6 | 7 | In a terminal, Clone the repo to your computer with `git clone https://github.com/based-jace/combining-flask-with-vue.git`. `cd` into the folder. 8 | 9 | Next, I recommend creating a Python virtual environment with `python3 -m venv env`. (Optional) 10 | 11 | Install the required Python dependencies from the requirements.txt file using `pip install -r requirements.txt`. 12 | 13 | ## Running the Examples 14 | 15 | ### Method 1 - Vue in Jinja 16 | In a terminal, `cd` into the "01_vue_in_jinja" folder of your cloned repo. Since you already have everything you need installed, just use `flask run` to start your app in a development server on localhost:5000. 17 | 18 | ### Methods 2 - Separate Front and Back Ends with Vue 19 | In two terminals, `cd` into the "02_separate_ends" folder of your cloned repo. 20 | 21 | In your first terminal, `cd` into the "api" folder. Use `flask run` to start your Flask api in development server on localhost:5000. 22 | 23 | In your second terminal, `cd` into the "webapp" folder. Install your node dependencies with `npm install`. Run the development version of the Vue webapp with `npm run serve`. The webapp will be running on localhost:8080. 24 | 25 | ### Method 2.5 - Separate Front and Back Ends with Nuxt 26 | In two terminals, `cd` into the "02_separate_ends_with_ssr" folder of your cloned repo. 27 | 28 | In your first terminal, `cd` into the "api" folder. Use `flask run` to start your Flask api in development server on localhost:5000. 29 | 30 | In your second terminal, `cd` into the "webapp" folder. Install your node dependencies with `npm install`. Run the development version of the Nuxt webapp with `npm run dev`. The webapp will be running on localhost:3000. 31 | 32 | ### Method 3 - Flask Blueprints 33 | In a terminal, `cd` into the "03_flask_blueprints" folder of your cloned repo. Just like Method 1, you already have everything you need installed. Use `flask run` to start your app in a development server on localhost:5000. 34 | -------------------------------------------------------------------------------- /requirements.txt: -------------------------------------------------------------------------------- 1 | click==7.1.2 2 | Flask==1.1.2 3 | Flask-Cors==3.0.9 4 | itsdangerous==1.1.0 5 | Jinja2==2.11.3 6 | MarkupSafe==1.1.1 7 | six==1.15.0 8 | Werkzeug==1.0.1 9 | --------------------------------------------------------------------------------