Cómo crear un servidor web en tu proyecto vanilla javascript

Para crear un servidor web en tu proyecto vanilla Javascript, te recomiendo seguir los siguientes pasos:

1. Inicializa el proyecto.

Abre un terminal en la carpeta donde estás trabajando en tu proyecto y escribe el siguiente comando:

npm init -y

Este comando va a inicializar un nuevo proyecto y crear un archivo package.json con valores predeterminados:

{
  "name": "prueba",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Si deseas personalizar estos valores deberás escribir el comando sin el -y al final, es decir quedaría así: npm init

Nota: para poder ejecutar el comando npm, debes tener instalado node primero en tu computador. Si no lo tienes, o no estas seguro de cómo saber si lo tienes instalado, acá te explico instalarlo.

2. Istala el paquete serve de npm

Para hacer esto, en el terminal escribe el siguiente comando:

npm install --global serve

Para ver más detalles sobre el paquete serve en npm haz clic aquí

3. Configura un script para ejecutar el comando

Ve a tu archivo package.json y agrega la siguiente línea "start": "serve src/ -s" en el objeto scripts:

{
  "name": "prueba",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.html",  // La página que se va a mostrar
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "serve src/ -s" // La línea que tienes que agregar
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

También podrás ver que modificamos la línea donde se especifica desde dónde se va a lanzar la página. En el ejemplo el archivo principal está alojado en dentro de la carpeta SRC y tiene el nombre index.html (este archivo debe existir en tu proyecto)

Listo, con esto puedes ir a tu consola y ejecutar el servidor con el siguiente comando

npm start

Con esto se inicializará el servidor generalmente en el puerto 3000 si no se encuentra ocupado. Podrás ver el servidor funcionando si te sale algo parecido a la siguiente captura, en tu terminal:

Para acceder a la página, solamente tienes que ir a la dirección que te indica http://localhost:3000 si quieres verla de forma local o http://172.18.48.1:3000 si quieres vela dentro de tu red.

Y si te gustó este contenido y quieres saber más sobre desarrollo web, te recomiendo visitar mi canal de YouTube CodingTube 💻