Flask template with nodejs and webpack

Question

I have no experience with the "new" front-end technologies. I have always devoted more to the back.

Question: You can work with flask (Jinja) templates using Node + webpack to develop the front? Because flask templates make use of the resources Jinja which make it possible to embed python code inside html files (http://flask.palletsprojects.com/en/1.1.x/tutorial/templates/#the-base-layout).

Currently I have used Node+webpack only for javascript and css, for html I have done separately, ie creating flask templates in the conventional way. I wanted to develop the whole front in Ode but without having to give up using the flask templates. I saw that there is a Loader for html in the webpack, but I don’t know how it will treat html files that contain embedded python code.

I also have doubts about how this webpack html download works, like, what does it generate at the end of the build? Does it put everything in a JS file? Because if so, then it’s a problem, because views (in the flask architecture) need to point to an html file, that is, when calling a given url, flask returns the proper html file (informed at programming time), which will be rendered in the browser.

Answer 1

No, however you can develop the backend in the format of a json or graphql API, and the frontend consumes this API with Axios, and when doing the integration ensure that the frontend build separates the Assets to the Static folder and the pages to the templates folder.

With this just do the render_template of the page index on the route you want.

If you want an example using flask + Vue https://raccoon.ninja/pt/dev-pt/criando-aplicacao-vuejs-usando-flask-como-servidor-web-python-javascript/