es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Desplegar la aplicación de React y la API de Express en Vercel.

28 May, 2023 Programación

Quiero implementar un proyecto que incluye una aplicación React como frontend (client/) y un backend API de Express (api/) en Vercel. Soy capaz de implementar el API, pero ¿cómo puedo implementar también el cliente?

Estructura de mi proyecto:

-api/
-package.json
-index.js
-client/
-package.json
-public/...
-src/...
-vercel.json

Mi vercel.json actual:

{
  "version": 2,
  "builds": [
    {
      "src": "./api/index.js",
      "use": "@vercel/node"
    },

// Esto es lo que intenté pero no funciona:

{
  "src": "./client/package.json",
  "use": "@vercel/static-build"
},

// Fin del código no funcional  

  ],
  "routes": [
    {
      "src": "api/.*",
      "dest": "api/index.js"
    },

// Esto es lo que intenté pero no funciona:

{
  "src": "client/build/static/.*",
  "dest": "static/.*"
},
{
  "src": "client/build/index.html",
  "dest": "index.html"
}
// Fin del código no funcional  

  ]
}
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para implementar tanto la aplicación React como el backend de la API Express en Vercel, es necesario actualizar el archivo vercel.json.

    En primer lugar, se puede eliminar la sección builds del archivo vercel.json y permitir que Vercel utilice la configuración de compilación especificada en cada archivo package.json de manera predeterminada.

    A continuación, se pueden agregar dos nuevas rutas al archivo vercel.json. La primera ruta debería redireccionar todas las solicitudes que coincidan con /api/* a su backend de API Express. La segunda ruta debería redireccionar todas las otras solicitudes a su aplicación React.

    Aquí está el archivo vercel.json actualizado:

    {
  "version": 2,
  "routes": [
    {
      "src": "/api/.*",
      "dest": "/api/index.js"
    },
    {
      "src": "/(.*)",
      "dest": "/client/build/$1"
    }
  ]
}

    Esto redireccionará todas las solicitudes que coincidan con /api/* a su backend de API Express y todas las demás solicitudes a su aplicación React.

Comments are closed.