web-dev-qa-db-fra.com

Comment exécuter Node Express server et Angular sur le même port?)

Je suis nouveau sur Node et Angular. J'ai besoin de savoir s'il est possible d'exécuter une application Node Express servant de backend et une Angular frontend sur le même port. J'ai suivi Angular Quickstart tips on angular.io et créé une Node todo application but both run on on port différent, ce qui soulève le problème de Cross Origin Request Blocked Issue.

node.jsangularexpress
12
Swapnil Deo

Pour que Angular et Express s'exécutent sur le même port, j'ai toujours servi mes Angular fichiers de construction par l'application Express elle-même. Vous devriez pouvoir dire à Express pour servir du contenu statique à partir d'un répertoire de construction Angular comme ceci:

app.use(express.static('../accounting-client/dist'));

Cela fonctionnerait si vous aviez une structure de fichiers comme celle-ci et exécutiez serve.js avec Node:

-accounting-server
  -serve.js
-accounting-client
  -dist/*

Vous pouvez personnaliser selon vos besoins en configurant le dossier de construction Angular pour être là où vous en avez besoin, ou utiliser Grunt/Gulp pour déplacer les fichiers vers les dossiers que vous préférez avec une tâche de construction.

Comme mentionné par Yakov, ce n'est pas idéal pour le développement car cela ne fonctionnera pas avec l'actualisation automatique du serveur de développement Angular).

9
SpaceFozzy

Pour que Node.js serve l'application Angular sur le même port, votre application Angular doit être déployée sous le répertoire de votre Node où les ressources statiques sont déployées. Mais en mode dev, il est plus productif de servir vos Angular bundles (afin qu'ils se reconstruisent automatiquement en mémoire au fur et à mesure que vous codez) depuis le serveur de dev, par exemple sur le port 4200, tandis que le Node Node fonctionne sur un autre port, par exemple 8080.

Pour éviter les problèmes d'origine croisée, vous devez configurer un simple fichier proxy dans votre application Angular pour rediriger toutes les demandes de données vers votre serveur Node. Par exemple, créez un fichier proxy-conf.json dans le répertoire racine de votre projet Angular:

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false
  }
}

Cela redirigera toutes les demandes qui ont /api dans l'URL de votre serveur Node, en supposant qu'il s'exécute sur le port 8080. Ensuite, démarrez votre application Angular en utilisant la commande suivante:

ng serve --proxy-config proxy-conf.json

Une requête HTTP dans votre application Angular peut ressembler à ceci:

http.get('/api/products');

Bien sûr, vous devez configurer le /api/products point de terminaison pour les requêtes GET sur votre Node serveur.

10
Yakov Fain

Le fait que vous devez avoir accès à votre projet côté client à partir du projet Express, comme spacefozzy l'a dit, est vrai. mais vous pouvez toujours séparer vos projets.
Pour ce faire, vous pouvez créer un lien symbolique à partir de votre répertoire de projet côté client dans votre répertoire de projet Express:

// while in Express directory
ln -s ~/path/tp/client-side/build name-in-espress-dir

De cette façon, vous pouvez maintenir les projets isolés.

0
Reyraa