lite server

serveur lite

Development léger uniquement le serveur de nœuds qui sert une application Web, l'ouvre dans le navigateur, actualise lorsque HTML ou le changement JavaScript, injecte les modifications CSS à l'aide de sockets et possède une page de secours lorsqu'un itinéraire n'est pas trouvé.

Pourquoi

Browsersync fait la plupart de ce que nous voulons dans un serveur de développement léger super rapide. Il sert le contenu statique, détecte les modifications, rafraîchit le navigateur et offre de nombreuses personnalisations.

Lors de la création d'un spa, il y a des itinéraires qui ne sont connus que du navigateur. Par exemple, /customer/21 peut être une voie côté client pour une application angulaire. Si cette route est entrée manuellement ou liée directement en tant que point d'entrée de l'application angulaire (aka un lien profond), le serveur statique recevra la demande, car Angular n'est pas encore chargé. Le serveur ne trouvera pas de correspondance pour l'itinéraire et renvoie donc un 404. Le comportement souhaité dans ce cas est de renvoyer l' index.html (ou quelle que soit la page de départ de l'application que nous avons définie). Browsersync ne permet pas automatiquement une page de secours. Mais cela permet un middleware personnalisé. C'est là que lite-server intervient.

lite-server est un simple emballage personnalisé autour de BrowSersync pour faciliter les spas.

Installation et utilisation

La méthode d'installation recommandée est une installation de NPM locale pour votre projet:

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

... et ajoutez une entrée "script" dans le fichier package.json de votre projet:

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

Avec la saisie de script ci-dessus, vous pouvez ensuite démarrer lite-server via:

npm run dev

D'autres options pour exécuter les binaires NPM installés localement sont discutés dans cette question de débordement de pile: Comment utiliser le package installé localement dans Node_Modules

En utilisant à la volée

Lite-Server peut être utilisé avec npx

npx lite-server

Installation mondiale

Lite-Server peut également être installé dans le monde entier, s'il est préféré:

npm install --global lite-server

# To run:
lite-server

Configuration personnalisée

Le comportement par défaut sert à partir du dossier actuel, ouvre un navigateur et applique une imite HTML5 vers ./index.html .

Lite-Server utilise BrowSersync et permet des remplacements de configuration via un fichier bs-config.json ou bs-config.js local dans votre projet.

Vous pouvez fournir un chemin personnalisé vers votre fichier de configuration via -c ou --config= Options de temps d'exécution:

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

Par exemple, pour modifier le port du serveur, les chemins de fichier regardés et le répertoire de base pour votre projet, créez un bs-config.json dans le dossier de votre projet:

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

Vous pouvez également fournir un chemin personnalisé vers votre répertoire de base --baseDir= Options de temps d'exécution:

lite-server --baseDir= " dist "

Un exemple plus compliqué avec des modifications du middleware du serveur peut être effectué avec un fichier bs-config.js , qui nécessite le module.exports = { ... }; syntaxe:

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

Le fichier bs-config.js peut également exporter une fonction qui reçoit l'instance de BrowsersYnc de BrowSeSyNC lite-server comme seul argument. Bien qu'il ne soit pas requis, la valeur de retour de cette fonction sera utilisée pour étendre la configuration par défaut du serveur 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 ,
        } ) ,
      } ,
    } ,
  } ;
} ;

Remarque: Gardez à l'esprit que lorsque l'utilisation du middleware remplace, le module middleware spécifique doit être installé dans votre projet. Pour l'exemple ci-dessus, vous devrez faire:

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

... Sinon, vous obtiendrez une erreur similaire à:

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

Un autre exemple: pour supprimer l'une des midlewares par défaut, telles que connect-logger , vous pouvez définir son index de tableau sur null :

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

Une liste de l'ensemble des options de Browsersync peut être trouvée dans ses documents: http://www.browsersync.io/docs/options/

Essai

Lorsque vous utilisez lite-server pour exécuter des tests de bout en bout, nous ne voulons peut-être pas enregistrer verbosément. Nous pouvons également vouloir empêcher le navigateur de s'ouvrir. Ces options dans le bs-config.js feront taire tout le journal de lite-server :

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

Problèmes connus

CSS avec Angular 2 est incorporé, donc même si BrowseSync détecte la modification du fichier en CSS, il n'injecte pas le fichier via des sockets. En tant que solution de contournement, injectChanges par défaut est false .

Contributif

1. Fork et le cloner
2. Installation des dépendances: npm install
3. Créer une succursale de fonctionnalité: git checkout -b new-feature
4. Commissez les modifications: git commit -am 'Added a feature'
5. Exécuter l'analyse de code statique et les tests unitaires: npm test
6. Pousser vers la branche distante: git push origin new-feature
7. Créer une nouvelle demande de traction

Licence

Code publié sous la licence MIT.