Heroku deployment confusion: Vue.js frontend with Flask backend

Question

I currently a web app involving a Vue.js frontend with a Flask backend acting as a REST API. They are divided into the client and server folders in my repo, respectively. I am looking to deploy it to Heroku via the Github deployment feature but am running into some errors and questions I need clarified.

All code can be found in this Github Repo: https://github.com/justintranjt/thrive-test

In development, I have been running the application like so:

In one terminal run thriveApp.py. In another terminal run npm run dev. Navigate to localhost:8080 which is the local server running the Vue.js application.

Is this how the application will be run on Heroku? Or is the Vue application run using npm run build? In that case I would have to take the produced build folder and serve it in the Flask application, correct?

In addition, some of my links between the frontend and backend specify localhost:8080 and localhost:5000 (8080 is Vue and 5000 is Flask) which work locally. But will this work when deployed to Heroku?
```
<b-form>
    <b-button variant="primary" href="http://localhost:5000/loginPage">Login via CAS</b-button>
</b-form>
```

As you can see here, I have a button in my Vue application that links to a login page routed by my Flask application. Will I have to change the portion of the URL that says localhost:5000 when running on Heroku?

Finally, When I currently try to build the application on Heroku only the Python portion of the code is recognized as modules from the Vue app specified by package.json are not installed while plugins for Python specified by requirements.txt ARE installed by Heroku.

I have a feeling all of these questions are generally related to each other. Any other advice or tips regarding Heroku deployment would also be helpful as I'm quite confused about deployment at the moment.

Philip Feldmann · Accepted Answer · 2018-11-03 19:06:30Z

4

Is this how the application will be run on Heroku?

No! npm run dev spins up an entire development server with vue in dev mode and hot reloading. That's a lot of overhead, especially when it comes to file sizes.

Or is the Vue application run using npm run build?

Kind of. Vue doesn't need to run on your server at all, it's all client-side. npm run build bundles and minifies your files to a dist folder, you'll be left with only html, css and javascript - this is all of the frontend code that needs to be on your production environment - no need to deploy any of the source files. All you need to do is serve those static files from any server. This could be done by your flask, or just any apache, nginx etc.

But will this work when deployed to Heroku?

That will be very tricky to setup. It's one of the reasons why I would not deploy front- and backend on the same (virtual) server.

modules from the Vue app specified by package.json are not installed

If you deploy your bundled frontend instead of the source code this wont be an issue anymore. I still recommend serving the frontend from a different environment.

answered Nov 3, 2018 at 19:06

Philip Feldmann

8,5037 gold badges47 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1713336 Over a year ago

Sounds good. So it seems that the solution is to bundle the frontend using npm run build which produces a folder of static files called dist and have the Flask application serve dist, correct? At this point Heroku will run the Flask application correctly while serving up the correct files from the bundled frontend. Please correct me if this is false or if you would envision a better solution! Could you also explain what you mean by "serving the frontend from a different environment" as an alternative? Thank you for the help.

Philip Feldmann Over a year ago

The files that are bundled by run serve are meant for production, yes. The decision where to serve them from depends though. If you are building a single page application with client-side routing you probably don't want your flask app to serve it, at least if your backend really is a rest api, because the environment that serves the frontend in that case will need to remap all incoming requests to a single route, as seen here: router.vuejs.org/guide/essentials/…, which would mess up your REST APIs route.

Collectives™ on Stack Overflow

Heroku deployment confusion: Vue.js frontend with Flask backend

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related