Discussion on: Vue+Flask on DigitalOcean: how to proceed?

[rhymes]

I don't know specifically about Digital Ocean but you should probably just serve the VueJS app from Flask's static app. Treat it as just a JS dependency that's served by the server.

How to do it (I'm using blueprints but you can do it with the regular app)

# Used to find the Vue.js frontend app
TEMPLATE_FOLDER = os.path.abspath(
    os.path.join(os.path.dirname(app.__file__), '../..', 'frontend/dist')
)
STATIC_FOLDER = os.path.join(TEMPLATE_FOLDER, 'static')

# look for the frontend index.html page, it's a Vue.js SPA
app = Blueprint(
    'frontend',
    'app.frontend',
    url_prefix='/',
    template_folder=TEMPLATE_FOLDER,
    static_folder=STATIC_FOLDER,
    static_url_path='/static'
)

@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def index(path):
    'Frontend application'
    return render_template('index.html')

This tells Flask to serve the result of yarn build (the static app) as regular js and css dependencies. The frontend in my case sits in the same repository, that's why this works.

These two lines:

@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')

make sure that all paths get redirected to the SPA so that it's going to be Vue's router responsibility to handle them.

On the Vue part this is the configuration (I'm using vue cli 3 but it worked with the old vue template in a similar way):

module.exports = {
  assetsDir: 'static'
}

so that the build command will put the static files in a static subdirectory to make Flask happy :-)

[Daniel da Rocha]

Wow, would never have thought about doing it this way.
Sounds great. And that makes all my API calls quite simple.
Will give it a try.

Thanks!