[MÚSICA]
Ahora que tiene Node.js en su computadora,
obviamente quiere comenzar a usarlo inmediatamente.
Entonces, en este ejercicio, comenzaremos a usar Node.
Vamos a configurar un archivo empaquetado, o adyacente, para
nuestra carpeta de prueba de Git con la que hemos estado trabajando hasta ahora.
Luego, vamos a configurar un módulo de nodo llamado como servidor lite que
servirá el contenido de nuestra carpeta get test.
Y luego podemos navegar por este archivo index.html y
otros archivos en un navegador.
Y también veremos cómo el servidor lite nos permitirá
ver automáticamente las actualizaciones en la ventana de nuestro navegador mientras hacemos cambios en nuestro
archivo index.html, o cualquier otro archivo en nuestra carpeta get test.
El servidor lite es algo que vamos a utilizar ampliamente en este y
futuros cursos, para poder ver los cambios en tiempo real
en una ventana del navegador mientras editas los archivos de tu proyecto.
Como mencioné, queremos configurar el archivo package.json.
Entonces, ¿qué es exactamente este archivo package.json que vamos a configurar?
Así que aquí, tengo algo de información
del sitio npmjs.org
que especifica cuál es exactamente el rol del archivo package.json.
Por lo tanto, el archivo package.json sirve como documentación sobre lo que todos los
demás paquetes de los que depende su proyecto.
Entonces, por ejemplo, cuando configure el servidor lite de su proyecto,
se registrará en el archivo package.json.
Y para que, posteriormente, también pueda hacer uso de ese paquete en el futuro.
Además, le permite especificar la versión específica de un paquete de la
que depende su proyecto.
Por lo tanto, incluso si el paquete que depende de cambios en el futuro,
puede insistir en que desea que el usuario instale sólo una
versión específica del paquete para su uso dentro de su aplicación de nodo.
Y también, hace que sus compilaciones sean reproducibles,
lo que significa que cuando comparta su código con otros
, también pueden hacer la instalación de todos los módulos de nodo,
como veremos más adelante en este ejercicio, en su propio ordenador.
Entonces, obviamente, su próxima pregunta será, ¿cómo creamos este archivo package.json?
Si está comenzando un nuevo proyecto en el que desea inicializar el
archivo package.json, simplemente escriba npm init en el símbolo del sistema en la carpeta del proyecto.
Y luego eso lo llevará a través de un conjunto de pasos que le permitirán
configurar su archivo package.json.
Así que vamos a proceder con eso para nuestro proyecto de prueba de Git.
Así que aquí estoy en la carpeta git-test en mi ventana de terminal.
Asegúrese de que también abra una ventana de terminal o una ventana de comandos y
luego vaya a la carpeta git-test.
Y en el símbolo del sistema, escriba npm init.
Y luego siga las preguntas que se hacen.
Entonces, para el nombre del proyecto, lo dejaremos como predeterminado, git-test.
Para la versión, simplemente lo dejaremos como 1.0.0.
Podemos editarlo más tarde.
Para la descripción,
este es un directorio de prueba
para aprender Git y Node.
No importa, escriba alguna descripción allí.
Y luego el punto de entrada, sólo diría index.html.
Por lo general, si se trata de un paquete de nodo, el punto de entrada será index.js.
Ahora esta carpeta que hemos configurado es
una carpeta basada en index.html, así que es por eso que acabo de escribir index.html.
Comando de prueba, nada.
Git, si ya hubiéramos configurado el repositorio git en el
ejercicio anterior, automáticamente le pedirá que, si no,
esto estaría vacío y le dará la opción de escribir la URL del repositorio git,
en caso de que esté usando un repositorio de git en línea.
Algunas palabras clave para su proyecto, que voy a dejar en blanco.
Autor, escriba su nombre.
Seamos narcisistas.
Y la licencia.
Y luego, le mostrará la configuración del archivo package.json en formato JSON.
Entonces, si su familia tiene un JSON, le parece muy, muy familiar.
Entonces, si esto se ve bien, digamos OK y
luego eso da como resultado la creación del archivo package.json.
Así que ahora, si enumera el contenido de la carpeta,
verá el archivo package.json en el contenido de la carpeta.
Abra esa carpeta de prueba de Git en su editor favorito,
y luego eche un vistazo al contenido del archivo package.json en su editor.
Como el siguiente paso, vamos a aprender cómo podemos instalar un módulo de nodo
usando NPM, el Administrador de paquetes de nodos.
Por lo tanto, vamos a instalar este módulo de nodo llamado como servidor ligero.
El servidor light servirá el contenido de esta carpeta git-test en
un servidor que se inicia para que pueda ver el contenido en un navegador.
Dado que tenemos un archivo index.html,
si servimos esta carpeta, entonces será un sitio web.
Y puede ver el index.html en un navegador.
Por lo tanto, vamos a configurar el servidor de luz y luego veremos cómo podemos hacer
uso del servidor de luz para servir el contenido de esta carpeta.
Esto es muy, muy útil porque si estás trabajando en un
proyecto de desarrollo web, quieres ver dónde está la versión en vivo de tu proyecto de desarrollo web.
Para que, a medida que realice cambios en su proyecto,
pueda ver los cambios inmediatamente reflejados en el navegador.
Entonces, este es un paquete de nodo muy bueno que es muy útil para este propósito.
Así que vamos a configurar este servidor de luz.
Para hacer eso, agregue el mensaje.
Escriba la instalación de NPM.
Así que tenga en cuenta, si desea que NPM instale un paquete de nodo,
así es como lo va a invocar y luego diría lite-server.
Y luego, también queremos guardar el hecho de que nuestro proyecto está usando el servidor lite.
Así que guardaremos esta información en el archivo package.json.
Así que para hacer eso, vas a escribir — save-dev.
Ahora la opción save-dev especifica que este servidor lite se utiliza
para la dependencia de desarrollo de nuestro proyecto.
Si está instalando un módulo de nodo del que su proyecto
depende directamente, entonces lo instalaría simplemente diciendo —save option.
Entonces, sigamos adelante e instalarlo.
Y esperas pacientemente a que la instalación tenga lugar.
Tardará unos minutos en completar su instalación.
Una vez que está instalado, entonces
se dará cuenta de inmediato cuando se mira el contenido de su carpeta,
inmediatamente se dará cuenta de que hay una carpeta allí creada llamada node_modules.
Ahora, si entra en el node_module, verá un montón
de otras subcarpetas allí, que contienen módulos de nodo,
que son necesarios para los gustos de nuestro módulo de nodo y así sucesivamente.
Así que vamos a hacer un recorrido rápido por la carpeta de módulos de nodo para ver
cuál es el contenido de estos.
Ir a mi carpeta git-test, si vas a la carpeta de módulos de nodo,
verías, como dije, un montón de subcarpetas allí.
Normalmente no necesita aventurarse en la carpeta de módulos de nodo.
Ellos simplemente existen allí porque son necesarios para el [INAUDIBLE].
Por lo tanto, a medida que navega, debe observar una carpeta llamada lite-server aquí.
Cuando vaya a la carpeta lite-server,
tenga en cuenta en particular la presencia del archivo index.js y
luego su archivo package.json y varias otras cosas.
Por lo tanto, este contenido de la carpeta comprende el módulo de nodo lite-server.
Pero este módulo de nodo de servidor lite-depende de otros módulos de nodo
para proporcionarle alguna funcionalidad adicional.
Así que esa es la razón cuando instala el módulo de nodo del servidor ligero, a su vez
instalará muchos otros módulos de nodo, de los que depende el servidor de luz en sí.
Así que esa es la razón por la que ves esa explosión de
estas carpetas dentro de los módulos de nodo.
No se preocupe demasiado por ello, la suma total de carpetas no será
más de unas pocas decenas de megabytes.
Por lo tanto, no va a llenar su directorio con basura.
Todo esto es esencial para que el nodo pueda ayudarle.
En caso de que tenga curiosidad sobre el servidor lite-y cómo funciona, etc.,
siempre puede ir a este sitio de GitHub donde está alojado el servidor lite-.
Y luego busque la documentación para lite-server.
Te presentaré todo lo que necesites saber sobre lite-server a medida que pasamos por
este curso y los cursos restantes.
Así que no tienes que preocuparte demasiado por ello, pero por si acaso tienes curiosidad,
siempre puedes ir al sitio para conocer más detalles sobre lite-server.
El enlace se proporciona en las instrucciones de ejercicio y
los recursos adicionales forman parte de esta lección.
Una vez que haya completado eso, luego diríjase a la.
Editor donde tiene la carpeta, carpeta Git-Test, abierta y
luego ver el contenido del archivo package.json.
Así que verá que el archivo package.json contiene exactamente la información
que configuró con su NPM.
Así que vería la versión del nombre y el autor del repositorio y,
en particular, tenga en cuenta esta información aquí.
Dice DevDependencies, por lo que luego especifica el lite-sever,
y también nota que dice hat 2.2.2.
Entonces, lo que significa que este proyecto en particular
depende de lite-server que sea una versión al menos 2.2.2 o superior.
Así que esto es muy útil para nosotros.
¿ Por qué necesitamos esta información aquí?
Más tarde, cuando vaya a los otros ejercicios,
notará que cuando almacene esto en un repositorio en línea,
no desea almacenar todo en su carpeta de módulos de nodo.
Solo almacenará información de todos los archivos que hemos creado.
La carpeta de módulos de nodo siempre se puede volver a crear
escribiendo NPM install en nuestro símbolo del sistema.
Y luego, en función de las dependencias de desarrollo y
las dependencias que se enumeran en el archivo empaquetador, todos los
módulos de nodo de los que depende su proyecto se instalarán automáticamente.
Veremos que más adelante cómo usar la
instalación de NPM en este curso.
Ahora que estamos en el archivo package.json vamos a hacer un par de ediciones para
que podamos hacer uso del servidor lite-para servir ese contenido.
Así que aquí mismo, en esta opción llamada scripts,
agreguemos uno más aquí.
Entonces diremos «empezar».
Así que start es un comando que admite NPM que
le permite especificar un montón de cosas que se iniciarán.
Así que más adelante veremos cómo hacemos uso de esto.
Así que aquí voy a decir «npm run lite».
Y después de esa prueba, voy a agregar
una entrada más llamada «lite»,
que configuraré como «lite-server», ¿de acuerdo?
Con estos cambios, vamos a guardar el archivo package.json.
Y luego, ahora nuestro proyecto está configurado, de modo que ahora si inicia el servidor lite-,
el contenido de su carpeta será ahora servido en su navegador favorito.
Volviendo a nuestro símbolo del sistema, agregue el símbolo.
Si escribo, inicio npm, ahora ves por qué puse ese
inicio de tarjeta de entrada en mi archivo Package.json.
Si digo npm start, sea cual sea el inicio configurado como en el archivo Package.json,
especificamos que npm ejecute light, y lite se especificó como servidor lite.
Así que básicamente, estamos diciendo Iniciar el servidor lite-.
Entonces, una vez que escriba npm start, iniciará el servidor lite-y
servirá el contenido de esta carpeta.
Ahora, ¿cómo se accede al contenido de esta carpeta?
Si desea acceder a esto localmente,
lo accederá especificando el que es como localhost: 3000.
Estos son los valores predeterminados para el servidor lite-.
Además, esto debería abrir automáticamente
la ventana del navegador de su navegador predeterminado, y
mostrar el contenido del índice o HTML en la ventana del navegador.
Aquí puede ver que he abierto mi editor y la
ventana de mi navegador dirigidos a localhost: 3000
simultáneamente uno al lado del otro, para que podamos ver
cómo la ventana del navegador reflejará inmediatamente
cualquier cambio que hagamos en nuestra carpeta de prueba de Git.
Así que déjame ir a index.html.
Y luego, por el bien del espacio, voy a darle la vuelta.
Y entonces, así que aquí, puedes ver que este es el contenido de esto.
Y luego, ahora, permítanme añadir un párrafo más.
Y guarde los cambios, y luego notará inmediatamente que
el cambio que hice en mi archivo index.html se refleja en mi navegador.
Esto proporciona una forma muy agradable de poder observar en
tiempo real los cambios que realiza en su código que se reflejan en su navegador.
Por lo tanto, cuando esté trabajando en un proyecto, será muy apropiado
que pueda ver los cambios inmediatamente.
Por lo tanto, cuando realiza un cambio y luego guarda el archivo,
el código modificado se carga inmediatamente en su navegador.
Así que puede ver inmediatamente el cambio que se refleja en la ventana de su navegador.
Esta es una herramienta muy útil mientras está haciendo el desarrollo de su proyecto.
Esa es la razón por la que te presenté a ese servidor lite-y
lo configuré para que podamos hacer uso de él, mientras desarrollamos el sitio web en este curso.
Si recuerdas, ya habíamos configurado nuestra carpeta git-test para ser un repositorio de Git.
Así que comprobando de nuevo,
veremos que ya tenemos tres commits en nuestro repositorio Git.
Y este repositorio de Git ya está reflejado en nuestro repositorio Git en línea
que hemos configurado en el ejercicio anterior ya sea en Bitbucket o GitHub.
Mi carpeta git-test se sincroniza con mi
repositorio de Bitbucket en este ejercicio en particular.
Entonces, lo que voy a hacer ahora es mostrarle cómo puede excluir algunas
carpetas de su carpeta de proyecto
y luego asegurarse de que no estén sincronizadas con su repositorio en línea.
Ahora, como dije, la carpeta node_modules siempre se puede volver a crear
escribiendo npm install en el símbolo del sistema.
Por eso, cuando subes
el contenido de tu carpeta en un repositorio de Git en línea,
o cuando haces una confirmación de la carpeta en tu repositorio de Git,
no quieres que la carpeta node_modules o todas las subcarpetas debajo de ella se
incluyan en la confirmación.
Entonces, ¿cómo excluimos algunas carpetas o
algunos archivos de nuestra carpeta para que no se registren en nuestro repositorio de Git?
Así que para ello, vamos a configurar un archivo llamado .gitignore.
Así que ese es el nombre del archivo, .gitignore.
Entonces, para crear este archivo.gitignore, iremos a nuestro editor.
Entonces, en el editor, en la carpeta git-test,
voy a crear un nuevo archivo y lo nombraré .gitignore.
Tenga en cuenta que el nombre comienza con un punto y
, a continuación, el resto del nombre es g-i-t-i-g-n-o-r-e.
Así que esto es muy importante que configure el archivo con exactamente ese nombre,
.gitignore.
Así que vamos a crear este archivo llamado .gitignore, y
la primera línea de ese archivo, vamos a escribir como node_modules.
Entonces, lo que esto significa es que la carpeta node_modules se
excluirá de nuestro commit git.
Entonces, una vez que creo ese archivo.gitignore y
luego agrego node_modules en el archivo.gitignore, guardemos los cambios.
Y luego ahora haremos una confirmación del estado actual de nuestro proyecto
en nuestro repositorio Git.
Espero que recuerdes tus comandos git.
Vamos a hacer un estado de git, y luego cuando lo haga,
inmediatamente notará que tiene el
archivo index.html marcado como modificado, y luego los dos nuevos archivos, .gitignore y package.json.
Entonces, hacemos un git add., y luego hacemos un estado de git.
Y luego ves que todos estos nuevos archivos se han incorporado en tu confirmación.
Vamos a hacer un git. git commit -m «cuarto commit».
Y los archivos están comprometidos.
Vamos a empujar el nuevo compromiso a nuestro repositorio en línea.
Entonces, para hacer ese
maestro de origen git push -u y esperar
a que se empuje a nuestro servidor.
Ahora, si vas a tu repositorio Git en línea,
verás que el archivo package.json y
.gitignore se habrían registrado en tu repositorio de Git. Al
ir a mi repositorio de Bitbucket desde la prueba de Git,
verá que cuando mire la fuente, verá que se ha agregado el archivo package.json. Se
ha agregado el archivo.gitignore y se ha registrado el nuevo archivo index.html.
Así que eso completa este ejercicio.
Así que en este ejercicio,
hemos aprendido cómo configurar un archivo package.json usando npm init.
Hemos aprendido cómo instalar un módulo npm.
Y hemos aprendido a usar el módulo lite-server npm para servir
el contenido de nuestra carpeta de proyecto para que se pueda ver en un navegador.
Por lo tanto, esta es una buena manera de servir sus contenidos web,
su aplicación web o su sitio web, para
que pueda ver los cambios en tiempo real reflejados en la ventana de su navegador.
Y luego también vimos cómo podemos configurar el .gitignore para que algunas
carpetas puedan excluirse de ser registradas en nuestro repositorio de Git.
Esto completa este ejercicio.
Entonces, con esto, estoy seguro de que has obtenido un buen manejo sobre
el uso de Git, y luego también los módulos de nodo y nodo.
No te preocupes, vamos a utilizar nodos extensamente, de varias maneras, a
medida que pases por los cursos de esta especialización.
Esto es sólo un comienzo.
[ MÚSICA]