Как запустить приложение React / Redux в режиме разработки? - PullRequest
Новая
       6

Как запустить приложение React / Redux в режиме разработки?

0 голосов
/ 06 сентября 2018

Я абсолютный новичок в разработке интерфейса Мне дали проект, который использует ReactJS и Redux.

Я использую код Visual Studio, и вопрос заключается в том, как запустить проект в режиме разработки и посмотреть, как работает код.

Я пытался npm run. Я вижу ниже. Как запустить проект в режиме разработки и отладки. Пожалуйста, помогите. 

npm run
Scripts available in idealreactseed via `npm run-script`:
  run:dev
    better-npm-run run:dev
  run:dev:windows
    better-npm-run run:dev:windows
  run:local:dev
    better-npm-run run:local:dev
  run:host:dev
    better-npm-run run:host:dev
  build:dist
    better-npm-run build:dist

У меня есть эти сценарии в моем package.json. 

"scripts": {
    "run:dev": "better-npm-run run:dev",
    "run:dev:windows": "better-npm-run run:dev:windows",
    "run:local:dev": "better-npm-run run:local:dev",
    "run:host:dev": "better-npm-run run:host:dev",
    "build:dist": "better-npm-run build:dist"
  },
  "betterScripts": {
    "run:host:dev": {
      "command": "./node_modules/.bin/webpack-dev-server --config ./webpack/webpack.dev.config.js --host 0.0.0.0",
      "env": {
        "NODE_ENV": "development",
        "API_HOST": "http://104.236.17.8",
        "API_PORT": 5000
      }
    },
    "run:local:dev": {
      "command": "./node_modules/.bin/webpack-dev-server --config ./webpack/webpack.dev.config.js",
      "env": {
        "NODE_ENV": "development",
        "API_HOST": "http://127.0.0.1",
        "API_PORT": 5000
      }
    },
    "run:dev": {
      "command": "./node_modules/.bin/webpack-dev-server --config ./webpack/webpack.dev.config.js",
      "env": {
        "NODE_ENV": "development",
        "API_HOST": "http://104.236.17.8",
        "API_PORT": 5000
      }
    },
    "run:dev:windows": {
      "command": ".\\node_modules\\.bin\\webpack-dev-server --config .\\webpack\\webpack.dev.config.js",
      "env": {
        "NODE_ENV": "development",
        "API_HOST": "http://104.236.17.8",
        "API_PORT": 5000
      }
    }

Вот структура проекта. Ценю вашу помощь. 

C:.│   .gitignore
│   autoMerge.sh
│   deploy.sh
│   index.html│   index.js
│   package-lock.json│   package.json
│   README.md
│   routes.js
│   store.js│
├───assets
│   └───images
│           dummy.jpg
│           favicon-32x32.png
│           favicon.ico
│           logosmall.png
│           logowithouttitle-cropped.png
│           logowithouttitle.png
│
├───src
│   ├───api
│   │       article.js
│   │       auth.js
│   │       comments.js
│   │       upload.js
│   │       user.js
│   │
│   ├───components
│   │       ArticleTile.js
│   │       FacebookSocialLoginButton.js
│   │       GoogleSocialLoginButton.js
│   │       Header.js
│   │       index.js
│   │       InputPreview.js
│   │       ListExampleSelectable.js
│   │       LoadingButton.js
│   │       Logo.js
│   │       Notification.js
│   │       UserProfileHeader.js
│   │
│   ├───constants
│   │       index.js
│   │
│   ├───containers
│   │       About.js
│   │       AccountSettings.js
│   │       App.js
│   │       ArticleDetail.js
│   │       Author.js
│   │       ForgotPassword.js
│   │       Home.js
│   │       index.js
│   │       Login.js
│   │       NewStory.js
│   │       ResetPassword.js
│   │       ScrollToTop.js
│   │       SearchContainer.js
│   │       Signup.js
│   │       VerifyEmail.js
│   │
│   ├───redux
│   │   ├───actions
│   │   │   │   article.js
│   │   │   │   auth.js
│   │   │   │   comments.js
│   │   │   │   index.js
│   │   │   │   message.js
│   │   │   │   upload.js
│   │   │   │   user.js
│   │   │   │
│   │   │   └───actionTypes
│   │   │           article.js
│   │   │           auth.js
│   │   │           comments.js
│   │   │           common.js
│   │   │           index.js
│   │   │           message.js
│   │   │           user.js
│   │   │
│   │   ├───reducers
│   │   │       article.js
│   │   │       auth.js
│   │   │       comments.js
│   │   │       index.js
│   │   │       message.js
│   │   │       user.js
│   │   │
│   │   └───types
│   │           message.js
│   │
│   └───utils
│           index.js
│
├───style
│       articlePage.less
│       breakPoints.less
│       common.less
│       home.less
│       index.less
│       login.less
│       mixins.less
│       settings.less
│       signup.less
│       variables.less
│
└───webpack
        webpack.common.config.js
        webpack.dev.config.js
        webpack.prod.config.js

1 Ответ

0 голосов
/ 06 сентября 2018

Вам нужно что-то вроде: 

"scripts": {
   "dev:hot": "webpack-dev-server -d --config 
   ./webpack.devel.config.js --hot --inline --progress --colors" 
   }

в вашем файле package.json. А потом: 

 $npm run dev:hot

Это мои файлы, чтобы дать вам представление об использовании веб-пакета в режиме dev / hot:

https://github.com/aarkerio/schnellentest/tree/master/lib/frontend/react

Кстати, все проще, если вы устанавливаете Linux.

...