Como crear un sitio usando ExpressJs y Node

Written by:

|

Crear un sitio web usando ExpressJs, en la actualidad es relativamente facil. Basicamente debes agregar algunas piezas para que todo funcione y vas a estar listo para comenzar a realizar ese sitio web que tanto deseas hacer.

Al mismo tiempo, no solo aprendes a trabajar con HTML, CSS y Javascript, sino que entras a un mundo en el que se te hara la vida mas facil cuando comiences a utilizar Jade o Pug para diseñar tus paginas. Express te da la entrada a nuevas librerias y formas de darle estilos a tu nuevo sitio gracias a la utilizacion de Sass, Less entre otros. En otros post mas adelante podras ver como Express puede mejorarse con otras librerias para convertirse en el interesante MEAN Stack (MongoDB | Express | Angular | Node) que te ayudara a la realizacion de todo un robusto sitio que puedes usar para tu negocio o projecto personal. Sin mas, mira que facil.

Todo lo que necesitas es lo siguiente:

Debes instalar Node y NPM(Nuget Package Manager), los puedes descargar por medio de estos vinculos.

Download the Node.js source code or a pre-built installer for your platform 

Usualmente Nodejs tambien instala NPM, para que puedas estar seguro, una vez terminada la instalacion puedes hacer una verificacion abriendo una Consola y poniendo 

  • npm -v para checkearquenpm esta instalado.
  • node -v para checkear que Nodejs se instalo correctamente.

Una vez que Node esta instalado podras instalar Express usando la siguiente linea en la consola:

$ npm install express-generator -g

(para los que usan Linux deberan agregar al principio sudo)

$ sudo npm install express-generator -g

Para mas informacion sobre Express puedes ir a la pagina oficial de Express. La linea de arriba instala el generador de Express de forma goblal en tu maquina. Una vez instalado solo tienes que seleccionar el lugar en tu maquina donde vas a crear el projecto y haces lo siguiente:

  • Creas una carpeta nueva con el nombre de tu projecto.
  • utilizando la Consola de comandos navegas hasta dicha carpeta.
  • Escribes en la consola: express y das enter y veras esto o parecido a esto
$ express --view=pug

   create : package.json
   create : app.js
   create : public
   create : public/javascripts
   create : public/images
   create : routes
   create : routes/index.js
   create : routes/users.js
   create : public/stylesheets
   create : public/stylesheets/style.css
   create : views
   create : views/index.pug
   create : views/layout.pug
   create : views/error.pug
   create : bin
   create : bin/www
  • Lo siguiente es instalarlo, asi que ponemos lo siguiente:
$ npm install
  • Una vez instalado escribes esta linea para inicializar el servido y abrir el sitio.
$ npm start
  • Ahora el sitio se abrira navegado a la direccion http://localhost:3000/. Pero esta forma tiene un problema muy simple, cada vez que modifiques el sitio, tendras que apagar el servidor y reinicializarlo de nuevo. Para solucionar esto, antes de inicializar el sitio vamos a instalar otro paquete que nos ayudara muchisimo. asi que pon esto en la consola:
$ npm install -g nodemon
  • Esta linea instala esta utilidad que te permitira reinicializar automaticamente el servidor, asi que cada vez que modifiques el sitio solo tendras que ir al navegador y refrescar la pagina.
  • Por ultimo, inicializa el servidor y veras lo siguiente:
$ nodemon
[nodemon] v1.x.x
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
  • Ahora podras ir al navegador e ir a la siguiente direccion http://localhost:3000/  y podras ver tu sitio funcionando y listo para ser modificaco.
sitio web en expressjs

Buena suerte. :-p

Continua con la serie y desarrolla tu pagina principal

Continue Reading…