¡Hola developer 👋🏻! Estos días he estado jugando con Astro y, como no podía ser de otra forma, me he creado la configuración de Dev Container oportuna para poder tener todo el entorno de desarrollo dentro de un contenedor, y así evitar tener que instalar o añadir más extensiones a mi Visual Studio Code 💙

Si no sabes de qué va esto de los Dev Containers puedes echarle un vistazo a este vídeo de mi canal de YouTube 📺

En este artículo te comparto cuál es la configuración que estoy utilizando cuando utilizo este framework para desarrollar sitios web.

{
	"name": "👩🏻‍🚀🚀 Astro Dev Environment",
	"image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
	"remoteUser": "node",
	"features": {
		"ghcr.io/jsburckhardt/devcontainer-features/uv:1": {},
		"ghcr.io/devcontainers/features/python:1": {
			"installTools": true,
			"version": "3.12"
		}
	},
	"postStartCommand": "pnpm install",
	"forwardPorts": [
		3000,
		5173
	],
	"customizations": {
		"vscode": {
			"extensions": [
				"astro-build.astro-vscode",
				"dbaeumer.vscode-eslint",
				"esbenp.prettier-vscode",
				"stylelint.vscode-stylelint"
			],
			"settings": {
				"terminal.integrated.defaultProfile.linux": "bash",
				"editor.formatOnSave": true,
				"files.exclude": {
					"**/node_modules": true
				}
			}
		}
	}
}

Vale, te lo explico en «humano» 🙃:

• Imagen base: parte de una imagen oficial de Microsoft con Node.js y TypeScript, usando como usuario por defecto node.
• Características adicionales:
  • Instala uv, un gestor de paquetes y entornos para Python.
  • Añade Python 3.12 junto con herramientas de desarrollo.
• Comando automático: ejecuta pnpm install cada vez que arranca el contenedor para tener todas las dependencias listas.
• Puertos configurados: abre el 3000 y el 5173, habituales en servidores de desarrollo de Astro. Además he modificado el comando asociado al script dev para que use –host y pueda acceder desde fuera del dev container sin problemas: "dev": "astro dev --host 0.0.0.0"
• Personalización de VS Code:
  • Extensiones preinstaladas: soporte para Astro, ESLint, Prettier y Stylelint.
  • Configuración lista para usar: terminal en Bash, formateo automático al guardar y exclusión de la carpeta node_modules.

En resumen, este devcontainer.json ofrece un entorno de desarrollo completo para Astro con Node, TypeScript y Python, dependencias instaladas automáticamente y un VS Code configurado para empezar a trabajar sin necesidad de pasos extra ✨

¡Espero que sirva 👋🏻!