web-dev-qa-db-fra.com

Comment faire une création automatique create-react-app?

J'utilise create reapp depuis un certain temps. Le chargement automatique de 'npm start' ou 'yarn start' fonctionne bien, mais j'ai un autre problème. Actuellement, je lance l'application sur un serveur express via le dossier de construction, et j'utilise 'npm run build' car express sert les fichiers générés. Il existe de nombreux appels d'api nécessitant que l'application soit exécutée de cette manière. Maintenant, il devient fastidieux de faire manuellement «npm run build» à chaque fois. Existe-t-il un moyen simple de contourner le problème pour construire automatiquement, comme pour 'npm start', sans éjecter l'application (je sais que je peux éjecter et configurer Webpack pour le faire, mais je ne veux pas suivre cette voie)? Merci

javascriptnode.jsreactjsexpresscreate-react-app
6
Sean sean

Malheureusement, c'est quelque chose que vous devrez faire vous-même. Vous pouvez utiliser un outil tel que npm-watch pour accomplir ce que vous voulez:

Installez npm-watch

npm i --save-dev npm-watch

package.json

{
  "name": "react-app",
  "version": "0.1.0",
  "private": false,
  "devDependencies": {
    "npm-watch": "^0.1.8",
    "react-scripts": "0.9.5",
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "watch": "npm-watch"
  },
  "watch": {
    "build": "src/"
  }
}

Ensuite, utilisez simplement npm run watch pour démarrer npm-watch afin qu’il puisse reconstruire vos actifs lors de modifications. 

10
Brian

Bien que cela ne réponde pas vraiment à votre question, vous ne devriez pas utiliser npm run build en développement . Non seulement les reconstructions sont lentes, mais elles ignorent également les avertissements React importants en termes de performances et de taille. Vous finirez par vous gratter la tête et obtenir beaucoup moins de détails dans les avertissements.

Si vous avez juste besoin de faire des requêtes d'API avec Express, utilisez la fonction proxy qui vous permet de proxyer les requêtes d'API de npm start sur votre serveur. Il existe également un tutoriel avec un référentiel correspondant montrant comment faire cela.

Bien sûr, en production, vous devriez utiliser la version produite par npm run build. Mais il vous suffirait de l'exécuter avant le déploiement.

7
Dan Abramov

j'utilise également l'application de création de réaction, c'est ainsi que j'ai modifié mes scripts pour exécuter un projet de développement (Windows), créer la version de production et exécuter la version de production.

"scripts": {
    "start": "set PORT=8080 && react-scripts start",
    "build": "react-scripts build",
    "deploy": "set PORT=8008 && serve -s build"
  }

npm start: exécute le projet pour le développement (windows) npm build-script: construit la version de production npm run-script deploy: exécute la version de production

  • npm install -g sert avant d'exécuter npm run-script deploy.
0
Viraj

Exécutez votre backend sur un autre port. Si vous utilisez Express, modifiez le fichier bin/www. 

var port = process.env.PORT || 9000

et dans votre dossier/src, créez un fichier de configuration dans lequel vous pourrez configurer votre hôte api, vos routes, vos paramètres, etc.

//config/index.js
export const Config = {
   protocol: 'http',
   Host: window.location.hostname, //or the environment variable
   params: '/api/',
   api: {post:'/posts/'}
}

et dans votre composant d'appel ou où que ce soit votre appelant de l'api

import {Config} from '../config'

axios.get(`${Config.protocol}${Config.Host}${Config.params}${Config.api.posts}${some id i guess}`)
0
KornholioBeavis