El script mkweb sirve para generar rápidamente, sin demasiadas complicaciones, la estructura de carpetas (scaffolding) de un proyecto HTML/CSS/Javascript base, con todo preparado para programar.

Características

• Empaquetador Javascript Vite. Ultrarápido, con live server integrado
• Linter Javascript ESLint preconfigurado con eslint-config-manzdev
• Linter CSS StyleLint preconfigurado con stylelint-config-manzdev
• Integración de gh-pages para despliegue automático en GitHub Pages
• 🆕 Flag opcional para crear videojuegos con Phaser
• 🆕 Flag opcional para crear aplicaciones web con Lit

Requisitos

• Linux, Mac o Windows con WSL
• NodeJS 18.3.0 o superior (comprueba con node --version)
• curl o wget instalado (comprueba con curl --version o wget --version)

Instalación

Para instalar el script, simplemente escribe desde una terminal:

sudo curl -s https://manz.dev/download/mkweb -o /usr/local/bin/mkweb
sudo chmod ugo+rxw /usr/local/bin/mkweb

Si tienes algún problema, puedes comentarlo en nuestro Discord.

Uso

Para utilizar el script, simplemente lo ejecutamos pasándole por parámetro el nombre de la carpeta del proyecto, que deberá coincidir con el nombre del repositorio. Utiliza preferentemente minúsculas y no uses espacios o signos de acentuación.

mkweb project-name
cd project-name
git remote add origin [email protected]:GITUSER/project-name.git
npm install
code .
npm run dev

• Para crear un proyecto de Phaser, escribe: mkweb project-name --phaser.
• Para crear un proyecto de Lit, escribe: mkweb project-name --lit.
• Aunque puedes usar npm, se recomienda usar pnpm, compatible y mucho más rápido.

Estructura

• La carpeta src/ incluye el código fuente del proyecto. En su interior:

• Un archivo HTML ( index.html ) con la página principal.
• Un archivo CSS ( index.css ) referenciado en el HTML anterior.
• Un archivo Javascript ( index.js ) referenciado en el HTML anterior.

• Una carpeta components/ que puede incluir WebComponents.
• Una carpeta assets/ que puede incluir estáticos (hasheados).

• Fuera de la carpeta src/, tendremos:

• Una carpeta dist/ creada tras un npm run build (lista para subir a producción).
• Una carpeta public/ con archivos estáticos similar a assets/, pero a diferencia de esta, sus archivos son copiados a dist/ manteniendo la estructura de carpetas y nombres de ficheros sin ser hasheados.