Frameworks y proyectos existentes
koru empaqueta archivos estáticos: un index.html y los scripts, estilos e imágenes que usa. Sirve cualquier framework que pueda exportar un sitio estático. Apunta webDir a la carpeta de salida y koru hace el resto.
En esta página
Empieza desde una plantilla de framework
El camino más rápido es una plantilla basada en Vite. Todas necesitan Node.js:
koru create mi-app --template react
cd mi-app
npm install
npm run dev # Vite con recarga en caliente
npm run android # vite build y después koru run
npm run apk # vite build y después un APK release firmado
--template |
Obtienes |
|---|---|
react |
Vite con React 18 y JSX. |
vue |
Vite con componentes de un solo archivo de Vue 3. |
svelte |
Vite con Svelte 5. |
vanilla-ts |
Vite con TypeScript estricto y sin framework. |
vite |
Una app Vite en JavaScript simple, para cualquier otro caso. |
Cada plantilla trae un koru.json con "webDir": "dist" y una copia del módulo JavaScript de koru en src/koru/, para que los imports funcionen tanto en el servidor de desarrollo de Vite como en las builds de producción. Para Solid u otro framework, parte de vite y añádelo como de costumbre, por ejemplo npm install solid-js vite-plugin-solid y un vite.config.js.
Estas plantillas se compilaron con npm run build, koru build y koru verify (y tsc --noEmit en vanilla-ts). No se han instalado ni ejecutado en Android, así que pruébala en un dispositivo antes de construir sobre ella.
Añade koru a un proyecto existente
Desde la raíz de tu proyecto, crea ahí mismo un koru.json y una clave de firma:
cd tu-app-web
koru init
init también añade .koru/ a tu .gitignore. Después edita koru.json: define name, elige tu propio appId y apunta webDir a la salida de tu build. Borra la carpeta de ejemplo www/ que creó init si no la usas.
{
"name": "Mi App",
"appId": "com.example.miapp",
"webDir": "dist",
"spa": true
}
Estos son los campos que debes cambiar; conserva el resto de los que escribió init. Cada build queda en dos pasos:
npm run build
koru run # o bien: koru build --release --output mi-app.apk
Carpetas de salida por framework
| Framework | Build estática | webDir |
¿Rutas en el cliente? |
|---|---|---|---|
| Vite (React, Vue, Svelte, Solid) | vite build |
dist |
"spa": true si usas un router |
| Create React App | react-scripts build |
build |
"spa": true con React Router |
| Angular | ng build |
dist/<proyecto>/browser |
"spa": true |
| Next.js | output: "export" en next.config.js y después next build |
out |
Desactivado; las páginas se exportan como HTML |
| Nuxt | nuxi generate |
.output/public |
Desactivado para rutas generadas |
| SvelteKit | @sveltejs/adapter-static y después vite build |
build |
Usa fallback: "index.html" del adaptador y "spa": true |
| Astro | astro build (salida estática, la predeterminada) |
dist |
Desactivado |
El renderizado en servidor, las rutas de API y los servicios de optimización de imágenes no se ejecutan dentro del APK. Usa su exportación estática y llama a tu servidor como una API HTTPS.
Rutas y paths
Con "spa": true, cualquier ruta sin extensión (como /settings/profile) devuelve index.html, para que tu router elija la pantalla. Los archivos con extensión que no existen, como /assets/app.js, siguen devolviendo 404, para que una errata no cargue HTML como JavaScript.
Los archivos se sirven desde la raíz de https://app.koru.invalid/. Compila con una ruta base / (la predeterminada en casi todas las herramientas). Si tu sitio está configurado para una subruta como /mi-repo/, vuelve a poner base/publicPath en / para el APK.
Usa la API JavaScript con un bundler
Los bundlers resuelven los imports al compilar, así que no pueden importar /__koru/core.mjs, que solo existe dentro de la app. Escribe una copia del módulo en tus fuentes:
koru js src/koru # tras actualizar koru: koru js src/koru --force
Después, import { device, storage } from "./koru/core.mjs". En el APK usa el puente nativo; en un navegador o con vite dev, las implementaciones web. El archivo core.d.mts que lo acompaña da los tipos a TypeScript y a los editores. En apps sin bundler, importa /__koru/core.mjs directamente, como hace la plantilla basic.
Llama a tu API
El origen de tu app es https://app.koru.invalid. Para llamar a un servicio HTTPS, añade el permiso de Internet y permite ese origen en la configuración CORS de tu servidor:
"permissions": ["android.permission.INTERNET"]
Empaqueta tus dependencias JavaScript: la política de seguridad de contenido de la app bloquea scripts e iframes remotos. Las peticiones http:// sin cifrar también se bloquean.
Conserva la recarga en caliente mientras trabajas
Ejecuta el servidor de desarrollo de tu framework y pon koru dev delante para tener la API de koru con los datos reales de tu app y la comprobación de plugins:
npm run dev
koru dev --proxy http://localhost:5173
Consulta Desarrolla con recarga en vivo. Después, ejecuta en un dispositivo y distribuye tu app.