Creemos nuestra primero servidor con Express

Hola y bienvenidos a lo que espero sea una serie de Posts sobre Javascript y todas sus herramientas, primer post de la guia “de novato a novato-experto”

Por qué?

Hace algunos días y aún sabiendo lo que me esperaba, comencé con la idea de salirme de todo el ecosistema de Meteor.js; framework con el cual he trabajado casi toda mi carrera como desarollador. Diciendo esto me gustaría de alguna forma documentar este proceso en una seria de mini-posts, que quizá puedan ser de ayuda para todos aquellos como yo que deseen conocer más de javascript y no encuentran el punto de inicio.

Que vamos a Crear?

En este primer post, vamos a crear una simple aplicación en node.js que muestre un mensaje diciendo “vaya esto fue muy fácil,” la repo la podemos encontrar acá.

Que Herramientas vamos a usar?

  1. NodeJS
  2. Npm
  3. Express
  4. Browserify

Sin más que decir, Comencemos!.

Lo primero que tenemos que hacer es posicionarnos en el directorio donde vamos a estar creando nuestros proyectos.

cd nombre/de/mi/carpeta
mkdir sample-1 # o el nombre que tu quieras
cd sample-1

Seguido de esto, vamos a inicializar nuestro proyecto node.

npm init — y

Esto debería generar un archivo llamado `package.json` con toda la información del nuevo proyecto.

Acto siguiente tenemos que instalar nuestras dependencias utilizando npm.

npm install express browserify —- save

Algo muy importante aquí es la opción--save , por qué?, Digamos que quieres subir tu código a Github, y otro desarollador intenta correr tu código, se encontrará con errores como cannot find module {moduleName} of undefined . Con la propiedad --save las dependencias son guardadas dentro del package.json y sólo es necesario correr npm install al momento de clonar el proyecto.

Teniendo nuestras dependencias listas podemos crear nuestro archivo server.js que será el encargado de correr el servidor.

Para esto escribimos en la consola:touch server.js . Abrimos el archivo que se acaba de crear y escribimos el siguiente código.

var express = require(‘express’);
var path = require(‘path’);
var app = express();
var PORT = 3000;
app.get(‘/’,function(req,res){
res.send('hola')
});
app.listen(PORT, function() {
console.log(‘server running on http://localhost:' + PORT);
});

Analicemos un poco el código:

  1. var express = require('express') , “require” es la manera de requerir módulos en NodeJS. Recuerdas cuando corrimos npm install --save {moduleName} ?, bueno ese módulo se instaló localmente dentro de la carpeta node_modules junto con otras dependencias y con “require” podemos hacer uso de ellas.
  2. var app = express() es la manera de iniciar nuestro servidor con express.
  3. app.get se encarga de responder unrequest sobre la ruta '/' y regresar un simple “hola”.
  4. Por ultimo app.listen(port, function) es el encargado de saber a que puerto escuchar, ósea en que puerto iniciar el servidor.

A este punto podemos correr node server.js en la consola y debemos de ver un mensaje como server running on http://localhost:3000 . Así podemos abrir el browser en http://localhost:3000y ver el mensaje “hola”.

Muy bien verdad? pero muy básico aún (en realidad todo este Post será muy básico).

Pero Ethan.. que pasa si quiero mostrar una pagina entera de HTML?.

Lo primero que tenemos que hacer es crear el archivo html, así que hay que escribir en la consola:touch index.html Abrimos el archivo y escribimos el siguiente HTML.

<html>
<head>
<title>Basic HTML</title>
</head>
<body>
<div>
Hola!! muy sencillo todo esto me encantahhhhhhhhhhhhhhh
</div>
</body>
</html>

Una vez hecho esto, volvemos a nuestro archivoserver.js y escribimos el siguiente código en el cuerpo de la función app.get .

res.sendFile(path.join(__dirname+’/index.html’));

Para que entonces se vea de la siguiente manera.

app.get(‘/’,function(req,res){
res.sendFile(path.join(__dirname+’/index.html’));
});

Pero aquí falta algo. Como podemos ver estamos usando path … de dónde viene path?, si tu primer instinto fue buscarlo como dependencia dentro de la carpeta node_modules ya andamos de victoriosos, y si recuerdas que la carpeta node_modules contaba con un montón de dependencias que tú no habías instalado, bueno esas dependencias o módulos, son del core de NodeJS y están a tu disposición.

Sabiendo esto, tenemos que hacer un require de path, así que arriba de nuestro archivo javascript server.js hacemos lo siguiente.

var path = require(‘path’);

Dejándonos el archivo de la siguiente manera.

var express = require(‘express’);
var path = require(‘path’);
var app = express();
var PORT = 3000;
app.get(‘/’,function(req,res){
res.sendFile(path.join(__dirname+’/index.html’));
});
app.listen(PORT, function() {
console.log(‘server running on http://localhost:' + PORT);
});

Ahora solo debemos parar la aplicación usando control + c y volverla a correr connode server.js . Sí visitamos el explorador podemos ver el contenido de nuestro HMTL, chido verdad?.

Ahora para darle un poquito mas de sabor a este pequeño ejemplo, por que no agregamos un poco de javascript en el cliente?

Para eso creemos una nueva carpeta con el nombre “src” y un archivo que se llame “app.js”.

mkdir src 
cd src
touch app.js

y escribamos el código más sencillo.

function sayHi(name) {
alert(‘Hi, ‘ + name);
};
sayHi(‘Ethan’);

y después mandémoslo a llamar en nuestro head como lo haríamos normalmente.

<head>
<title>Basic HTML</title>
<script type=”text/javascript” src=”/src/app.js”></script>
</head>

Volvamos a parar/iniciar la aplicación y veamos que pasa.

WHATTTTTT?

Nos encontramos con un error GET http://localhost:3000/src/app.js 404 (Not Found)

Y si es un poco obvio, nuestro archivo JS esta dentro del proyecto explícitamente, pero en ningún momento lo expusimos en el servidor como un asset, para eso necesitamos agregar una linea mas de código dentro de nuestro server.js .

app.use(express.static(path.join(__dirname+’/src’)));

Y eso expondrá todos nuestro archivos ( Imágenes, iconos, css, javascript ) dentro de la carpeta src y podriamos acceder a el como: localhost:3000/app.js por ejemplo.

Entonces ahora nuestro HTML debe referenciar al js como <script type=”text/javascript” src=”/app.js”></script> y listo detenemos/iniciamos la aplicación una vez más y podremos ver la alerta.

A este punto ya podríamos crear una simple app que muestra nuestras imágenes y algún Javascript y podríamos decirle con orgullo a nuestros amigos, “yo ya se crear una app universal con Javascript” (que significa que usamos Javascript en el client y en el servidor)

Pero.. cómo somos y cómo nos encanto el modulo require de NodeJS ahora también queremos usar require en el cliente.. pero nos damos cuenta que eso no es posible, pero existen otras maneras de hacerlo, y es ahi donde sale a relucir brillantemente browserify =D~ (si la dependencia que ya instalamos), pero que es browserfy?, de su página podemos leer lo siguiente:

Con Browserify puede escribir código que usa require de la misma manera que lo usarías en Node.

Recuerdas nuestra function sayHi() ? que te parece si la escribimos en 2 archivos diferentes para ilustrar un poco mejor como funciona esta librería.

Para eso dentro de src creamos say-hi.js con el siguiente código.

module.exports = function (name) {
alert('Hi from browserfy,' + name);
};

Bastante simple cierto? lo único que hacemos es escribir la misma función pero usando un module.exports que suena bastante obvio.

Ahora en nuestro archivo app.js escribimos el siguiente código.

var sayHi = require(‘./say-hi’);
sayHi(‘Ethan’);

Pero que esta pasando aquí? estamos usando require como en nuestro código del servidor.

Que pasa si guardo todo así y detengo/inicio la aplicación y refresco el explorador?

Por supuesto tenemos un error, (que ya lo esperaba).

app.js:1 Uncaught ReferenceError: require is not defined

Aun nos falta hacer un pequeño cambio, tenemos que usar browsefy para que nuestro JS sea capaz de usar require para eso corremos en la terminal.

mkdir dir
browserify src/app.js > dir/bundle.js

y podremos ver como mágicamente aparecerá un archivo bundle.js dentro del directorio dir .

Ahora solo nos queda modificar nuestro server.js para que use dir en vez de src .

app.use(express.static(path.join(__dirname+’/dir’)));

y nuestro HTML ahora debe buscar por bundle.js y no por app.js

<script type=”text/javascript” src=”/bundle.js”></script>

Y listo, tenemos algo que a primera instancia se ve (y es) muy básico, nos abre las puertas a un montón de cosas nuevas que espero y juntos estemos probando y discutiendo.

Hasta Luego!!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.