{"id":3561,"date":"2018-03-03T06:16:13","date_gmt":"2018-03-03T06:16:13","guid":{"rendered":"http:\/\/pensemosweb.com.mx\/index.php\/2018\/03\/03\/como-crear-servidor-web-5-minutos-nodejs\/"},"modified":"2024-04-06T01:30:57","modified_gmt":"2024-04-06T07:30:57","slug":"como-crear-servidor-web-5-minutos-nodejs","status":"publish","type":"post","link":"https:\/\/pensemosweb.com\/en\/como-crear-servidor-web-5-minutos-nodejs\/","title":{"rendered":"\u00bfC\u00f3mo crear un servidor web en 5 minutos con Node.js?"},"content":{"rendered":"

Para crear un servidor web en node.js, primero, \u00bfQu\u00e9 es node.js?, tomando la definici\u00f3n del sitio oficial, Node.js\u00ae<\/a> <\/strong>es un entorno de ejecuci\u00f3n para JavaScript construido con el motor de JavaScript V8 de Chrome. Node.js usa un modelo de operaciones E\/S sin bloqueo y orientado a eventos<\/a>, que lo hace liviano y eficiente. El ecosistema de paquetes de Node.js, npm, es el ecosistema m\u00e1s grande de librer\u00edas de c\u00f3digo abierto en el mundo.<\/p>\n\n\n\n

Vamos a describir la parte que nos interesa, Node.js <\/strong>es un programa, V8 <\/strong>es un motor de javascript de c\u00f3digo abierto creado por Google, por lo que tambi\u00e9n lo hace un programa, V8 est\u00e1 escrito en C++, y la tarea de V8 es tomar c\u00f3digo Javascript y convertirlo a c\u00f3digo m\u00e1quina <\/strong>(compilar c\u00f3digo), pero lo que lo hace especial para nuestros fines es que puede ser embebido dentro de otros programas, lo que permite que V8 est\u00e9 embebido en Node.js, V8 por as\u00ed decirlo es el punto de partida para toda la funcionalidad de Node.js.<\/p>\n\n\n\n

Node.js tambi\u00e9n est\u00e1 escrito en C++ y utiliza la API de V8 para agregarle caracter\u00edsticas y funcionalidades nuevas a Javascript. Estas nuevas funcionalidades permiten tener acceso al sistema de archivos y carpetas, nos permite crear un servidor TCP y http, adem\u00e1s de acceso a POSIX, o sea, a toda la funcionalidad del sistema operativo donde se encuentre instalado.<\/p>\n\n\n\n

\n

Node.js proporciona la sintaxis Javascript para crear programas que tengan acceso a las caracter\u00edsticas del sistema operativo donde s\u00e9 est\u00e1 ejecutando.<\/p>\n<\/blockquote>\n\n\n\n

Con esto podemos razonar que con Node.js podemos crear un servidor web, para crearlo, vamos a utilizar NPM (Node Package Manager) y express.js <\/strong>un frawework web.<\/p>\n\n\n\n

Vamos a crear una nueva carpeta llamada mi-servidor-web<\/strong>, luego accede a esta carpeta con:<\/p>\n\n\n\n

<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
$ cd mi<\/span>-<\/span>servidor<\/span>-<\/span>web<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Ahora vamos a iniciar el proyecto utilizando el siguiente comando:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
$ npm init<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
La l\u00ednea de comandos nos pedir\u00e1 algunos datos, puedes dar “enter” a todos si quieres, te muestro un ejemplo:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
Press <\/span>^<\/span>C at any time to quit<\/span>.<\/span><\/span>\npackage<\/span> <\/span>name<\/span>:<\/span> (mi<\/span>-<\/span>servidor<\/span>-<\/span>web)<\/span><\/span>\nversion<\/span>:<\/span> (<\/span>1.0<\/span>.<\/span>0<\/span>)<\/span><\/span>\ndescription<\/span>:<\/span> Mi primer servidor web<\/span><\/span>\nentry <\/span>point<\/span>:<\/span> (index<\/span>.<\/span>js)<\/span><\/span>\ntest <\/span>command<\/span>:<\/span><\/span>\ngit <\/span>repository<\/span>:<\/span><\/span>\nkeywords<\/span>:<\/span><\/span>\nauthor<\/span>:<\/span> Jaime Cervantes<\/span><<\/span>James<\/span>.<\/span>cervantes<\/span>.<\/span>ve@gmail<\/span>.<\/span>com<\/span>><\/span><\/span>\nlicense<\/span>:<\/span> (ISC)<\/span><\/span>\nAbout to write to <\/span>\/<\/span>home<\/span>\/<\/span>James<\/span>\/<\/span>develop<\/span>\/<\/span>node<\/span>.<\/span>js<\/span>\/<\/span>mi<\/span>-<\/span>servidor<\/span>-<\/span>web<\/span>\/<\/span>package<\/span>.<\/span>json:<\/span><\/span>\n{<\/span><\/span>\n  <\/span>"<\/span>name<\/span>"<\/span>: <\/span>"<\/span>mi-servidor-web<\/span>"<\/span>,<\/span><\/span>\n  <\/span>"<\/span>version<\/span>"<\/span>: <\/span>"<\/span>1.0.0<\/span>"<\/span>,<\/span><\/span>\n  <\/span>"<\/span>description<\/span>"<\/span>: <\/span>"<\/span>Mi primer servidor web<\/span>"<\/span>,<\/span><\/span>\n  <\/span>"<\/span>main<\/span>"<\/span>: <\/span>"<\/span>server.js<\/span>"<\/span>,<\/span><\/span>\n  <\/span>"<\/span>scripts<\/span>"<\/span>: <\/span>{<\/span><\/span>\n    <\/span>"<\/span>test<\/span>"<\/span>:<\/span> <\/span>"<\/span>echo <\/span>\\"<\/span>Error: no test specified<\/span>\\"<\/span> && exit 1<\/span>"<\/span><\/span>\n  <\/span>},<\/span><\/span>\n  <\/span>"<\/span>author<\/span>"<\/span>: <\/span>"<\/span>Jaime Cervantes <jaime.cervantes.ve@gmail.com><\/span>"<\/span>,<\/span><\/span>\n  <\/span>"<\/span>license<\/span>"<\/span>: <\/span>"<\/span>ISC<\/span>"<\/span><\/span>\n}<\/span><\/span>\nIs <\/span>this<\/span> ok<\/span>?<\/span> (yes)<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
npm init<\/code> nos genera un archivo package.json<\/code>:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
{<\/span><\/span>\n  <\/span>"<\/span>name<\/span>"<\/span>: <\/span>"<\/span>mi-servidor-web<\/span>"<\/span>,<\/span><\/span>\n  <\/span>"<\/span>version<\/span>"<\/span>: <\/span>"<\/span>1.0.0<\/span>"<\/span>,<\/span><\/span>\n  <\/span>"<\/span>description<\/span>"<\/span>: <\/span>"<\/span>Mi primer servidor web<\/span>"<\/span>,<\/span><\/span>\n  <\/span>"<\/span>main<\/span>"<\/span>: <\/span>"<\/span>server.js<\/span>"<\/span>,<\/span><\/span>\n  <\/span>"<\/span>scripts<\/span>"<\/span>: <\/span>{<\/span><\/span>\n    <\/span>"<\/span>test<\/span>"<\/span>:<\/span> <\/span>"<\/span>echo <\/span>\\"<\/span>Error: no test specified<\/span>\\"<\/span> && exit 1<\/span>"<\/span><\/span>\n  <\/span>},<\/span><\/span>\n  <\/span>"<\/span>author<\/span>"<\/span>: <\/span>"<\/span>Jaime Cervantes <jaime.cervantes.ve@gmail.com><\/span>"<\/span>,<\/span><\/span>\n  <\/span>"<\/span>license<\/span>"<\/span>: <\/span>"<\/span>ISC<\/span>"<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Este archivo contiene la informaci\u00f3n anteriormente proporcionada y adem\u00e1s se encarga de controlar los paquetes que instalamos para nuestro proyecto. Por ejemplo, para poder crear nuestro servidor r\u00e1pidamente, vamos a instalar un paquete llamado express.js <\/strong>de la siguiente manera:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
$ npm install express <\/span>--<\/span>save<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Este comando instala express.js <\/strong>y adem\u00e1s actualiza nuestro archivo package.json<\/code> gracias al par\u00e1metro --save<\/code> en la propiedad dependencies<\/code>:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
{<\/span><\/span>\n  <\/span>"<\/span>name<\/span>"<\/span>: <\/span>"<\/span>mi-servidor-web<\/span>"<\/span>,<\/span><\/span>\n  <\/span>"<\/span>version<\/span>"<\/span>: <\/span>"<\/span>1.0.0<\/span>"<\/span>,<\/span><\/span>\n  <\/span>"<\/span>description<\/span>"<\/span>: <\/span>"<\/span>Mi primer servidor web<\/span>"<\/span>,<\/span><\/span>\n  <\/span>"<\/span>main<\/span>"<\/span>: <\/span>"<\/span>server.js<\/span>"<\/span>,<\/span><\/span>\n  <\/span>"<\/span>scripts<\/span>"<\/span>: <\/span>{<\/span><\/span>\n    <\/span>"<\/span>test<\/span>"<\/span>:<\/span> <\/span>"<\/span>echo <\/span>\\"<\/span>Error: no test specified<\/span>\\"<\/span> && exit 1<\/span>"<\/span><\/span>\n  <\/span>},<\/span><\/span>\n  <\/span>"<\/span>author<\/span>"<\/span>: <\/span>"<\/span>Jaime Cervantes <jaime.cervantes.ve@gmail.com><\/span>"<\/span>,<\/span><\/span>\n  <\/span>"<\/span>license<\/span>"<\/span>: <\/span>"<\/span>ISC<\/span>"<\/span>,<\/span><\/span>\n  <\/span>"<\/span>dependencies<\/span>"<\/span>: <\/span>{<\/span><\/span>\n    <\/span>"<\/span>express<\/span>"<\/span>:<\/span> <\/span>"<\/span>^4.16.2<\/span>"<\/span><\/span>\n  <\/span>}<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Ya teniendo express instalado, vamos a crear nuestro servidor web creando el archivo  .\/mi-servidor-web\/index.js<\/code>:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
const<\/span> express <\/span>=<\/span> <\/span>require<\/span>(<\/span>'<\/span>express<\/span>'<\/span>)<\/span>;<\/span><\/span>\nconst<\/span> app <\/span>=<\/span> <\/span>express<\/span>()<\/span>;<\/span><\/span>\napp<\/span>.<\/span>use<\/span>(express<\/span>.<\/span>static<\/span>(__dirname <\/span>+<\/span> <\/span>'<\/span>\/public\/<\/span>'<\/span>))<\/span>;<\/span><\/span>\napp<\/span>.<\/span>listen<\/span>(<\/span>'<\/span>3000<\/span>'<\/span>,<\/span> <\/span>functions<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>Servidor web escuchando en el puerto 3000<\/span>'<\/span>)<\/span>;<\/span><\/span>\n}<\/span>)<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Hay una parte importante que nos permitir\u00e1 ver el funcionamiento de nuestro servidor web:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
app<\/span>.<\/span>use<\/span>(express<\/span>.<\/span>static<\/span>(__dirname <\/span>+<\/span> <\/span>'<\/span>\/public\/<\/span>'<\/span>))<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Esta l\u00ednea le indica a nuestro servidor que cuando un usuario haga una petici\u00f3n de archivos est\u00e1ticos, por ejemplo, http:\/\/localhost:300\/index.html<\/code> enviar\u00e1 como respuesta el contenido de .\/public\/index.html<\/code>.<\/p>\n\n\n\n
Vamos a crear la carpeta public<\/code> y el archivo index.html<\/code> con el editor de nuestro preferencia o en l\u00ednea de comandos si lo deseas. Agregamos el siguiente contenido a nuestro archivo index.html<\/code>:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
<!<\/span>DOCTYPE html<\/span>><\/span><\/span>\n<<\/span>html<\/span> <\/span>lang<\/span>=<\/span>"<\/span>is<\/span>"<\/span>><\/span><\/span>\n<<\/span>head<\/span>><\/span><\/span>\n  <\/span><<\/span>meta<\/span> <\/span>charset<\/span>=<\/span>"<\/span>UTF-8<\/span>"<\/span>><\/span><\/span>\n  <\/span><<\/span>meta<\/span> <\/span>name<\/span>=<\/span>"<\/span>viewport<\/span>"<\/span> <\/span>content<\/span>=<\/span>"<\/span>width=device-width, initial-scale=1.0<\/span>"<\/span>><\/span><\/span>\n  <\/span><<\/span>title<\/span>><\/span>Mi primer servidor web<\/span><\/<\/span>title<\/span>><\/span><\/span>\n<\/<\/span>head<\/span>><\/span><\/span>\n<<\/span>body<\/span>><\/span><\/span>\n  <\/span><<\/span>h1<\/span>><\/span>HOLA, mi primer servidor web<\/span><\/<\/span>h1<\/span>><\/span><\/span>\n<\/<\/span>body<\/span>><\/span><\/span>\n<\/<\/span>html<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Para ejecutar nuestro servidor nos posicionamos dentro de nuestra carpeta mi-servidor-web<\/code> y ejecutamos el siguiente comando:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
$ node index<\/span>.<\/span>js<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Veremos este mensaje en nuestra consola:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
Servidor web escuchando en el puerto <\/span>3000<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Por \u00faltimo abrimos nuestro navegador web y obtendremos nuestro index.html como la imagen de abajo, utilizando http:\/\/localhost:3000<\/code> either http:\/\/localhost:3000\/index.html<\/code>:<\/p>\n\n\n\n
\"\"<\/figure>","protected":false},"excerpt":{"rendered":"
Node.js\u00ae es un entorno de ejecuci\u00f3n para JavaScript construido con el motor de JavaScript V8 de Chrome. Node.js usa un modelo de operaciones E\/S sin bloqueo y orientado a eventos, que lo hace liviano y eficiente.<\/p>","protected":false},"author":2,"featured_media":3742,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[28],"tags":[54],"class_list":["post-3561","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-javascript"],"_links":{"self":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3561","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/comments?post=3561"}],"version-history":[{"count":2,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3561\/revisions"}],"predecessor-version":[{"id":3834,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3561\/revisions\/3834"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media\/3742"}],"wp:attachment":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media?parent=3561"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/categories?post=3561"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/tags?post=3561"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}