Error: agent head missing at dev instance (Also on Heroku)

[mintymike]

Describe the bug
The app is completely malfunctioning due to "Error: agent head missing" in development build. The URL directs to localhost:3000/missing-api, there is no functionality (cannot create agent, cannot browse domains, intents, entities, etc.) - screenshot 1.

Inspecting console events in frontend shows the connection to swagger2.json fails - screenshot 2.

The exact same issue happens using the one-click deployment on Heroku.

To Reproduce
Followed installation steps:

1. Cloned git repo
2. Installed dependencies using npm install
3. .env in root and client as follows:

./.env

NODE_ENV=development
MONGO_URL=mongodb://localhost:27017/nlpjs
LOG_LEVEL=debug

./client/.env

# ENV to generate public
# npm run build
SETTINGS_URL=http://localhost:3000
API_URL=http://localhost:3000
PUBLIC_PATH_PREFIX=

4. npm start at root

Screenshots
1.

2.

Additional context
Tested on Chrome, Firefox and Edge.

package.json file in root:

{
  "name": "nlpjs-ui",
  "version": "1.0.2",
  "description": "UI of NLP.js",
  "author": {
    "email": "jesus.seijas@axa.com",
    "name": "Jesus Seijas"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/axa-group/nlp.js-app.git"
  },
  "bugs": {
    "url": "https://github.com/axa-group/nlp.js-app/issues"
  },
  "maintainers": [
    {
      "email": "jesus.seijas@axa.com",
      "name": "Jesus Seijas"
    },
    {
      "email": "eric.lara@axa.com",
      "name": "Eric Lara"
    }
  ],
  "license": "MIT",
  "scripts": {
    "analyze:clean": "rimraf stats.json",
    "preanalyze": "npm run analyze:clean",
    "analyze": "node ./internals/scripts/analyze.js",
    "extract-intl": "babel-node --presets latest,stage-0 -- ./internals/scripts/extract-intl.js",
    "postinstall": "npm run build:dll",
    "prebuild": "npm run build:clean",
    "build": "cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress",
    "build:clean": "npm run test:clean && rimraf ./build",
    "build:dll": "node ./internals/scripts/dependencies.js",
    "start": "cross-env NODE_ENV=development node server",
    "start:tunnel": "cross-env NODE_ENV=development ENABLE_TUNNEL=true node server",
    "start:production": "npm run test && npm run build && npm run start:prod",
    "start:prod": "cross-env NODE_ENV=production node server",
    "presetup": "npm i chalk shelljs",
    "setup": "node ./internals/scripts/setup.js",
    "postsetup": "npm run build:dll",
    "clean": "shjs ./internals/scripts/clean.js",
    "clean:all": "npm run analyze:clean && npm run test:clean && npm run build:clean",
    "generate": "plop --plopfile internals/generators/index.js",
    "lint": "npm run lint:js",
    "lint:eslint": "eslint --ignore-path .gitignore --ignore-pattern internals/scripts",
    "lint:js": "npm run lint:eslint -- . ",
    "lint:staged": "lint-staged",
    "pretest": "npm run test:clean && npm run lint",
    "test:clean": "rimraf ./coverage",
    "test": "cross-env NODE_ENV=test jest --coverage",
    "test:watch": "cross-env NODE_ENV=test jest --watchAll"
  },
  "lint-staged": {
    "*.js": "lint:eslint"
  },
  "pre-commit": "lint:staged",
  "babel": {
    "presets": [
      [
        "latest",
        {
          "es2015": {
            "modules": false
          }
        }
      ],
      "react",
      "stage-0"
    ],
    "env": {
      "production": {
        "only": [
          "app"
        ],
        "plugins": [
          "transform-react-remove-prop-types",
          "transform-react-constant-elements",
          "transform-react-inline-elements"
        ]
      },
      "test": {
        "plugins": [
          "transform-es2015-modules-commonjs",
          "dynamic-import-node"
        ]
      }
    }
  },
  "eslintConfig": {
    "parser": "babel-eslint",
    "extends": "airbnb",
    "env": {
      "browser": true,
      "node": true,
      "jest": true,
      "es6": true
    },
    "plugins": [
      "redux-saga",
      "react",
      "jsx-a11y"
    ],
    "parserOptions": {
      "ecmaVersion": 6,
      "sourceType": "module",
      "ecmaFeatures": {
        "jsx": true
      }
    },
    "rules": {
      "arrow-parens": [
        "error",
        "always"
      ],
      "arrow-body-style": [
        2,
        "as-needed"
      ],
      "comma-dangle": [
        2,
        "always-multiline"
      ],
      "import/imports-first": 0,
      "import/newline-after-import": 0,
      "import/no-dynamic-require": 0,
      "import/no-extraneous-dependencies": 0,
      "import/no-named-as-default": 0,
      "import/no-unresolved": 2,
      "import/prefer-default-export": 0,
      "indent": [
        2,
        2,
        {
          "SwitchCase": 1
        }
      ],
      "jsx-a11y/aria-props": 2,
      "jsx-a11y/heading-has-content": 0,
      "jsx-a11y/href-no-hash": 2,
      "jsx-a11y/label-has-for": 2,
      "jsx-a11y/mouse-events-have-key-events": 2,
      "jsx-a11y/role-has-required-aria-props": 2,
      "jsx-a11y/role-supports-aria-props": 2,
      "max-len": 0,
      "newline-per-chained-call": 0,
      "no-confusing-arrow": 0,
      "no-console": 1,
      "no-use-before-define": 0,
      "prefer-template": 2,
      "class-methods-use-this": 0,
      "react/forbid-prop-types": 0,
      "react/jsx-first-prop-new-line": [
        2,
        "multiline"
      ],
      "react/jsx-filename-extension": 0,
      "react/jsx-no-target-blank": 0,
      "react/require-extension": 0,
      "react/self-closing-comp": 0,
      "redux-saga/no-yield-in-race": 2,
      "redux-saga/yield-effects": 2,
      "require-yield": 0,
      "import/no-webpack-loader-syntax": 0
    },
    "settings": {
      "import/resolver": {
        "webpack": {
          "config": "./internals/webpack/webpack.prod.babel.js"
        }
      }
    }
  },
  "dllPlugin": {
    "path": "node_modules/react-boilerplate-dlls",
    "exclude": [
      "chalk",
      "compression",
      "cross-env",
      "express",
      "ip",
      "minimist",
      "sanitize.css"
    ],
    "include": [
      "core-js",
      "lodash",
      "eventsource-polyfill"
    ]
  },
  "jest": {
    "collectCoverageFrom": [
      "app/**/*.{js,jsx}",
      "!app/**/*.test.{js,jsx}",
      "!app/*/RbGenerated*/*.{js,jsx}",
      "!app/app.js",
      "!app/routes.js"
    ],
    "coverageThreshold": {
      "global": {
        "statements": 98,
        "branches": 91,
        "functions": 98,
        "lines": 98
      }
    },
    "moduleDirectories": [
      "node_modules",
      "app"
    ],
    "moduleNameMapper": {
      ".*\\.(css|less|styl|scss|sass)$": "<rootDir>/internals/mocks/cssModule.js",
      ".*\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/internals/mocks/image.js"
    },
    "setupTestFrameworkScriptFile": "<rootDir>/internals/testing/test-bundler.js",
    "testRegex": "tests/.*\\.test\\.js$"
  },
  "dependencies": {
    "babel-polyfill": "6.20.0",
    "chalk": "1.1.3",
    "compression": "1.7.3",
    "copy-webpack-plugin": "^3.0.0",
    "cross-env": "3.1.3",
    "dotenv-webpack": "^1.5.4",
    "escope": "^3.6.0",
    "eslint": "^5.16.0",
    "express": "4.16.4",
    "fontfaceobserver": "2.0.7",
    "hammerjs": "^2.0.8",
    "immutability-helper": "^2.7.0",
    "immutable": "3.8.1",
    "intl": "1.2.5",
    "invariant": "2.2.2",
    "ip": "1.1.4",
    "jquery": "^3.4.1",
    "jquery-ui": "^1.12.1",
    "lodash": "^4.17.14",
    "material-ui": "^0.20.0",
    "minimist": "^1.2.5",
    "react": "15.4.1",
    "react-accessible-accordion": "^2.4.2",
    "react-ace": "^5.9.0",
    "react-chips": "^0.6.3",
    "react-color": "^2.13.8",
    "react-dnd": "^2.6.0",
    "react-dnd-html5-backend": "^2.6.0",
    "react-dom": "15.4.1",
    "react-helmet": "3.2.2",
    "react-intl": "2.1.5",
    "react-linkify": "^0.2.2",
    "react-materialize": "1.0.11",
    "react-redux": "4.4.6",
    "react-router": "3.0.0",
    "react-router-redux": "4.0.6",
    "react-router-scroll": "0.4.1",
    "react-s-alert": "^1.3.2",
    "react-table": "^6.7.4",
    "react-tap-event-plugin": "2.0.1",
    "redux": "3.6.0",
    "redux-immutable": "3.0.8",
    "redux-saga": "0.14.0",
    "redux-seamless-immutable": "^0.4.0",
    "reselect": "2.5.4",
    "sanitize.css": "4.1.0",
    "seamless-immutable": "^7.1.3",
    "styled-components": "1.1.2",
    "swagger-client": "^3.4.4",
    "time-ago": "^0.2.1",
    "to-camel-case": "^1.0.0",
    "transit-immutable-js": "^0.7.0",
    "transit-js": "^0.8.846",
    "warning": "3.0.0",
    "webpack-cli": "^3.3.11",
    "whatwg-fetch": "2.0.1"
  },
  "devDependencies": {
    "babel-cli": "6.26.0",
    "babel-core": "6.21.0",
    "babel-eslint": "7.1.1",
    "babel-loader": "6.2.10",
    "babel-plugin-dynamic-import-node": "1.0.0",
    "babel-plugin-react-intl": "2.2.0",
    "babel-plugin-react-transform": "2.0.2",
    "babel-plugin-transform-es2015-modules-commonjs": "6.18.0",
    "babel-plugin-transform-react-constant-elements": "6.9.1",
    "babel-plugin-transform-react-inline-elements": "6.8.0",
    "babel-plugin-transform-react-remove-prop-types": "0.2.11",
    "babel-preset-latest": "6.16.0",
    "babel-preset-react": "6.16.0",
    "babel-preset-react-hmre": "1.1.1",
    "babel-preset-stage-0": "6.16.0",
    "cheerio": "0.22.0",
    "circular-dependency-plugin": "2.0.0",
    "css-loader": "0.26.1",
    "enzyme": "2.6.0",
    "eslint-config-airbnb": "13.0.0",
    "eslint-config-airbnb-base": "10.0.1",
    "eslint-import-resolver-webpack": "0.8.0",
    "eslint-plugin-import": "2.14.0",
    "eslint-plugin-jsx-a11y": "2.2.3",
    "eslint-plugin-react": "6.7.1",
    "eslint-plugin-redux-saga": "0.1.5",
    "eventsource-polyfill": "0.9.6",
    "exports-loader": "0.6.3",
    "file-loader": "0.9.0",
    "html-loader": "0.4.4",
    "html-webpack-plugin": "2.24.1",
    "image-webpack-loader": "^4.6.0",
    "imports-loader": "0.6.5",
    "jest-cli": "25.2.7",
    "lint-staged": "3.2.1",
    "node-plop": "0.25.0",
    "node-sass": "^4.13.1",
    "null-loader": "0.1.1",
    "offline-plugin": "5.0.5",
    "plop": "1.7.3",
    "pre-commit": "1.1.3",
    "react-addons-test-utils": "15.4.1",
    "resolve-url-loader": "^2.1.0",
    "rimraf": "2.5.4",
    "sass-loader": "^6.0.6",
    "shelljs": "0.7.5",
    "sinon": "2.0.0-pre",
    "style-loader": "0.13.1",
    "url-loader": "1.1.2",
    "webpack": "4.42.1",
    "webpack-dev-middleware": "3.7.2",
    "webpack-hot-middleware": "2.25.0"
  }
}

[JeroenAdam]

I had the same error and edited several .js files inside the /public folder.
The url localhost:3000 replaced by whatever url you will be using.

[tassoman]

the environment variable must point to the exact public url, instead of localhost

[mintymike]

Yeah, but then why does the heroku deployment have the exact same issue? It's meant to be zero-config, just all deployed automatically.

[julianfrank]

I tried to deploy in heroku and this was the console log in browser...

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3000/swagger2.json. (Reason: CORS request did not succeed).

Hope this helps