[MUSIC]
Ahora que tienes Node.js en tu computadora,
obviamente estás queriendo comenzar a usarlo inmediatamente.
Así que en este ejercicio comenzaremos a usar Node.
Vamos a configurar un archivo package.json para
nuestra carpeta git-test con la que hemos estado trabajando hasta ahora,
entonces vamos a configurar un módulo de nodo llamado como lite-server que
servirá el contenido de nuestra carpeta git-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á a
ver automáticamente las actualizaciones de nuestra ventana
del navegador mientras hacemos cambios en nuestro archivo index.html o
cualquier otro archivo en nuestra carpeta git-test.
El lite-server es algo que vamos a utilizar ampliamente en este y
cursos futuros para poder ver los cambios en tiempo real en
una ventana del navegador mientras edita los archivos de su 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 de
el sitio npmjs.org que especifica qué
es exactamente el papel del archivo package.json.
Entonces, 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 lite-server para
su proyecto, se registrará en el archivo package.json.
Para que posteriormente, también pueda hacer uso de ese paquete en el futuro.
Además, le permite especificar qué versión específica de un paquete
de la que depende su proyecto.
Así que incluso si el paquete del que depende cambia 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 Node.
Y también hace que tus compilaciones sean reproducibles,
lo que significa que cuando compartas tu código con otros,
entonces ellos también pueden hacer la instalación de todos los módulos de Node,
como veremos más adelante en este ejercicio, en su propia computadora.
Entonces, obviamente, su próxima pregunta sería, ¿cómo creamos este archivo package.json?
Si está comenzando un nuevo proyecto, donde desea inicializar el archivo package.json
, simplemente escriba npm init en el símbolo del sistema en la carpeta del proyecto.
Y entonces eso le llevará a través de un conjunto de pasos
que le permitirá configurar su archivo package.json.
Así que vamos a proceder con eso para nuestro proyecto git-test.
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 comando 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 le hagan.
Así que para el nombre del proyecto, simplemente lo dejaremos como el predeterminado, git-test.
Para la versión, lo dejaremos como 1.0.0.
Podemos editar eso 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, voy a decir index.html.
Normalmente, si se trata de un paquete Node, el punto de entrada sería index.js.
Ahora, esta carpeta que hemos configurado es una carpeta basada en index.html,
así que es por eso que simplemente escribo index.html.
Comando de prueba, nada.
repositorio de Git, Si ya habíamos configurado el repositorio de Git en el anterior ejercicio
, automáticamente lo solicitará para usted.
Si no, esto estaría vacío y le daría una opción para escribir la URL del repositorio de Git
en caso de que esté utilizando 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 licencia.
Y luego le mostrará la configuración del archivo package.json en formato JSON.
Así que si estás familiarizado con JSON, esto te parecerá muy, muy familiar.
Así que si esto se ve bien, digamos que está bien.
Y luego eso da como resultado la creación de los archivos package.json.
Así que ahora si enumera el contenido de la carpeta,
verá el archivo package.json en el contenido de la carpeta.
Abra la carpeta git-test 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.
Así que vamos a instalar este módulo nodo llamado como lite-server.
El servidor lite-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 se puede ver el index.html en un navegador.
Así que vamos a configurar el servidor lite-y luego veremos cómo podemos hacer
uso del servidor lite-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 la versión en vivo de tu proyecto de desarrollo web para
que a medida que haces cambios en tu proyecto,
puedes ver los cambios reflejados inmediatamente en el navegador.
Así que este es un muy buen paquete de Node que es muy útil para este propósito.
Así que vamos a configurar el servidor lite-.
Para hacerlo en el símbolo del sistema, escriba npm install.
Así que tenga en cuenta, si desea que npm instale un paquete Node,
así es como lo va a invocar.
Y entonces dirías lite-server.
Y luego también queremos salvar el hecho de que nuestro proyecto está usando el lite-server.
Así que guardaremos esta información en el archivo package.json.
Así que para hacer eso, vamos a escribir —save-dev.
Ahora la opción save-dev especifica que este lite-server se utiliza para la dependencia de desarrollo
para nuestro proyecto.
Si está instalando un módulo Node del que su proyecto depende directamente
, entonces lo instalaría simplemente diciendo —save option.
Así que vamos a seguir adelante e instalarlo.
Y esperas pacientemente a que la instalación tenga lugar.
Tomará todos unos minutos completar su instalación.
Una vez que esté instalado, entonces usted inmediatamente
aviso cuando mira el contenido de su carpeta,
usted notará inmediatamente que hay una carpeta allí creada llamada node_modules.
Ahora, si va a los node_modules verá un montón completo
de otras subcarpetas allí que contienen módulos de nodo que
son necesarios para el módulo de nodo lite-sever y así sucesivamente.
Entonces, hagamos un recorrido rápido por la carpeta node_modules para ver
cuáles son los contenidos de estos.
Al ir a mi carpeta git-test, si vas a la carpeta node_modules,
verás como dije, un montón de subcarpetas allí.
Normalmente no necesita estar renderizado en la carpeta node_modules,
solo existen allí porque son necesarios para el servidor lite-server.
Así que, a medida que navega a través de usted, debe una carpeta de aviso llamado lite-server aquí.
Cuando vaya a la carpeta lite-server, tenga en cuenta en particular la presencia de
el archivo index.js y luego un archivo package.json, y varias otras cosas.
Así que este contenido de la carpeta comprende el módulo de nodo lite-server.
Pero este módulo de nodo lite-server depende de otros módulos de nodo
para proporcionarle alguna funcionalidad adicional.
Así que esa es la razón, cuando instale el módulo de nodo lite-server, a su vez
instalará muchos otros módulos de nodo de los que depende el servidor lite-mismo.
Así que esa es la razón por la que ves esa explosión de
esas carpetas dentro de la carpeta node_modules.
No te preocupes demasiado por ello, la suma total de todo esto no será más de
unas pocas decenas de megabytes.
Por lo tanto, no va a llenar su directorio con esa basura.
Todo esto es esencial para que el nodo pueda ayudarlo.
En caso de que tenga curiosidad sobre el servidor lite-server y cómo funciona, etc.
Siempre puede ir a este sitio de GitHub donde se publica el servidor lite-y
luego buscar la documentación para lite-server.
Te presentaré a todo lo que necesites saber sobre lite-server mientras pasamos por
este curso y los cursos restantes.
Así que no tienes que preocuparte demasiado por ello.
Pero por si tienes curiosidad,
siempre puedes ir a este sitio para obtener más detalles sobre lite-server.
El enlace se proporciona en sus instrucciones de ejercicio y
recursos adicionales parte de esta lección.
Una vez que haya completado eso, luego diríjase al editor,
donde tiene la carpeta, carpeta git-test, abierta y
luego ver el contenido del archivo package.json.
Entonces verá que el archivo package.json contiene exactamente la información que
configuró con su npm en él.
Así que verá el nombre, la versión y el autor del repositorio,
y en particular, tenga en cuenta que esta información aquí dice devDependencies.
Y luego especifica lite-server, y también nota que dice, ^2.2.2.
Entonces, lo que significa que este proyecto en particular depende de
lite-server que es al menos una versión 2.2.2.
Todos de alto nivel.
Así que esto es muy útil para nosotros.
Ahora, ¿por qué necesitamos esta información aquí, más adelante cuando vaya a los otros ejercicios
, notará que cuando almacene esto en un repositorio en línea.
No desea almacenar todo en su carpeta node_modules.
Sólo almacenaremos información de todos los archivos que hemos creado.
La carpeta node_modules siempre se puede recrear mediante
escribiendo nmp install en nuestro símbolo del sistema.
Y luego basado en las dependencias devDependencies y
que se enumeran en el archivo package.json.
Todos los módulos de nodo de los que depende su proyecto se instalarán automáticamente
.
Veremos que más adelante,
sobre cómo usar npm install en este curso.
Ahora, ahora que estamos en el archivo package.json, hagamos un par de ediciones para
que podamos hacer uso del lite-server para servir ese contenido.
Así que, justo aquí en esta opción llamada scripts,
vamos a añadir uno más aquí.
Así que vamos a decir, empezar.
Así que start es un comando que npm soporta
que le permite especificar un montón de cosas que se iniciarán.
Así que más adelante, veremos cómo vamos a hacer uso de esto.
Así que aquí, voy a decir, npm run lite.
Y después de la prueba, voy a
para 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
entonces ahora, nuestro proyecto está configurado.
Así que ahora, si inicias el lite-server,
el contenido de tu carpeta será ahora servido en tu navegador favorito.
Volviendo a nuestro símbolo del sistema y al símbolo del sistema.
Si escribo npm start, ahora ves por qué
puse esa entrada llamada start en mi archivo package.json.
Entonces, si digo npm start, lo que sea que el inicio esté configurado como,
en el archivo package.json.
Especificamos que como npm run lite, y luego lite se especificó como lite-server.
Así que esencialmente, estamos diciendo que inicie el lite-server.
Así que una vez que escriba, npm start, iniciará el lite-server y
servirá el contenido de esta carpeta.
Ahora, ¿cómo se accede al contenido de esta carpeta?
Si desea acceder a él localmente, accederá a él por
especificando la URL como localhost:3000.
Esta es la configuración predeterminada para el servidor lite-server.
Además, esto debería abrir automáticamente
la ventana del navegador de su navegador predeterminado y
luego mostrar el contenido de index.html en esa ventana del navegador.
Aquí, puedes ver que he abierto mi editor y
mi ventana del navegador dirigida a localhost: 3000
simultáneamente lado a lado.
Para que podamos ver cómo la ventana del navegador reflejará inmediatamente
cualquier cambio que hagamos en nuestros archivos en la carpeta git-test.
Así que déjame ir a index.html.
Y luego por el bien del espacio, voy a darle la vuelta.
Y entonces aquí se puede ver que este es el contenido de esto.
Y ahora permítanme añadir en
un párrafo más,
Y guardar los cambios.
Y luego notarás inmediatamente que el cambio que
hice en mi archivo index.html se refleja en mi navegador.
Esto proporciona una manera muy agradable de poder observar, en tiempo real,
los cambios que haces en tu código siendo reflejados en tu navegador.
Así que cuando usted está trabajando en un proyecto, sería muy apropiado que
usted sea capaz de ver los cambios inmediatamente.
Así que cuando haces un cambio y guardas el archivo,
el código modificado se carga inmediatamente en tu navegador para que
puedas ver inmediatamente el cambio reflejado en la ventana de tu navegador.
Esta es una herramienta muy útil mientras estás haciendo el desarrollo de tu proyecto.
Esa es la razón por la que te presenté al 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 git,
para que la comprobación de nuevo,
veremos que ya tenemos tres commits en nuestro repositorio git.
Y este repositorio git ya está en nuestro repositorio git en línea,
que hemos configurado en el ejercicio anterior, ya sea en bitbucket o GitHub.
Mi carpeta git-test está sincronizada con mi repositorio bitbucket
en este ejercicio particular.
Así que 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 de módulos de nodo siempre se puede recrear
escribiendo npminstall en el símbolo del sistema.
Así que es por eso que, cuando subes el contenido de
tu carpeta a un repositorio git en línea o
cuando haces un commit de la carpeta a tu repositorio git,
no quieres que la carpeta de módulos de notas o todas las subcarpetas
debajo de ella se incluyan en el, Commit.
Entonces, ¿cómo excluimos algunas carpetas o
algunos archivos de nuestra carpeta de ser registrados en nuestro repositorio git?
Así que para hacer eso, vamos a configurar un archivo llamado .gitignore.
Así que ese es el nombre del archivo, .gitignore.
Así que para crear este archivo.gitignore, vamos a ir 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
entonces el resto del nombre es G-I-T-I-G-N-O-R-E.
Así que esto es muy,
muy importante que configure el fille con exactamente el 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 del módulo del nodo va a ser excluida de nuestro commit de git.
Así que una vez que creo ese archivo.gitignore y
luego agregue módulos de nodo en el archivo.gitignore, guardemos los cambios.
Y luego ahora haremos un commit del estado actual de nuestro proyecto
en nuestro repositorio git.
Espero que recuerdes tus comandos git.
Hagamos un estado git, y luego cuando lo hagas,
notarás inmediatamente que tienes 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 git.
Y luego ves que todos estos nuevos archivos se han registrado en tu confirmación.
Hagamos un commit git, git commit -m «cuarto commit
». Y los archivos están comprometidos.
Empujemos el nuevo compromiso a nuestro repositorio en línea.
Así que para hacer eso, git push
-u origin master.
Y esperar a que sea empujado a nuestro servidor.
Ahora, si va a su repositorio git en línea,
verá que el archivo package.json y
.gitignore se habrían registrado en su repositorio git.
Ir a mi repositorio bitbucket para el git-test.
Verá que cuando miro la fuente,
verá que el archivo package.json ha sido agregado,
se ha agregado el .gitignore, y el nuevo archivo index.html ha sido registrado.
Así que eso completa este ejercicio.
Así que en este ejercicio,
hemos aprendido cómo configurar un archivo package.json usando npm minute.
Hemos aprendido cómo instalar un módulo npm.
Y hemos aprendido a usar el módulo npm servidor lite para servir
el contenido de nuestra carpeta de proyecto para que pueda ser visto en un navegador.
Así que esta es una buena manera de servir sus contenidos,
su aplicación web o su sitio web para
que pueda ver cambios en tiempo real reflejados en la ventana de su navegador.
Y luego, también vimos cómo pueden configurar el .gitignore para que algunas carpetas
puedan excluirse de ser archivadas en nuestro repositorio git.
Esto completa este ejercicio.
Entonces, con esto, estoy seguro de que habrías obtenido un buen manejo en
el uso de tanto git como módulos de nodo y nodo.
No te preocupes.
Vamos a utilizar el nodo ampliamente de varias maneras
a medida que vaya a través de los cursos de esta especialización.
Esto es sólo un comienzo.
[MÚSICA]