/mi-proyecto ├── backend │ ├── composer.json │ ├── index.php │ └── miModulo.mjs └── frontend ├── package.json └── app.mjs codigo: 1. Archivo composer.json (Backend) Este archivo se encuentra en la carpeta backend y define las dependencias de PHP que necesitas. Aquí hay un ejemplo básico: { "require": { "monolog/monolog": "^2.0" } } 2. Archivo index.php (Backend) Este archivo es el punto de entrada de tu aplicación PHP. Aquí puedes manejar las solicitudes y enviar respuestas. Un ejemplo simple podría ser: <?php // backend/index.php require 'vendor/autoload.php'; // Asegúrate de que el autoload de Composer esté incluido use Monolog\Logger; use Monolog\Handler\StreamHandler; // Crear un logger $log = new Logger('mi_proyecto'); $log->pushHandler(new StreamHandler('app.log', Logger::WARNING)); // Registrar un mensaje $log->warning('Esto es un mensaje de advertencia'); // Enviar una respuesta simple header('Content-Type: application/json'); echo json_encode(['message' => 'Hola desde el backend!']); 3. Archivo miModulo.mjs (Backend) Este archivo contiene un módulo que puedes importar en otros archivos. Aquí hay un ejemplo de cómo podría verse: // backend/miModulo.mjs export function saludar(nombre) { return `Hola, ${nombre}!`; } 4. Archivo package.json (Frontend) Este archivo se encuentra en la carpeta frontend y define las dependencias de JavaScript que necesitas. Aquí hay un ejemplo básico: { "name": "mi-proyecto-frontend", "version": "1.0.0", "dependencies": { "axios": "^0.21.1" }, "scripts": { "start": "node app.mjs" } } 5. Archivo app.mjs (Frontend) Este archivo contiene el código JavaScript que se ejecutará en el lado del cliente. Aquí hay un ejemplo que utiliza axios para hacer una solicitud al backend y también importa la función saludar del módulo: // frontend/app.mjs import { saludar } from '../backend/miModulo.mjs'; // Importar la función del módulo const nombre = 'Mundo'; console.log(saludar(nombre)); // Salida: Hola, Mundo! // Hacer una solicitud al backend axios.get('http://localhost/backend/index.php') .then(response => { console.log('Respuesta del backend:', response.data); }) .catch(error => { console.error('Error al hacer la solicitud:', error); }); Conclusión Este ejemplo proporciona una base para un proyecto que combina un backend en PHP y un frontend en JavaScript utilizando módulos ES. Puedes expandirlo según tus necesidades, añadiendo más funcionalidades y dependencias según sea necesario. Asegúrate de tener configurado un servidor para el backend y de ejecutar el script del frontend para ver la interacción entre ambos.
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter