Comment créer un serveur localhost pour exécuter un projet AngularJS

J'ai utilisé Xampp et JetBrain WebStorm pour exécuter un projet AngularJS. Mais c'est compliqué et peu performant, y a-t-il un autre moyen d'exécuter un projet AngularJS?

Si vous utilisez le serveur http node.js, c'est super facile.

cd dans votre dossier de projet et

npx http-server -o 

# or, install it separately so you don't need npx
npm install -g http-server
http-server -o 

-oconsiste à ouvrir le navigateur sur la page. Exécutez http-server --helppour afficher d'autres options telles que la modification du numéro de port

Vous n'avez pas node?

ces autres one-liners pourraient être plus faciles si vous n'avez pas node/ npminstallé.

Par exemple, python est préinstallé sur la plupart des systèmes, donc les serveurs python de John Doe ci-dessous seraient plus rapides.

MacOS est installé avec ruby, c'est donc une autre option simple si vous utilisez un Mac: ruby -run -ehttpd . -p8000et ouvrez votre navigateur sur http://localhost:8000.

Python a une commande intégrée spécifiquement pour faire tourner un serveur Web:

Python3.x:

python -m http.server 8000

Autres versions:

python -m SimpleHTTPServer 8000

Lancerait un serveur Web sur le port 8000

(Python est une condition préalable à cela; si vous n'avez pas installé python, les autres réponses peuvent être plus faciles)

Vous pouvez commencer par installer Node.js à partir du terminal ou de cmd:

apt-get install nodejs-legacy npm

Ensuite, installez les dépendances:

npm install

Ensuite, démarrez le serveur:

npm start

cd <your project folder>(où se trouve le code déployable de votre angularjs)

sudo npm install serve -g

servir

Vous pouvez accéder à votre page à

localhost: 3000 ou adresse IP: 3000

J'utilise:

• exprimer et
• Morgan
  
  

Installez Node.js. et npm. npm est installé avec Node.js

Placé dans le répertoire racine du projet

$ cd <your_angularjs_project>

La commande suivante crée package.json

$ npm init

Installez express ==> Rapide, sans opinion, minimaliste pour le nœud:

$ npm install express --save

Installez morgan ==> middleware de journalisation des requêtes HTTP pour node.js

$ npm install morgan --save

créer un fichier server.js

ajoutez le code suivant dans le fichier server.js

// Required Modules
var express    = require("express");
var morgan     = require("morgan");
var app        = express();

var port = process.env.PORT || 3002;

app.use(morgan("dev"));
app.use(express.static("./"));

app.get("/", function(req, res) {
    res.sendFile("./index.html"); //index.html file of your angularjs application
});

// Start Server
app.listen(port, function () {
    console.log( "Express server listening on port " + port);
});

Enfin, exécutez votre projet AngularJS sur le serveur localhost:

$ node server.js

Utilisez le package npm du serveur Web local.

https://www.npmjs.com/package/local-web-server

$ npm install -g local-web-server
$ cd <your-app-folder>
$ ws

En outre, vous pouvez exécuter

$ ws -p 8181

-p définit le port que vous souhaitez utiliser

Après cela, accédez simplement à votre navigateur et accédez à http: localhost: 8181 /

• Courir

ng servir

Cette commande s'exécute dans votre terminal après votre emplacement dans le dossier du projet, comme ~/my-app$

• Ensuite, exécutez la commande - cela montrera que le serveur de développement URl NG Live écoute sur localhost:4200

• Ouvrez votre navigateur sur http: // localhost: 4200

Une application angulaire peut être déployée à l'aide de n'importe quel serveur Web sur localhost. Les options ci-dessous décrivent les instructions de déploiement pour plusieurs déploiements de serveurs Web possibles en fonction de vos besoins de déploiement.

Microsoft Internet Information Services (IIS)

1. Windows IIS doit être activé

   1.1. Sous Windows, accédez au Panneau de configuration et cliquez sur Ajouter ou supprimer des programmes.

   1.2. Dans la fenêtre Ajouter ou supprimer des programmes, cliquez sur Ajouter / supprimer des composants Windows.

   1.3. Cochez la case Services Internet (IIS), cliquez sur Suivant, puis sur Terminer.

   1.4. Copiez et extrayez le fichier Zip Angular Application dans le répertoire racine du serveur Web: C: \ inetpub \ wwwroot

2. L'application Angular est désormais accessible via l'URL suivante: http: // localhost: 8080

Serveur Web léger NPM

1. Installer un serveur Web léger 1.1. Téléchargez et installez npm à partir de: https://www.npmjs.com/get-npm 1.2. Une fois que npm a été installé, ouvrez une invite de commande et tapez: npm install -g http-server 1.3. Extraire le fichier Angular Zip
2. Pour exécuter le serveur Web, ouvrez une invite de commande et accédez au répertoire où vous avez extrait le Angular précédemment et tapez: http-server
3. L'application Angular Application est désormais accessible à l'aide de l'URL suivante: http: // localhost: 8080

Serveur Web Apache Tomcat

1. Installation d'Apache Tomcat version 8 1.1. Téléchargez et installez Apache Tomcat à partir de: https://tomcat.apache.org/ 1.2. Copiez et extrayez le fichier Zip Angular Application dans le répertoire racine du serveur Web C: \ Program Files \ Apache Software Foundation \ Tomcat 7.0 \ webapps
2. L'application Angular est désormais accessible à l'aide de l'URL suivante: http: // localhost: 8080

"En supposant que nodejs soit installé",

mini-http est un outil de ligne de commande assez simple pour créer un serveur http,
installer le package globalement npm install mini-http -g
puis utiliser votre cmd (terminal) mini-http -p=3000dans le répertoire de votre projet Et boum! vous avez créé un serveur sur le port 3000 maintenant allez vérifier http: // localhost: 3000

Remarque: la spécification d'un port n'est pas nécessaire, vous pouvez simplement exécuter mini-httpou mhdémarrer le serveur

Si vous êtes un gars java, placez simplement votre dossier angulaire dans le dossier de contenu Web de votre application Web et déployez-le sur votre serveur tomcat. Super facile!

En supposant que node.js soit déjà installé, vous pouvez utiliser la synchronisation du navigateur pour les tests de navigateur synchronisés.

Si vous avez utilisé Visual Studio Community ou toute autre édition pour votre projet angulaire, accédez au dossier du projet, tapez d'abord

C: \ Dossier de projet> npm install -g http-server Vous verrez comme suit: + [email protected] ajouté 25 packages dans 4.213s

Tapez ensuite C: \ Project Folder> http-server –o

Vous verrez que votre application apparaît automatiquement à l' adresse http://127.0.0.1:8080/

Vous pouvez également configurer l'environnement dans le code Visual Studio. Exécutez Ctrl + Maj + P, puis tapez ctr dans la zone qui apparaît et sélectionnez les tâches: Configurer Task Runner, puis modifiez le fichier task.json en ceci:, { "version": "0.1.0", "command": "explorer", "windows": { "command": "explorer.exe" }, "args": ["index.html"] }enregistrez vos modifications, puis sélectionnez votre fichier index.html et tapez Ctrl + Maj + B. Cela ouvrira le projet avec votre navigateur par défaut.