Skip to main content

Frontend - Netlify + Render

En esta ocasión, vamos a conectar el frontend de nuestro proyecto monorepo con el backend. Para ello vamos a subir la carpeta ui a Netlify mientras que la carpeta backend a Render.

Backend Architecture

Netlify - Conectando la BBDD​

Este despliegue está orientado para el proyecto de bbdd o siguientes.

  1. Registra una cuenta o accede al servicio. Personalmente he elegido crearla con mi cuenta de Github.
  2. En el dashboard principal, en el botón de Add new site, selecciona la opción Import an existing project.
  3. Ahora vamos a tener que conectar Netlify con nuestro repositorio de GitHub, aquí podéis elegir dar acceso a todos los respositorios o elegir a cuáles de ellos puede tener acceso.
  4. En la siguiente página elegimos el proyecto que queremos desplegar.
  5. Este es el primer paso diferente, aquí seleccionaremos la rama, en nuestro caso main, el base directory que para nuestro proyecto monorepositorio será ui, build command, en este caso npm run build y el directorio resultante, que en este caso será ui/dist. 6 selection config
  6. Una vez pulsemos el botón de Deploy site Netlify accederá a nuestro repositorio, compilará el código y desplegará la web estática en su servicio de hosting.
  7. Esperamos unos minutos hasta que el proyecto esté desplegado.
  8. Ahora pulsaremos el botón de Domain Settings, y dentro de Custom Domains podremos cambiar el nombre del dominio de nuestro proyecto a lo que queramos pulsando el botón Options.
  9. Por último, vamos a añadir una variable de entorno para que nuestra webapp pueda contactar con nuestro backend, para ello dentro de Build & Deploy, navega hasta encontrar la opción de Environment Variables13 Env Variable
  10. Ahora vamos a añadir una nueva variable llamada REACT_APP_API_URI, y el valor va a ser la url que hayamos obtenido configurando render. 13 Coinfig
  11. Ya solo tenemos que forzar una nueva compilación para añadir la variable de entorno a nuestra webapp y que pueda conectarse con nuestro backend14 Redeploy

Ahora al inspeccionar las conexiones dentro de la sección de proyectos veremos que nuestra webapp conecta con render.

Project Deployed Proyecto conectado con Heroku