Cómo conectar los siguientes js como frontend y codeignitor como backend, si residen en el mismo servidor

Soy bastante nuevo para reactr.

Estoy tratando de integrar Next.js con mi ya existente backend CodeIgniter.

• Next.js y CodeIgniter requieren que sus propios servidores (puertos) funcionen.

Entonces, ¿cómo debo configurarlo?

• Next.js para llamar a una API en un puerto diferente.

Digamos CodeIgniter en el puerto 80 y Next.js en 3000

Con ReactJS (create-react-app) puedo conectarlos redireccionando a index.html. No tan seguro de cómo seguir con Next.

Pregunta hecha hace 3 años, 4 meses, 28 días - Por csharpsorcerer

2 Respuestas:

• Para conectar Next.js (frontend) con CodeIgniter (backend) en el mismo servidor pero con puertos diferentes, puedes seguir los siguientes pasos:

  • Configurar CodeIgniter en el puerto 80:

  - Asegúrate de que tu backend CodeIgniter está configurado para escuchar en el puerto 80.

  • Configurar Next.js en el puerto 3000:

  - Asegúrate de que tu frontend Next.js está configurado para escuchar en el puerto 3000.

  • Configurar Next.js para llamar a la API de CodeIgniter:

  - En tu código de Next.js, puedes hacer llamadas a la API de CodeIgniter utilizando Axios u otra herramienta de solicitud HTTP. Por ejemplo:

  jsx
     import axios from 'axios';
  
  
  async function fetchData() {
       const response = await axios.get('http://localhost:80/turutaapi'); // Reemplaza 'turutaapi' con la ruta de tu API en CodeIgniter
       console.log(response.data);
     }
  
  fetchData();
     

  • Solucionar problemas de CORS (Cross-Origin Resource Sharing):

  - Es posible que debas configurar tu backend CodeIgniter para permitir solicitudes CORS desde el frontend Next.js en un puerto diferente. Puedes hacerlo configurando las cabeceras adecuadas en las respuestas de CodeIgniter.

  Con estos pasos, deberías poder conectar tu frontend Next.js con tu backend CodeIgniter en el mismo servidor pero en puertos diferentes. Asegúrate de configurar correctamente las rutas de la API y de manejar cualquier problema relacionado con CORS que pueda surgir.

  Respondida el Dec 19, 2020 a las 04:07 - por Gpt

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---

• Configurar Next.js para llamar a una API en un puerto diferente

  Para configurar Next.js para que llame a una API en un puerto diferente, como CodeIgniter en el puerto 80, sigue estos pasos:

  • Configura un proxy: En el archivo `next.config.js` de Next.js, agrega un proxy para la API de CodeIgniter:

  
  module.exports = {
    async rewrites() {
      return [
        {
          source: '/api/:path',
          destination: 'http://localhost:80/api/:path',
        },
      ];
    },
  };
  

  • Llama a la API usando el proxy: En tus componentes de Next.js, puedes llamar a la API de CodeIgniter usando el prefijo `/api` como ruta. Por ejemplo:

  
  import axios from 'axios';
  
  const fetchApiData = async () => {
    const response = await axios.get('/api/users');
    return response.data;
  };
  

  Consideraciones adicionales

  Asegúrate de que el servidor de CodeIgniter esté configurado para aceptar solicitudes CORS desde el servidor de Next.js. Si estás utilizando el modo de desarrollo de Next.js (con npm run dev), el proxy se configurará automáticamente. Para la producción, debes configurar el proxy manualmente según las instrucciones anteriores.

  Redireccionamiento a index.html

  Next.js no utiliza index.html como página de inicio. En su lugar, utiliza un sistema de enrutamiento basado en componentes. Por lo tanto, no es necesario utilizar un redireccionamiento a index.html.

  Ejemplo completo

  Aquí tienes un ejemplo completo de cómo conectar Next.js con CodeIgniter:

  Archivo next.config.js:

  
  module.exports = {
    async rewrites() {
      return [
        {
          source: '/api/:path',
          destination: 'http://localhost:80/api/:path',
        },
      ];
    },
  };
  

  Componente de Next.js:

  
  import axios from 'axios';
  
  const MyComponent = () => {
    const fetchApiData = async () => {
      const response = await axios.get('/api/users');
      return response.data;
    };
  
    return (
      
  
        
  API data: {fetchApiData()}
      
    );
  };
  
  export default MyComponent;
  

  Ruta de CodeIgniter:*

  php
  // Controlador API
  public function users()
  {
      $this->output
             
  >set_content_type('application/json')
             
  >set_output(json_encode(['users' => ['John', 'Jane', 'Bob']]));
  }
  

  Con esta configuración, podrás acceder a la API de CodeIgniter en el puerto 80 desde tu aplicación Next.js en el puerto 3000 mediante la ruta /api.

  Respondida el Dec 19, 2020 a las 04:13 - por Gemini

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---