Connecting a python backend and vue.js frontend on Google App Engine

Question

I have an assignment, building a system on google app engine with python backend(not flask), and Vue.js front end. The system needs to load the vue.js app(some basic hello world app), on google app engine(google cloud SDK).

I've built the python & yaml side and loaded it to GAE and also built the vue.js side.. but i'm stuck a long time on how can i connect the parts so the python/yaml will load my app on loading the url..

Please Help, Thanks ahead either way! :)

Answer 1

Strictly speaking, your Python will not directly "load your app".

First, at the risk of unneeded explaining, there's the important concept of where code resides vs where code executes. Your VueJS code resides on the server in a static file but executes in the client / browser.

Q: How does it get from the server to the browser to execute?
A: The client must send a request to the server to provide it.

Q: What would cause the browser to send this request?
A: Instructions in other code sent to it, most probably a <script> tag in HTML.

So, the flow goes something like this (may vary for you depending on details not provided):

• Browser sends request to server (GAE) for HTML, such as the home page
• Server (GAE) responds with HTML
  • This HTML may be dynamically created by Python or may be a static file.
  • This HTML contains tags to instruct the browser to request more files: images, CSS, JS.
  • This HTML should contain a <script> tag to request your VueJS code.
• Browser receives the HTML and processes it, including the <script> tag for your VueJS code.
• Browser sends request to server for the VueJS code.
• Server (GAE) responds with the static file containing the VueJS code.
• Browser receives the file containing VueJS codes, runs it, and your VueJS is now loaded & running!
• As your VueJS runs, it may send AJAX requests to the server (GAE) to get data and/or more code.

Your VueJS code must reside in a static file on the server. To the server (Python), this static file is just a meaningless bag-of-bytes (if there's a syntax error in the code it won't be found until it executes client-side).

How do you get these statics files into GAE so they are available when the browser requests it? You probably already got this (for CSS, images), but just in case you don't, see this link: Server Static Files for details on setting this up.