Como se integra el front con el backend? (angular - flask)

V

A ver si alguien es tan amable de explicarme como funciona esto porque ando muy perdido.

Creo el backend en flask, con un endpoint de prueba. funciona correctamente . ponemos como respuesta que renderice el template 'index.html'

creamos carpeta de static y de templates.

creamos proyecto angular, y que funcione el hola mundo. ng build, cogemos los ficheros de dist, (los JS) y los metemos en la carpeta static, y el index.html en el templates. Modificamos el index.html, para actualizar las rutas de los js, añadiendo la ruta de /static/main.js por ejemplo.

lanzamos el servidor Flask, no funciona.

No entiendo que es lo que hago mal, alguien me puede ayudar?

Agradecería una aclaración de como se monta todo esto, todos los tutoriales y videos que veo, siempre crean APIS en el back, y el front haces las peticiones al back, pero no explican como integrar todo, ni como hacer el deploy de la aplicación conjunta (se vuelca en produccion el dist del front o del back?) no se, es un lio.

B

Hay un montón de formas de hacerlo.

La manera más...generica o cómoda de verlo es, el front pinta todo, es decir, el front es el que tiene su html y todo, y el back, solo devuelve respuestas como un json, una true, un false cosas básicas.

Es decir, sin meterme en cómo funcionan los lenguajes que dices, angular, va por un lado, con su index.html y todo, y el back, en otro lado, en otra carpeta, va por otro.

Imaginemos un ejemplo estúpido, un selector de países. Suponte que tenemos una base de datos con sus países.

Haces en el front un selector. Pon un par de variables de angular a piñón inicialmente para ver que el selector funcion.

Una vez haces eso, en el proyecto de back, necesitas hacer una URL, que cuando la llames, devuelva un Json (Es lo más cómodo) dentro de el, es un array con países, igual que antes, puedes hacerlo tonto, no necesitas que lea de inicio la base de datos.

Una vez tienes ambas por separado, ya puedes irte al front, y decirle que llame a esa URL que hemos creado y se traiga los países.

Pero son proyectos distintos, con urls distintas/puertos distintos.

Ranthas

Te estás confundiendo de lado a lado. Vamos por partes:

Tienes una aplicacion de front (Angular) y otra de back (Flask). Son dos aplicaciones distintas con dos despligues distintos. Todo eso que dices de meter los js en la carpeta static, los html en la de templates, etc.....eso es si usases alguna tecnologia de renderizado en el servidor, como por ejemplo, JSP en el caso de Java.

Tu servidor (Flask) no sirve templates html, sirve JSON que luego tu aplicacion Angular recoge y usa para rellenar sus templates. En ninguno de tus endpoints tienes el típico

return "index";

Sino algo del estilo

return object;

Aquí no tienes nada de eso, lo que tienes que hacer es buildear ambas aplicaciones, POR SEPARADO, y desplegarlas, POR SEPARADO. Por ejemplo:

App front -> corre en localhost:4200
App back -> corre en localhost:8080

Y luego, tu front hara peticiones al back, para recoger esos JSON/XML o lo que sea para rellenar los templates.

Edito para decirte que si realmente tu back en Flask lo que hace es renderizar paginas y servirlas, entonces el problema de concepto que tienes es aún más grave, ya Angular no es la teconología correcta a usar en este escenario.

1
V

Vale varios puntos:

1º Muchas gracias por la respuestas, asi veo las cosas mas claras.
2º Creo que Flask si hace eso, por lo que veo en ejemplos y en la documentación oficial, renderizado de templates. Como dices, quería conseguir algo como los JSPs que es lo que conozco, donde el backend esta integrado con el front.
3º Entiendo que si cada aplicación, va por separado, con su despliegue en servidores distintos, o como se haga el despliegue.. La comunicación entre ellos seria siempre por http y respuesta en JSON con lo que el backend siempre seria una API no?

Yo lo que quería es usar el front solo para mostrar los datos, pero la lógica y todo el trabajo la haga el back. No hacer una API que devuelva 4 datos en JSON, si no lo que seria una aplicación de escritorio clásica , o como hace java con struts, URL tiene asignado una clase, se hace la lógica, se guardan objetos en sesion, se muestran en el JSP, no hay JSON, por eso me lia todo este tema.
4º Como se hace con Node y Angular?

2 respuestas
Ranthas

#4 Si lo que quieres es renderizado de las páginas en el servidor, Angular no te vale.

Estás buscando algo como Mustache: https://mustache.github.io/

1 respuesta
B

#4

Yo lo que quería es usar el front solo para mostrar los datos, pero la lógica y todo el trabajo la haga el back

Y eso es un front y un Back.

Ahora mismo solo te hemos dicho un get estándar. Pero lo misml que una llamada te dice, dame la lista de países, puedes hacer otra la cual recibe un del front Json y esta URL sea con estos datos, guárdame este usuario y mándale un email diciendo que gracias.

El front, es gilipollas, no hace nada importante, solo pinta y devuelve datos. Lo de Json es para que sea lo más cómodo posible.

Front pinta y da una inferfaz al usuario, ese front no hace nada, no se conecta a la base de datos ni nada, este cuando quiere hacer algo le manda la información necesaria al back y este se encarga de hacer cosas y luego decirle "Eh, ya he hecho lo tuyo, dile al usuario que todo a ido bien"

Si abres cualquiera web, mediavida por ejemplo, y le das a F12, redes/network, verás que cuando le das a Enviar, hace una llamada a una URL que dudo mucho que seguramente sea algo en plan back.mediavida.com o mediavida.com/back

Peleate luego con el renderizado, eso es un mundo, primero, lo más básico que debes hacer, es entender el modelo vista controlador. Porque puedes hacer un html básico y luego rellenarlo con llamadas del front al back, otros prefieren que el back devuelva el html renderizado y este html tenga el js ya metido.

Pero da igual de donde saques el html y el js que el usuario recibe, al final si este usuario quiere hacer un cambio, tendrá que hacer una llamada al back, y este back realizar el cambio.

Siento si me repito mucho o me explico mal, es que estoy desde el móvil

1 respuesta
V

#5 #6 Pues vi algunos ejemplos con angular.

Por lo demás, todo claro, voy ver si consigo comunicar las 2 aplicaciones, me imagino que con 2 terminales abiertas funcionara. Ya preguntare luego por despliegues en alguna web, Muchísimas gracias.

1 respuesta
B

#7 Ve siempre por partes, aunque parezca que es algo mega obvio, nada está hecho, y todo se puede complicar, asegura bien cada parte, cada concepto, y entonces podrás hacer lo que sea. Es el mejor consejo que recibirás en programación.

No te sientas idiota por preguntar, aunque el tutorial sea un solo paso, aunque sea fácil, si algo no te encaja, pregunta y ve a trozos, es mejor preguntar ahora 300 veces, a cagarla y que en 2 meses te des cuenta de que no entendías lo que hacías y ahora no puedes arreglarlo.

Ahora tener las dos terminales puede parecer un poco raro, pero ya irás aprendiendo, ya irás viendo que es lo que pasa trozo a trozo y podrás irte creando tu entorno de programación, aprenderás a hacer tus registros.

1 respuesta
V

#8 muchas gracias,

wdaoajw

Esta misma pregunta yo creo que le ha surgido a todo el mundo al empezar. Es un concepto sencillo aunque muy importante que mejor tener claro al 100%

B

En eso estoy un poco ahora atascado, se hacer backend, se hacer front, me toca saber comunicarlos bien y hacer la aplicación en sí

aren-pulid0

Ya te lo han dicho por arriba pero por resumir la tecnología frontend (Angular,React, Vue) se encarga de realizar peticiones HTTP ( get,post,put,delete) al servidor.
Normalmente el contenido de la petición tiene un cuerpo JSON.

Frontend -> Realiza petición HTTP a una ruta del servidor ( GET http:\mibackend.com\usuarios)
Backend -> Recibe la petición y devuelve un objeto con una lista de los usuarios de la aplicación.
Frontend -> Recibe la respuesta del servidor y lo pinta en pantalla (En este caso una lista de usuarios)

La parte del backend es en resumidas cuentas eso, aunque es mas complejo entra el tema de permisos, autorización y largo etcetera que irás viendo con el paso del tiempo.
Y desde mi punto de vista antes que flask tocaria Django que te lo da todo montado y si sigues el tutorial y con tiempo entenderás y conocerás mas conceptos.

Salu2 y suertee

B

Nunca he usado angular, pero si flask (https://gitlab.com/Tardo/twp). Por lo que he podido leer, angular trabaja con restfull y tienes el paquete flask-restfull (https://flask-restful.readthedocs.io/en/latest/quickstart.html#resourceful-routing) para crear recursos fácil, fácil y rico, rico.

En lo personal, no veo la necesidad de usar Angular con Flask. Optaría por NodeJS.

2 respuestas
Unrack

#13 Depende de lo que necesite puede hacer un simple flask + ssr con 3 templates y au

#1 Busca algún tutorial en Youtube tipo Angular+Django y seguro que te enseñan como el front hace peticiones a la API con los datos que necesiten

wdaoajw

#13 ufff, pero que mas da lo que haya al otro lado si el back responde un Json, como si se inventa el back pepe el panadero...

A efecto de entender el concepto es indiferente si es flask, NodeJS, dotnet core, java, etc

2 1 respuesta
JuAn4k4

tl;dr

front: servidor que sirve un JS y un index.html que componen un SPA en angular/reac/vue/...
back: API que devuelve datos (queries) y ejecuta commands (post/put/delete/...)

Si tu back renderiza páginas de respuesta para las peticiones de acciones, no es un SPA.

B

#15 ¿Cual es el concepto a aprender? ¿Que es frontend y que es backend? Para eso no te hace falta ni Angular... :/ no se porque le das más peso al frontend en la ecuación.

Flask viene con un engine de templates llamado Jinja2, para mi gusto, esto colisiona con lo que queremos hacer con Angular (Una app dinámica, generada desde cliente). Luego si solo es para JSON, flask añade capas para realizar tests y otras operaciones que tampoco va a usar...
La única ventaja real de Flask en este escenario es su "micro" servidor http incluido (no recomendable usarlo en producción) que te permite levantar la aplicación sin tener que usar apache, nginx, etc...

Que puedes usar lo que te de la gana para aprender como te de la gana.... pero backend y frontend son dos cosas distintas, no solo Angular. Así que no, obviamente no da igual que use para servir la información.

Si cogemos tu respuesta... un simple script en python compatible con WSGI le valdría y ya está.... repito, para mi gusto, no veo la necesidad de usar Flask.

V

Bueno a ver, respondiendo a todos.

La cosa era que no entendía muy bien como se estructura ahora mismo las aplicaciones web.

Mirando y preguntando, he visto que ahora todo se construye en plan API, y un front se comunica de esta forma con el back, lo que no entendia era como se hacia la seguridad o el acceso a paginas , si el html ya estaba en el cliente, y no te lo servia el back. Parece ser que se usa un token, que tiene que enviar siempre el cliente con cada petición, y si el back recibe el token incorrecto, pues no devuelve datos. Lo que no tengo muy claro, es como protege el cliente el contenido html, y demás, ya que está expuesto, pero bueno, ya lo veré.

El tema que veo ahora, es que es complicado saber en que framework web centrarse, veamos.

Empecé por Flask, porque me gusta python, funciona de lujo, y se configura fácil en despliegue, y python como lenguaje cada vez se solicita mas (recordar que el objetivo es hacer portfolio, si fuera para hacer cosas para mi, cogería lo mas divertido) . Pero resulta que es un microframework, y que no tiene todas las herramientas necesarias que si que tiene por ejemplo Django.
Me meto en Django, y me parece todo muy bonito, python, ORM, serializers, y demas. Pero la documentación no hay quien la entienda, y sigo sin poder desplegar un hola mundo en ningún sitio. Es desesperante. Luego todo el mundo dice que si se está muriendo que si tal.
Miro Node, que todo el mundo lo dice, me entero que no es Node, si no Express el framework. Consigo configurarlo y probar alguna cosilla, todo bien, no se como sera el despliegue en producción, pero me han dicho que es sencillo. Lo que veo es que es como Flask, que dependes de mas librerias para hacer algo... entonces... ¿por que no Flask?? Ademas, javascript es un asco (In my opinion)

Luego mirando en ofertas de trabajo y webs, veo que el framework mas usado (omitiendo PHP) es ASP.net, asi que otro actor mas en la batalla.

Resumiendo. No se si debería probar todos, centrarme en uno... o no se, vaya lio.

invoco a los expertos.

2 respuestas
B

.

aren-pulid0

#18 Si la comunicación entre SPA front frameworks (angular,react,vue) se realiza a través de llamadas asíncronas a API's.

El tema de la authenticación se realiza a través de librerías que ya estan implementadas normalmente en los frameworks.
También implementar el tuyo pero es un poco mas complicado.
Sobre cual elegir, yo te dije Django porque es el out of the box de los que conozco, como tu dices ya lo lleva prácticamente todo.Y sí la documentación de Django al principio abruma y parece un poco farragosa, pero cuando empiezas a conocer del tema... te das cuenta que es de las mejores que hay.

También tienes que entender que el proceso de aprendizaje de un framework de backend es mayor en comparación con uno de front, aunque una vez aprendes uno ya tienes los conceptos básicos para todos.
Si te decides por Django, hazte el tuto, hazte una pequeña app que sirve contenido html y luego te metes con Django Rest Framework que te permite realizar esa API que tu quieres.

En youtube hay tutoriales, pero si copias y pegas el código sin entederlo estas jodido...
Ve poquito a poco, hazte una vista que responda a una ruta -> localhost/index.html, por ejemplo trabjas un poquito con el motor de plantillas, un poco con el orm y te haces una CRUD de libros por ejemplo y ya te embarcas en el API, que es lo mismo pero devolviendo JSON.

Y si quieres usar flask es más rapido pero como dices vas a depender de más librerías de 3eros y tendras que aprender como funciona cada una e integrarlo con tu proyecto.

Buena suerte!!

Usuarios habituales