EsJS + Express

1. Crear proyecto Node.js:

npm

npm init -y

pnpm

pnpm init -y

yarn

yarn init -y

bun

bun init -y

• Estructura de carpetas recomendada:

  .
  ├── src
  │   ├── app.esjs
  │   └── otro-archivo.esjs
  ├── vite.config.js
  └── package.json

  • src/app.esjs: Archivo principal de la aplicación.
  • src/otro-archivo.esjs: Módulo EsJS.
  • vite.config.js: Archivo de configuración de Vite.

2. Instalar dependencias:

• Dependencias de desarrollo
  npm

  npm install vite vavite @es-js/vite-plugin-esjs --save-dev

  pnpm

  pnpm install vite vavite @es-js/vite-plugin-esjs --save-dev

  yarn

  yarn add vite vavite @es-js/vite-plugin-esjs --save-dev

  bun

  bun add vite vavite @es-js/vite-plugin-esjs --save-dev

• Dependencias de producción
  npm

  npm install express

  pnpm

  pnpm install express

  yarn

  yarn add express

  bun

  bun add express

3. Crear archivo vite.config.js con la siguiente configuración:

import { URL, fileURLToPath } from 'node:url'
import { defineConfig } from 'vite'
import EsJS from '@es-js/vite-plugin-esjs'
import { vavite } from "vavite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // https://github.com/es-js/esjs
    EsJS(),

    // https://github.com/cyco130/vavite
    vavite({
      serverEntry: './src/app.esjs',
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
    extensions: [
      '.js',
      '.json',
      '.jsx',
      '.mjs',
      '.ts',
      '.tsx',
      '.esjs',
    ],
  },
  build: {
    outDir: './compilado'
  },
  server: {
    port: 4500 // Acá puedes cambiar el puerto del servidor de desarrollo (opcional)
  }
})

4. Crear archivo src/app.esjs con el siguiente contenido:

importar express desde 'express'
importar httpDevServer desde 'vavite/http-dev-server'

const servidor = express()
mut puerto = process.env.PORT || 4500

servidor.use('/', (req, res) => {
  res.send('¡Hola, mundo hispano hablante!')
})

si (httpDevServer) {
  puerto = httpDevServer.address().port
  httpDevServer.on('request', servidor)
  consola.escribir(`Servidor corriendo en el puerto ${puerto}`)
}
sino {
  servidor.listen(puerto, () => {
    consola.escribir(`Servidor corriendo en el puerto ${puerto}`)
  })
}

5. Agregar las siguientes líneas al archivo package.json:

{
  "type": "module",
  "scripts": {
    "des": "vite",
    "prod": "vite build --ssr --mode=production",
    "prev": "vite preview"
  }
}

6. Ejecutar el servidor de desarrollo:

npm

npm run des

pnpm

pnpm des

yarn

yarn des

bun

bun run des

Navega a http://localhost:4500 para ver el resultado.