How should I organize the backend and frontend of my code?

问题

I have a project and I've written a lot of code for the backend (Flask / Python) and a lot of code for the front end (Vue). Up until now they've been separate folders / Github repos.

I was wondering what was typical for combining them together with respect to (1) Github repositories and (2) file structure. The front end depends on some functions in the backend, so they'd need to be linked in some way, but since there is so much code for both aspects of the project, I thought it might be overwhelming to just combine them under one Github repository / file structure.

Could anyone offer some suggestions or resources?

回答1:

If you want to keep one Github repos for both backend and frontend application I can suggest the steps below

1. You can create folder named client inside the Flask application and move all of the Vue project to that folder.

2. In the client folder(Vue App), add outputDir parameter inside vue.config.js file as follows

const path = require('path');

module.exports = {
  outputDir: path.resolve(__dirname, '../dist'),
}

3. To create the dist folder inside your Flask Application to serve, go to client folder and run npm run build or yarn build depending on your package manager.

4. In the run.py file, add this code to serve Vue App

from flask import Flask, render_template
app = Flask(__name__,
            static_folder = "./dist",
            template_folder = "./dist")

@app.route('/')
def index():
    return render_template("index.html")

The constructions can change according to your application configurations of Flask Application but I think it can give you the idea.

Check out this article for more.

来源：https://stackoverflow.com/questions/56055190/how-should-i-organize-the-backend-and-frontend-of-my-code