reactjsmuperita

ReactJS mu Perita (IV).LiteServer y React

Instalando lite-server

¿Qué es lite-server?

lite-server es un servidor web muy ligero que soporta SPA o Single Page Apps. Realmente hace mucho más que eso pero para pequeños desarrollos puede ser una herramienta ideal.

Instalando lite-server

Dentro del directorio donde se desee instalar lite-server habrá que ejecutar el siguiente comando:

npm init -y

Con el parámetro -y le decimos al programa que utilice los valores por defecto de cualquier parámetro. En la mayoría de las ocasiones se puede obviar este parámetro.
Con npm init se inicializará un proyecto vacío.

Es el momento de añadir lite-server al proyecto. Por lo tanto hay que ejecutar el siguiente comando:

npm install –save-dev lite-server

El cual instala el paquete lite-server y añade a las dependencias del proyecto (devDependencies) del paquete package.json el siguiente contenido:

“devDependencies”: {
“lite-server”: “^2.4.0″
}

En este caso la versión de lite-server es la 2.4.0 pero estas cifras pueden variar dependiendo de la versión instalada.

packagejson

También habrá que echar un vistazo a la carpeta node_modules para ver el contenido del servidor lite-server y las dependencias allí instaladas.

instalar liteserver

Ejecutando lite-server

Es el momento de modificar el fichero package.json. Habrá que reemplazar la entrada scripts con el siguiente contenido para poder iniciar el servidor web lite-server:

“scripts”: {
“start”: “lite-server”
},

En este momento el fichero package.json tendrá el siguiente aspecto:

fichero package json

Para ejecutar lite-server y generar la página web index.html creada habrá que ejecutar el siguiente comando:

npm start

npm start

Al ejecutar este comando se puede apreciar que el navegador por defecto del equipo se activa y se muestra la página web index.html:

node navegador

Si quieres más información de cómo funciona lite-server accede al siguiente recurso web:
https://medium.freecodecamp.org/how-you-can-use-lite-server-for-a-simple-development-web-server-33ea527013c9
Ejercicio:
Investiga que tienes que cambiar en el fichero json para que los cambios se reflejen (se sincronicen) en un repositorio externo de git. Tendrás que cambiar algo en el npm init.
solución:
En el fichero json quedará una entrada parecida a la siguiente:
“repository”: {
“type”: “git”,
“url”: “tu repositorio git”
},
Ejercicio:
Imagine que se quiere que no se sincronice la carpeta node_modules. ¿Qué hay que hacer?
solución:
Crear un fichero .gitignore y añadir en cada línea los archivos o carpetas que no se desean sincronizar.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>