En el ejercicio de la lección anterior,
creamos un servidor HTTP simple que podría servir contenido estático,
esto se creó completamente usando Node.js.
Ahora que hemos aprendido acerca de Express,
el marco minimalista que admite el desarrollo de servidor en la parte superior de Node.js,
vamos a examinar ahora cómo podemos usar Express para construir el mismo servidor en este ejercicio.
Para empezar, vaya a la carpeta Node.js que hemos estado usando para almacenar
todo el código de este curso y, a continuación, cree una nueva carpeta allí llamada node-express,
y luego muévase a esta carpeta.
Ahora, vamos a crear
una carpeta pública aquí dentro de la carpeta express nodo.
Luego, iremos a esa carpeta pública HTTP nodo y luego copiaremos estos dos archivos,
el index.HTML y aboutus.html a la carpeta pública node-express.
Vamos a servir estos dos archivos usando
el servidor Express que vamos a construir en este ejercicio.
Ahora, yendo a las terminales.
Muévase a la carpeta node-express en el terminal y, a continuación, en el símbolo del sistema escriba npm init,
para inicializar una aplicación de nodo.
Luego, para el nombre del paquete vamos a usar node-express,
y para la descripción vamos a decir Node Express Examples,
y
el punto de entrada es index.js, y todo lo demás como antes,
y vamos a crear el archivo package.json.
Ahora, permítanme abrir
el proyecto usando el editor de código de Visual Studio en mi caso y luego,
en el archivo package.json vamos y agreguemos el nuevo script llamado start,
que es el índice del nodo y guardemos los cambios.
Ahora, que hemos inicializado el módulo de nodo,
vamos a seguir adelante e instalar el marco Express dentro
del proyecto para hacer uso de él para construir nuestro servidor express.
Entonces, en el símbolo del sistema,
escriba npm install express.
Así es como instalaría
un módulo de nodo de terceros si está tomando este curso por
primera vez y no ha tomado los cursos anteriores
, entonces esto es algo que es importante tener en cuenta.
Así es como va a instalar un módulo de nodo añadiendo el menos guardar,
también estamos guardando la información de que
este módulo de nodo de terceros es una dependencia
para nuestro proyecto y esta información se guardará en el archivo package.json.
Si ha tomado los cursos anteriores de la especialización,
entonces ya conoce esta información.
Entonces, sigamos adelante e instalemos el módulo Express.
Como puede notar,
estamos usando Express versión 4.16.3 en este curso.
Entonces, volvamos ahora a nuestro código.
Echando un vistazo al archivo package.json,
verá que dentro del archivo package.json instalando Express ya vemos
otra propiedad que se incluye en el archivo package.json llamado dependencias.
Estas dependencias rastrean todos los paquetes
de los que este proyecto actual va a depender.
Aquí puede ver Express siendo instalado
allí y la versión correspondiente de Express que se está instalando aquí,
por lo que esto declara que este proyecto en particular
depende de la versión Express al menos 4.16.3.
Además, también puede ver esta carpeta llamada módulos de nodo creados aquí.
Entonces, aquí es donde se
almacenarán todos los módulos de nodo de terceros que están instalados por su aplicación.
Ahora, cuando hacemos una confirmación de Git,
no queremos confirmar esta carpeta de módulos de nodo.
Entonces, para ignorar eso,
vamos a crear un archivo
llamado.gitignore y dentro del archivo.gitignore,
vamos a escribir los módulos node_.
Por lo tanto, esto es hacerle saber a Git que no queremos
enviar la carpeta de módulos de nodo al repositorio de Git.
Entonces, con esto vamos a guardar los cambios.
Así que ahora cuando se crea un repositorio de Git,
la carpeta de módulos de nodo se ignorará.
No es necesario porque siempre puede volver a crear la carpeta de módulos de nodo cada vez
que clone este proyecto desde su repositorio de Git simplemente escribiendo npm install.
Esto mirará el archivo package.json,
y mirará todas las dependencias,
y las dependencias de desarrollo que están en el
archivo package.json y se instalarán automáticamente todos esos paquetes por usted.
Ahora, que hemos completado esto,
vamos a crear nuestro primer proyecto Express,
así que para hacerlo vamos a crear un archivo llamado index.js y en el index.js
declararemos un const express require express.
Ahora, notará que express es un módulo de nodo de terceros y se ha
instalado en nuestra carpeta de módulos de nodo en el directorio correcto.
Por lo tanto, cuando declaramos esto aquí diciendo que este módulo Express es necesario,
entonces se incluirá automáticamente desde la carpeta de módulos de nodo en nuestra aplicación.
Ahora, también instale HTTP
el módulo central aquí.
Ahora, que hemos instalado esto,
vamos a crear el nombre del curso como
host local y el número de puerto como 3000.
Así que verá que estamos usando exactamente la misma forma de hacer
este ejercicio que hicimos para el ejercicio HTTP anterior.
Ahora, en este punto,
vamos a declarar esta const llamada aplicación como expreso.
Así que de esta manera, estamos diciendo que nuestra aplicación va a usar el módulo de nodo Express.
Entonces, una vez que lo hacemos,
Express proporciona un montón de métodos que podemos usar para construir nuestro servidor web.
Entonces, después de esto, diremos app.use () y dentro de aquí,
declararemos una función que será llamada para configurar nuestro servidor.
Por lo tanto, esta función toma tres parámetros req,
que es la solicitud; res,
que es la respuesta, y siguiente.
Ahora, como vimos Express usa middleware adicional.
Por lo tanto, el siguiente se usa cuando necesita
invocar middleware adicional para ocuparse del trabajo en su nombre.
Veremos el uso de siguiente en algunos de los ejercicios posteriores,
pero la función aquí tomará tres parámetros req, res, y siguiente.
Siguiente es un parámetro opcional que
no se puede incluir si no va a usarlo dentro de su código.
Por lo tanto, dentro de aquí vamos a decir,
registro de la consola y luego,
vamos a registrar los encabezados,
y vamos a responder con el código de estado establecido en 200.
Establecer el tipo de contenido de encabezado
como HTML de texto.
Por lo tanto, usted nota que gran parte de este código se ve muy similar
a la forma en que configuramos nuestra aplicación de nodo.
Por lo tanto, diremos res.end y
aquí cuerpo HTML h1.
Solo diremos que es un servidor Express y cerraremos
los tanques allí, y eso es todo.
A partir de su comprensión del nodo HTTP,
ya entiende lo que estos tres están haciendo
y lo mismo también se hace en el servidor Express.
Ahora que hemos configurado el servidor usando la aplicación,
vamos a configurar el servidor,
y entonces aquí es donde vamos a utilizar HTTP CreateServer,
y por lo tanto CreateServer ahora va a tomar la aplicación como su parámetro de función allí,
y a partir de entonces, simplemente diremos server.listen port,
hostname y la
función de flecha aquí dentro de la cual voy a imprimir,
consola, registro backcoat servidor que se ejecuta en HTTP: //hostname:port,
eso es todo. Así que verá que esta parte es muy similar
a lo que ha hecho para el ejercicio HTTP,
excepto que el CreateServer ahora toma esta aplicación,
que hemos declarado anteriormente Express.
Por lo tanto, Express está agregando funcionalidad adicional que será
utilizada por el servidor HTTP que creamos usando nota.
Una vez que hayamos terminado con esto,
guardemos los cambios,
y luego seguiremos adelante e iniciaremos el servidor,
y echaremos un vistazo a lo que servirá el servidor.
Al entrar en el terminal, agregue el terminal,
escriba inicio de NPM y verá que su servidor está en funcionamiento.
Ahora, cuando accedamos a esto desde el navegador o desde el cartero,
verás lo que sirve.
Así que aquí tengo al cartero y dinero.
Permítanme enviar la solicitud GET a localhost 3,000 como antes
y verá que esto está sirviendo el código HTML que incluimos allí,
y por lo que este es un servidor Express.
Al hacer clic en la vista previa,
esto le mostrará cómo se verá en un navegador,
y esto muestra la versión sin procesar del código que se ha enviado desde el lado del servidor,
y puede ver que el código de estado es 200, ¿de acuerdo?
Y el otro vector de información de encabezado ha sido enviado desde el sitio del servidor.
Tenga en cuenta en particular que dice x alimentado por Express en el encabezado.
Con esto, completamos la primera parte de este ejercicio donde hemos visto
cómo podemos hacer uso de Express para configurar un servidor web simple.
Permítanme ahora detener el servidor y luego inicializar el repositorio de Git,
así que en el mensaje escribiré «git init» y
luego «git status» y verá que los archivos que se han desrastreado,
así que diré «obtener y soltar» y estos archivos ahora se agregan en el repositorio de Git,
y así cuando diga git,
verá los archivos que se han agregado.
Tenga en cuenta en particular que la carpeta de módulos de nodo
no se ha agregado al repositorio de Git porque en el
archivo.gitignore indicamos explícitamente que
la carpeta de módulos de nodo no debe incluirse en el repositorio de Git.
Así que ahora, revisemos nuestro intercambio de confirmaciones diciendo git
commit menos m Express ejemplo,
y hemos comprometido esto en nuestro repositorio de Git.
En la segunda parte de este ejercicio,
veremos el uso de middleware Express llamado Morgan.
Morgan se usa para registrar información en la pantalla,
por lo que registrará información sobre las solicitudes entrantes en la pantalla para que
podamos ver alguna información que se está imprimiendo en nuestra consola aquí.
Además, veremos cómo podemos configurar nuestro servidor Express para servir archivos HTML estáticos.
Para comenzar, en el símbolo del sistema escriba npm
instale Morgan menos, menos guardar.
Ahora, Morgan va a ser una dependencia que vamos a usar en nuestra aplicación.
Entonces, es por eso que es menos,
menos guardar y esto obtendría Instalar,
y puedes ver que estoy usando Morgan versión 1.9.0 en este curso.
Ahora que hemos instalado Morgan,
veamos cómo podemos hacer uso de ella dentro de nuestra Aplicación.
Así que yendo a nuestra Aplicación,
la forma de hacer uso de Morgan es declarar aquí
const Morgan requiere Morgan,
y luego diremos,
«Aplicación use Morgan con el desarrollo».
Entonces, esta es la versión de desarrollo.
Por lo tanto, imprimirá información adicional en la pantalla según sea necesario.
Ahora, entrando en nuestra aplicación.
Dentro de nuestra aplicación, no voy a registrar todos los encabezados.
En su lugar, permítanme eliminar esto porque Morgan
registrará suficiente información para que la miremos,
y voy a configurar mi servidor para que sirva los archivos HTML de la carpeta pública.
Entonces, para hacer esto,
voy a declarar uso y expresar estática.
Esto le dice a Express que sirva los archivos estáticos de doble guión bajo.
Entonces, esto dice la raíz de
este proyecto y encontrarán esos archivos
en double_dirname, plus/ public.
Por lo tanto, recuerde que creamos la carpeta pública en la carpeta Express nodo.
Por lo tanto, esto está informando a Express que verá
esta carpeta en particular en la carpeta raíz de este proyecto y dentro de la carpeta pública.
Por lo tanto, esta será la carpeta desde la que
mi servidor Express servirá archivos HTML estáticos.
Después de realizar estos cambios,
guardemos los cambios
y, a continuación, reiniciemos nuestro servidor
y, a continuación, veremos cómo funciona.
Ir a ese indicador,
vamos a escribir npm start,
para iniciar nuestro servidor,
y una vez que el servidor esté en funcionamiento,
vamos a examinar qué servirá cuando enviemos varias solicitudes a este servidor.
Usando Postman, primero enviemos una solicitud get al host local: 3,000
y notarás que está sirviendo el archivo index.html.
Hemos configurado nuestro servidor para servir archivos estáticos de la carpeta pública,
y si solo decimos localhost: 3000 de forma predeterminada,
servirá el archivo index.html.
Por lo tanto, así es como funciona su servidor Web típico.
Por lo tanto, eso es lo que hemos terminado configurando nuestro servidor express para hacer.
Ahora, vamos a escribir localhost: 3000 about.html y enviar la solicitud,
y dice que se trata de nuestra estrategia HTML,
y también el archivo HTML sobre nosotros se ha guardado aquí.
Así que en la vista previa,
puede ver el archivo resultante que se ha servido desde nuestro sitio de servidor.
Intentemos acceder a un archivo inexistente
y verás que cuando intentes acceder a un archivo inexistente,
entonces será por defecto la segunda configuración que hemos hecho en nuestro código,
que dice que este es un servidor Express.
No hemos especificado a nuestro servidor Express cómo manejar
situaciones en las que encuentra un archivo que no existe.
Por lo tanto, es por eso que está usando el valor predeterminado que se ha configurado justo debajo de la estática Express,
que es servir el valor predeterminado, y por supuesto,
este no es el comportamiento más ideal,
pero eso es lo que tenemos en el servidor Express en este momento.
Más adelante, modificaremos el servidor Express para manejar
los errores con más detalle, en ejercicios posteriores.
Este también es un buen momento para que hagas una confirmación Git de los cambios.
Entonces, vamos a verificar el estado de Git después de detener el servidor,
y vamos a agregar los archivos modificados,
y luego hacer Git commit
menos m Express,
servir archivos estáticos.
Eso es. Con esto,
completamos este ejercicio.
En este ejercicio, hemos visto cómo podemos configurar
un servidor web simple para servir contenido en nuestro nombre.