1
votes

Comment puis-je démarrer mon serveur de nœuds et réagir à l'application en même temps?

J'ai créé une API en utilisant express et je veux l'utiliser dans mon serveur frontal, le problème est que pour que mon API fonctionne, je dois constamment l'exécuter sur un serveur. Cependant, je ne peux pas faire cela simultanément en exécutant mon application react. Ma question est donc de savoir comment démarrer mon serveur React et mon API en même temps?

P.S. J'ai essayé simultanément mais je ne sais pas comment le faire fonctionner, voici un exemple de code de mon package.json

    "name": "app",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
    "@material-ui/core": "^4.1.1",
    "@material-ui/icons": "^4.2.0",
    "axios": "^0.19.0",
    "concurrently": "^4.1.0",
    "express": "^4.17.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  },
     "scripts": {
     "start": "node src/connection",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "react": "react-scripts start",
     "dev": "concurrently \"npm start\" \"npm react\""
     },
     "proxy": "http://localhost:3000",
    "eslintConfig": {
    "extends": "react-app"
    },
    "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": []
 }
}```

reactjs node.js concurrently

1 commentaires

Copie possible de Comment puis-je exécuter plusieurs scripts npm en parallèle? < / a>

3 Réponses :

2
votes

Installez le package npm-run-all, qui vous aide à exécuter plusieurs scripts. Vous pouvez vous référer au lien ci-dessous:

https://www.npmjs.com/package/npm-run-all

Après avoir installé ce package, Dans votre package.json, ajoutez le script comme ceci:

"scripts": {    
  "start-js": "react-scripts start",
  "backend-start": "NODE_ENV=production node node_api/server.js",
  "start": "concurrently \"npm-run-all -p backend-start start-js\"",
  "build": "npm-run-all build-css && react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

Ici, lorsque vous exécutez la commande "npm start", il lance d'abord le script "backend-start" qui démarre votre serveur backend puis il commence à réagir.

Il suffit de changer le chemin dans le script "backend-start". remplacez "node_api / server.js" par votre fichier de démarrage du nœud de chemin

0 commentaires

3
votes

En 5 étapes:

Installer le package npm i --s simultanément
Ajoutez le script ci-dessous dans le package.json du nœud / serveur / backend .json

    "client": "npm start --prefix client",
    "clientinstall": "npm install --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client"

Assurez-vous d'avoir fourni le chemin correct pour le client et le serveur
Exécutez "npm run dev"
Sourire

0 commentaires

0
votes

Le package npm-run-all vous aidera à accomplir cette tâche.

Il existe une option qui peut être définie dans le package.json de Create React App qui transmet par proxy les requêtes non text / html à un back-end alternatif. Vous pouvez utiliser cette fonctionnalité pour créer un proxy vers des applications exécutées ailleurs, en utilisant cela, vous pourrez exécuter un serveur dans le projet React lui-même.

Ajoutez la ligne ci-dessous au fichier package.json: "proxy" : "http: // localhost: 3001",

Modifiez la section scripts comme ci-dessous:

{
          "name": "frontend_backend",
          "version": "0.1.0",
          "private": true,
          "dependencies": {
            "@testing-library/jest-dom": "^5.11.8",
            "@testing-library/react": "^11.2.2",
            "@testing-library/user-event": "^12.6.0",
            "nodemon": "^2.0.6",
            "npm-run-all": "^4.1.5",
            "react": "^17.0.1",
            "react-dom": "^17.0.1",
            "react-scripts": "4.0.1",
            "web-vitals": "^0.2.4"
          },
          "proxy": "http://localhost:3001",
          "scripts": {
            "start": "react-scripts start",
            "server": "node-env-run server --exec nodemon",
            "dev": "run-p server start",
            "build": "react-scripts build",
            "test": "react-scripts test",
            "eject": "react-scripts eject"
          },
          "eslintConfig": {
            "extends": [
              "react-app",
              "react-app/jest"
            ]
          },
          "browserslist": {
            "production": [
              ">0.2%",
              "not dead",
              "not op_mini all"
            ],
            "development": [
              "last 1 chrome version",
              "last 1 firefox version",
              "last 1 safari version"
            ]
          }
        }

Enfin votre fichier package.json ressemblera à ceci.

    "scripts": {
    "start": "react-scripts start",
    "server": "node-env-run server --exec nodemon",
    "dev": "run-p server start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

Maintenant, utilisez npm run dev pour exécuter l'application. (Vous pouvez remplacer " dev " par tout ce que vous voulez, par exemple: "app": "run-p server start" , puis utiliser npm run app code> commande pour exécuter l'application)

0 commentaires