La portada es parte de lo que podemos ver en N|Sight, un proyecto de NodeSource

Si te perdiste el primer artículo de "Node Para Principiantes" haz click aquí

Tras nuestra instalación de Node.JS y haber practicado algo de JavaScript en nuestro REPL procedamos a cargar estáticos, es decir archivos HTML, CSS y/o JS(Del cliente) mediante Node.

Para este ejemplo usaremos un index.html muy sencillo que hice para la ocasión:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mi Primera App En Node</title>
  </head>
  <body>
    <center>
      <h1>Estoy sirviendo estáticos con Node C:</h1>
    </center>
  </body>
</html>

Trabajaremos en EcmaScript 6 el último estándar de JavaScript, les dejaré un enlace al final del post por si quieren aprender más sobre él.

EcmaScript 6 no está apto para producción aún. Es necesario compilar los archivos a EcmaScript 5 usando Babel. Aprende más aquí.

Usaremos el módulo fs que consiste en un módulo nativo de Node para operar con archivos y usaremos su función de lectura, obtendremos el archivo como un buffer, que pasaremos a utf-8 y el módulo nativo de Node http con el que crearemos un servidor web que recibirá nuestro archivo html y lo responderá cuando solicitemos cargar la ruta principal de nuestra aplicación.

1. Importamos los módulos necesarios para usarlos en nuestro archivo

Como mencioné anteshttp y fs son módulos nativos de Node, lo que significa que no tendremos que instalar nada, ya que viene por defecto.

Importamos los módulos de esta manera:

import http from 'http'
import fs from 'fs'

2. Definimos variables globales

En este caso, dejaremos aqui definido el puerto, le diremos que si se especifica al procesar el archivo que use ese, de lo contrario, que use el 3000:

const port = process.env.PORT || 3000

3. Definimos la función utilitaria que lee cualquier tipo de archivo usado fs

Usando la documentación oficial de Node, entendemos que debemos de leer un archivo usando la función readFile y entre sus parámetros, le pasamos 'utf-8' para que nos de el archivo ya en ese formato, es decir, tal como lo hemos escrito y no como un buffer:

function readStatic(file, callback) {
  fs.readFile('./' + file, 'utf-8', (err, data) => {
    if(err) {
      return callback(err);
    }
    callback(err, data)
  })
}

4. Declaramos la función que inicia el servidor usando http, ejecutamos la función utilitaria para el archivo index.html y se lo enviamos a la respuesta

Inciamos el servidor con la función createServer y le decimos que cada vez que le llegue una solicitud lea el index y lo devuelva al navegador:

var server = http.createServer((req, res) => {
  readStatic('index.html', (err, content) => {
    res.end(content);
  })
})

5. Colocamos la aplicación en el puerto 3000 y avisamos de ello

Mandamos el servidor a funcionar en el puerto especificado en el paso 2 y notificamos por consola de que todo fue bien:

server.listen(port, () => {
  console.log(`Servidor escuchando en el puerto ${port}`);
})

Eso fue todo! Si tienes alguna duda no dudes en [dedicarme un tweet](http://twitter.com/home?status=@MiguhRuiz, Quería comentarte de...). Aqui tienes también enlaces relacionados con el post para ayudarte, documentación, los archivos completos...

Enlaces Relacionados

Documentación de Node.JS

Node.JS Docs: File Sytem(FS)

Node.JS Docs: HTTP

Gist: Archivos usados en este turoial(index.html, archivo de Node en ES6 y archivo compilado a ES5)