Lanzamos Project IDX, nuestra nueva experiencia de desarrollo basada en navegador, que permite simplificar el caos de crear apps completas y agilizar el proceso de desarrollo de principio a fin, o de backend a frontend.
En nuestra experiencia, la mayoría de las aplicaciones web se crean con al menos dos capas diferentes: una capa de frontend (IU) y una capa de backend. Cuando piensas en el tipo de app que crearías en un espacio de trabajo de desarrollador basado en navegador, es posible que no comiences de inmediato con apps full-stack con backends robustos y completamente funcionales. Desarrollar un backend en un entorno basado en la Web puede convertirse rápidamente en una tarea tortuosa y costosa. Entre las diferentes configuraciones de autenticación para los entornos de desarrollo y producción, la comunicación segura entre el backend y el frontend, y la complejidad de configurar un entorno de prueba totalmente autónomo (hermético), pueden acumular los costos e inconvenientes.
Sabemos que a muchos desarrolladores les gustaría probar ya IDX, pero mientras tanto, queríamos compartir esta publicación sobre el desarrollo completo en Project IDX. Desentrañaremos algunas de las situaciones complejas en las que podrías encontrarte cuando crees tus capas de frontend y backend en un espacio de trabajo basado en la Web (autenticación de desarrollador, comunicación frontend-backend y pruebas herméticas), y te contaremos cómo intentamos que todo sea un poco más sencillo. Y, por supuesto, queremos conocer tu opinión acerca de qué más deberíamos crear para que el desarrollo full-stack te resulte más fácil.
En primer lugar, simplificamos el proceso de habilitación de la comunicación del frontend de tus apps con sus servicios de backend en la VM, lo que facilita la vista previa de tu app full-stack en el navegador.
Los espacios de trabajo de IDX se basan en Google Cloud Workstations y acceden de forma segura a los servicios conectados a través de cuentas de servicio. La cuenta de servicio única de cada espacio de trabajo admite entornos de vista previa autenticados y sin interrupciones para el frontend de tus apps. Por lo tanto, cuando usas Project IDX, las vistas previas de las apps se integran directamente en tu espacio de trabajo, y no es necesario que configures una ruta de autenticación diferente para obtener una vista previa de la IU. Actualmente, IDX solo admite vistas previas web, pero las vistas previas de apps para Android y iOS llegarán pronto a los espacios de trabajo de IDX cerca de ti.
Por otra parte, si tu configuración requiere comunicación con la API de backend, en desarrollo en IDX, desde fuera de la vista previa del navegador, establecimos algunos mecanismos para proporcionar acceso temporal a los puertos que alojan estos backends de la API.
Si usas un marco de trabajo que sirve tanto a la capa de backend como a la de frontend desde el mismo puerto, puedes pasar la marca $PORT para usar una variable de entorno de PORT personalizada en el archivo de configuración de tu espacio de trabajo (con tecnología de Nix y almacenada directamente en tu espacio de trabajo). Esto es parte del flujo de configuración básico de Project IDX, por lo que no tienes que hacer nada particularmente especial (además de configurar la variable en tu archivo de configuración). Este es un ejemplo de un archivo de configuración basado en Nix:
{ pkgs, ... }: {
# NOTE: This is an excerpt of a complete Nix configuration example.
# Enable previews and customize configuration
idx.previews = {
enable = true;
previews = [
{
command = [
"npm"
"run"
"start"
"--"
"--port"
"$PORT"
"--host"
"0.0.0.0"
"--disable-host-check"
];
manager = "web";
id = "web";
}
];
};
Sin embargo, si tu servidor de backend se ejecuta en un puerto diferente al de tu servidor de IU, deberás implementar una estrategia distinta. Una opción es hacer que el proxy de frontend sea el de backend, como lo harías en el caso de las opciones de servidor personalizadas de Vite.
Otra forma de establecer comunicación entre puertos es configurar tu código para que el javascript que se ejecuta en la IU pueda comunicarse con el servidor de backend mediante solicitudes AJAX.
Comencemos con un código de muestra que incluya tanto un backend como un frontend. Este es un servidor de backend escrito en Express.js:
import express from "express";
import cors from "cors";
const app= express();
app.use(cors());
app.get("/", (req, res) => {
res.send("Hello World");
});
app.listen(6000, () => {
console.log("Server is running on port 6000");
})
La línea en negrita del ejemplo, app.use(cors());, configura los encabezados CORS. La configuración puede ser diferente según el idioma/marco de trabajo que elegiste, pero el backend debe devolver estos encabezados, tanto si estás desarrollando de forma local o en IDX.
Cuando ejecutas el servidor en el terminal de IDX, los puertos de backend aparecen en el panel IDX. Cada puerto en el que se ejecuta tu servidor se asigna automáticamente a una URL a la que puedes llamar.
Ahora, escribamos un código de cliente para hacer una llamada AJAX a este servidor.
// This URL is copied from the side panel showing the backend ports view
const WORKSPACE_URL = "https://6000-monospace-ksat-web-prod-79679-1677177068249.cluster-lknrrkkitbcdsvoir6wqg4mwt6.cloudworkstations.dev/";
async function get(url) {
const response = await fetch(url, {
credentials: 'include',
});
console.log(response.text());
}
// Call the backend
get(WORKSPACE_URL);
También nos aseguramos de que la llamada fetch() incluya credenciales. Las URL de IDX están autenticadas, por lo que debemos incluir credenciales. De esta manera, la llamada AJAX incluye las cookies para la autenticación en nuestros servidores.
Si usas XMLHttpRequest en lugar de fetch, puedes configurar la propiedad "withCredentials" de la siguiente manera:
const xhr = new XMLHttpRequest();
xhr.open("GET", WORKSPACE_URL, true);
xhr.withCredentials = true;
xhr.send(null);
Tu código puede ser diferente al de nuestros ejemplos según la biblioteca de cliente que utilices para realizar las llamadas AJAX. Si este es el caso, revisa la documentación de tu biblioteca de cliente específica sobre cómo realizar una solicitud con credenciales. Solo debes asegurarte de hacer una solicitud con credenciales.
Es posible que, en algunos casos, quieras acceder a tu app en Project IDX sin iniciar sesión en tu cuenta de Google, o desde un entorno en el que no puedas iniciar sesión. Por ejemplo, si deseas acceder a una API que estás desarrollando en IDX con Postman o cURL desde la línea de comandos de tus computadoras portátiles personales. Puedes hacerlo usando un token de acceso temporal generado por Project IDX.
Una vez que tengas un servidor ejecutándose en Project IDX, puedes abrir el menú de comandos para generar un token de acceso. Este token de acceso es un token de corta duración que te permite acceder temporalmente a tu estación de trabajo.
Es de vital importancia tener en cuenta que este token de acceso proporciona acceso a todo tu espacio de trabajo IDX, incluida, entre otras áreas, tu app en vista previa, por lo que no debes compartirlo con cualquier persona. Te recomendamos que solo lo uses para realizar pruebas.
Cuando ejecutas este comando desde IDX, el token de acceso aparece en una ventana de diálogo. Cópialo y utilízalo para realizar una solicitud cURL a un servicio que se ejecute en tu estación de trabajo, como en este ejemplo:
$ export ACCESS_TOKEN=myaccesstoken
$ curl -H "Authorization: Bearer $ACCESS_TOKEN" https://6000-monospace-ksat-web-prod-79679-1677177068249.cluster-lknrrkkitbcdsvoir6wqg4mwt6.cloudworkstations.dev/
Hello world
¡Ahora puedes ejecutar pruebas desde un entorno de servidor autenticado!
Como ya lo destacamos, puedes probar el frontend y el backend de tu app en un entorno totalmente autónomo, autenticado y seguro utilizando IDX. También puedes ejecutar emuladores locales en tu entorno de desarrollo basado en la Web para probar los servicios de backend de tu app.
Por ejemplo, puedes ejecutar Firebase Local Emulator Suite directamente desde tu espacio de trabajo de IDX. Para instalar el paquete de emuladores, debes ejecutar los emuladores de inicio de Firebase desde la pestaña Terminal de IDX y seguir los pasos para configurar cuáles emuladores deseas usar en qué puertos.
Una vez que los hayas instalado, puedes configurarlos y usarlos de la misma manera que lo harías en un entorno de desarrollo local desde el terminal de IDX.
Como puedes ver, Project IDX puede satisfacer muchas de tus necesidades de desarrollo full-stack, desde el frontend hasta el backend y todos los emuladores intermedios.
Si ya usas Project IDX, etiquétanos en las redes sociales con #projectidx para contarnos cómo Project IDX te ayudó en tu desarrollo full-stack. O visita idx.dev para registrarte en la lista de espera.
Serie de videos Compila con Google AI, temporada 2: más patrones de IA
Google I/O 2024: What’s new in Android Development Tools
Everything you need to know about Google Wallet
Ajusta Gemini Pro en Google AI Studio o con la API de Gemini
Welcome India to the Google Wallet API
How Firebase Genkit helped add AI to our Compass app