lite server

servidor de lite

Desarrollo liviano Solo servidor de nodos que sirve una aplicación web, la abre en el navegador, se actualiza cuando HTML o JavaScript cambian, inyecta cambios CSS usando sockets y tiene una página respaldo cuando no se encuentra una ruta.

Por qué

BrowserSync hace la mayor parte de lo que queremos en un servidor de desarrollo liviano súper rápido. Sirve el contenido estático, detecta cambios, actualiza el navegador y ofrece muchas personalizaciones.

Al crear un spa, el navegador solo conoce las rutas. Por ejemplo, /customer/21 puede ser una ruta del lado del cliente para una aplicación angular. Si esta ruta se ingresa manualmente o se vincula directamente como el punto de entrada de la aplicación Angular (también conocida como un enlace profundo), el servidor estático recibirá la solicitud, porque Angular aún no está cargado. El servidor no encontrará una coincidencia para la ruta y, por lo tanto, devolverá un 404. El comportamiento deseado en este caso es devolver el index.html (o cualquier página inicial de la aplicación que hemos definido). BROWSERSYNC no permite automáticamente una página de respaldo. Pero sí permite el middleware personalizado. Aquí es donde interviene lite-server .

lite-server es un envoltorio personalizado simple alrededor de Browsersync para facilitar el servicio de spas.

Instalación y uso

El método de instalación recomendado es una instalación local de NPM para su proyecto:

npm install lite-server --save-dev
yarn add lite-server --dev # or yarn

... y agregue una entrada de "script" dentro del archivo package.json de su proyecto:

 # Inside package.json...
  "scripts" : {
    "dev" : " lite-server "
  },

Con la entrada de script anterior, puede comenzar lite-server a través de:

npm run dev

Otras opciones para ejecutar binarios NPM instalados localmente se analizan en esta pregunta de desbordamiento de pila: cómo usar el paquete instalado localmente en node_modules

Usando sobre la mosca

Lite-servidor se puede usar con npx

npx lite-server

Instalación global

Lite-servidor también se puede instalar a nivel mundial, si se prefiere:

npm install --global lite-server

# To run:
lite-server

Configuración personalizada

El comportamiento predeterminado sirve desde la carpeta actual, abre un navegador y aplica una ruta HTML5 Fallback a ./index.html .

Lite-Server usa BrowserSync y permite las anulaciones de configuración a través de un archivo local bs-config.json o bs-config.js en su proyecto.

Puede proporcionar ruta personalizada a su archivo de configuración a través de -c o --config= opciones de tiempo de ejecución:

lite-server -c configs/my-bs-config.js

Por ejemplo, para cambiar el puerto del servidor, las rutas de archivo observadas y el directorio base para su proyecto, cree un bs-config.json en la carpeta de su proyecto:

{
  "port" : 8000 ,
  "files" : [ " ./src/**/*.{html,htm,css,js} " ],
  "server" : { "baseDir" : " ./src " }
}

También puede proporcionar una ruta personalizada a su directorio base --baseDir= Opciones de tiempo de ejecución:

lite-server --baseDir= " dist "

Un ejemplo más complicado con modificaciones al middleware del servidor se puede hacer con un archivo bs-config.js , que requiere el module.exports = { ... }; sintaxis:

 module . exports = {
  server : {
    middleware : {
      // overrides the second middleware default with new settings
      1 : require ( 'connect-history-api-fallback' ) ( {
        index : '/index.html' ,
        verbose : true ,
      } ) ,
    } ,
  } ,
} ;

El archivo bs-config.js también puede exportar una función que recibe la instancia de BrowserSync de servidor Lite como su único argumento. Si bien no es necesario, el valor de retorno de esta función se utilizará para extender la configuración predeterminada del servidor Lite.

 module . exports = function ( bs ) {
  return {
    server : {
      middleware : {
        // overrides the second middleware default with new settings
        1 : require ( 'connect-history-api-fallback' ) ( {
          index : '/index.html' ,
          verbose : true ,
        } ) ,
      } ,
    } ,
  } ;
} ;

Nota: Tenga en cuenta que cuando el uso de middleware anula el módulo de middleware específico debe instalarse en su proyecto. Para el ejemplo anterior, deberá hacer:

npm install connect-history-api-fallback --save-dev

... de lo contrario obtendrá un error similar a:

Error: Cannot find module ' connect-history-api-fallback '

Otro ejemplo: para eliminar uno de los MiddleWares predeterminados, como connect-logger , puede establecer su índice de matriz en null :

 module . exports = {
  server : {
    middleware : {
      0 : null , // removes default `connect-logger` middleware
    } ,
  } ,
} ;

Se puede encontrar una lista de todo el conjunto de opciones de BrowserSync en sus documentos: http://www.browsersync.io/docs/options/

Pruebas

Al usar lite-server para ejecutar pruebas de extremo a extremo, es posible que no queramos registrar muy bien. Es posible que también queramos evitar que el navegador se abra. Estas opciones en el bs-config.js silenciarán todas las registro de lite-server :

  open: false
  logLevel: "silent" ,
  server : {
    middleware : {
      0 : null
    }
  } 

Problemas conocidos

CSS con Angular 2 está incrustado, por lo tanto, aunque BrowserserSync detecta el cambio de archivo a CSS, no inyecta el archivo a través de sockets. Como una solución, injectChanges predeterminada a false .

Que contribuye

1. Tenedor y clonarlo
2. Dependencias de instalación: npm install
3. Crear una rama de características: git checkout -b new-feature
4. Cambios de confirmación: git commit -am 'Added a feature'
5. Ejecutar el análisis del código estático y las pruebas unitarias: npm test
6. Push a la rama remota: git push origin new-feature
7. Crear una nueva solicitud de extracción

Licencia

Código publicado bajo la licencia MIT.