Thursday 4 May 2017

react app on heroku doesn't start

I got an app working fine with localhost but it doesn't start in my heruko instance. Here is my package.json file :

{
  "name": "innova-client",
  "scripts": {
    "build": "webpack --config build/webpack.development.js",
    "watch-build": "webpack --progress --watch --config build/webpack.development.js",
    "start": "webpack-dev-server --config build/webpack.standalone.js",
    "test": "jest"
  },
  "jest": {
    "transform": {
      ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    },
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ]
  },
  "devDependencies": {
    "@types/enzyme": "^2.7.5",
    "@types/jest": "^18.1.1",
    "@types/jquery": "^2.0.40",
    "@types/lodash": "^4.14.54",
    "@types/react": "^15.0.14",
    "@types/react-addons-test-utils": "^0.14.17",
    "@types/react-dom": "^0.14.23",
    "@types/react-redux": "^4.4.37",
    "@types/react-router": "^3.0.6",
    "@types/react-router-redux": "^4.0.42",
    "@types/react-test-renderer": "^15.4.2",
    "@types/redux-logger": "^2.6.34",
    "@types/redux-persist": "^4.0.0",
    "awesome-typescript-loader": "^3.1.2",
    "babel-jest": "^19.0.0",
    "enzyme": "^2.7.1",
    "jest": "^19.0.2",
    "jest-cli": "^19.0.2",
    "react-addons-test-utils": "^15.4.2",
    "react-test-renderer": "^15.4.2",
    "source-map-loader": "^0.1.6",
    "ts-jest": "^19.0.0",
    "webpack": "^1.9.1",
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": {
    "axios": "^0.15.3",
    "jquery": "^3.1.1",
    "lodash": "^4.17.4",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-redux": "^5.0.3",
    "react-router": "^3.0.2",
    "react-router-redux": "^4.0.8",
    "redux": "^3.6.0",
    "redux-logger": "^2.8.2",
    "redux-persist": "^4.3.1",
    "redux-thunk": "^2.2.0",
    "typescript": "^2.2.1"
  }
}

Here is the code of webpack.development.js :

module.exports = {
    entry: [
        './src/index.tsx'
    ],

    output: {
        filename: '../webapp/public/javascripts/app.js',
    },

    devtool: 'inline-source-map',

    resolve: {
        extensions: ['', '.js', '.ts', '.tsx']
    },

    module: {
        loaders: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            {test: /\.tsx?$/, loader: 'awesome-typescript-loader'}
        ],

        preLoaders: [
            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            {test: /\.js$/, loader: 'source-map-loader'}
        ]
    }
};

And there is the code of webpack.standalone.js :

module.exports = {
    entry: './src/index.tsx',

    output: {
        path: 'public',
        filename: 'bundle.js',
        publicPath: '/'
    },

    devtool: 'inline-source-map',

    resolve: {
        extensions: ['', '.js', '.ts', '.tsx']
    },

    module: {
        loaders: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            {test: /\.tsx?$/, loader: 'awesome-typescript-loader'}
        ],

        preLoaders: [
            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            {test: /\.js$/, loader: 'source-map-loader'}
        ]
    },

    devServer: {
        inline: true,
        historyApiFallback: true,
        contentBase: 'public/',
        port: 3000
    }
};

I can run npm install and then npm start. My app starts fine.

Now Id' like to deploy my app on heroku, so I've created a git repository and I ignored the "node_modules" directory. When going to the url generated by Heroku, I got the message "An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details."

When entering heroku logs I got these messages :

2017-05-04T13:47:58.888875+00:00 app[api]: Release v2 created by user innova-rd@cat-amania.com
2017-05-04T13:47:58.723117+00:00 app[api]: Release v1 created by user innova-rd@cat-amania.com
2017-05-04T13:47:58.723117+00:00 app[api]: Initial release by user innova-rd@cat-amania.com
2017-05-04T13:47:58.888875+00:00 app[api]: Enable Logplex by user innova-rd@cat-amania.com
2017-05-04T13:51:14.000000+00:00 app[api]: Build started by user innova-rd@cat-amania.com
2017-05-04T13:51:33.237737+00:00 app[api]: Scaled to web@1:Free by user innova-rd@cat-amania.com
2017-05-04T13:51:33.212441+00:00 app[api]: Deploy 30333e7 by user innova-rd@cat-amania.com
2017-05-04T13:51:33.212441+00:00 app[api]: Release v3 created by user innova-rd@cat-amania.com
2017-05-04T13:51:14.000000+00:00 app[api]: Build succeeded
2017-05-04T13:51:36.718804+00:00 heroku[web.1]: Starting process with command `npm start`
2017-05-04T13:51:41.387022+00:00 heroku[web.1]: State changed from starting to crashed
2017-05-04T13:51:41.387904+00:00 heroku[web.1]: State changed from crashed to starting
2017-05-04T13:51:41.372895+00:00 heroku[web.1]: Process exited with status 1
2017-05-04T13:51:41.246395+00:00 app[web.1]:
2017-05-04T13:51:41.246409+00:00 app[web.1]: > innova-client@ start /app
2017-05-04T13:51:41.246410+00:00 app[web.1]: > webpack-dev-server --config build/webpack.standalone.js
2017-05-04T13:51:41.246410+00:00 app[web.1]:
2017-05-04T13:51:41.254190+00:00 app[web.1]: sh: 1: webpack-dev-server: not found
2017-05-04T13:51:41.260595+00:00 app[web.1]:
2017-05-04T13:51:41.271775+00:00 app[web.1]: npm ERR! Linux 3.13.0-112-generic
2017-05-04T13:51:41.272071+00:00 app[web.1]: npm ERR! argv "/app/.heroku/node/bin/node" "/app/.heroku/node/bin/npm" "start"
2017-05-04T13:51:41.272273+00:00 app[web.1]: npm ERR! node v6.10.3
2017-05-04T13:51:41.272429+00:00 app[web.1]: npm ERR! npm  v3.10.10
2017-05-04T13:51:41.272604+00:00 app[web.1]: npm ERR! file sh
2017-05-04T13:51:41.272791+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2017-05-04T13:51:41.272960+00:00 app[web.1]: npm ERR! errno ENOENT
2017-05-04T13:51:41.273140+00:00 app[web.1]: npm ERR! syscall spawn
2017-05-04T13:51:41.273296+00:00 app[web.1]: npm ERR! innova-client@ start: `webpack-dev-server --config build/webpack.standalone.js`
2017-05-04T13:51:41.273666+00:00 app[web.1]: npm ERR! spawn ENOENT
2017-05-04T13:51:41.273848+00:00 app[web.1]: npm ERR!
2017-05-04T13:51:41.274051+00:00 app[web.1]: npm ERR! Failed at the innova-client@ start script 'webpack-dev-server --config build/webpack.standalone.js'.
2017-05-04T13:51:41.274199+00:00 app[web.1]: npm ERR! Make sure you have the latest version of node.js and npm installed.
2017-05-04T13:51:41.274353+00:00 app[web.1]: npm ERR! If you do, this is most likely a problem with the innova-client package,
2017-05-04T13:51:41.274469+00:00 app[web.1]: npm ERR! not with npm itself.
2017-05-04T13:51:41.274601+00:00 app[web.1]: npm ERR! Tell the author that this fails on your system:
2017-05-04T13:51:41.274735+00:00 app[web.1]: npm ERR!     webpack-dev-server --config build/webpack.standalone.js
2017-05-04T13:51:41.274895+00:00 app[web.1]: npm ERR! You can get information on how to open an issue for this project with:
2017-05-04T13:51:41.275008+00:00 app[web.1]: npm ERR!     npm bugs innova-client
2017-05-04T13:51:41.275144+00:00 app[web.1]: npm ERR! Or if that isn't available, you can get their info via:
2017-05-04T13:51:41.275281+00:00 app[web.1]: npm ERR!     npm owner ls innova-client
2017-05-04T13:51:41.275407+00:00 app[web.1]: npm ERR! There is likely additional logging output above.
2017-05-04T13:51:41.280628+00:00 app[web.1]:
2017-05-04T13:51:41.280973+00:00 app[web.1]: npm ERR! Please include the following file with any support request:
2017-05-04T13:51:41.281167+00:00 app[web.1]: npm ERR!     /app/npm-debug.log
2017-05-04T13:51:43.507550+00:00 heroku[web.1]: Starting process with command `npm start`
2017-05-04T13:51:46.187246+00:00 heroku[web.1]: State changed from starting to crashed
2017-05-04T13:51:46.170663+00:00 heroku[web.1]: Process exited with status 1
2017-05-04T13:51:46.080016+00:00 app[web.1]:
2017-05-04T13:51:46.080035+00:00 app[web.1]: > innova-client@ start /app
2017-05-04T13:51:46.080036+00:00 app[web.1]: > webpack-dev-server --config build/webpack.standalone.js
2017-05-04T13:51:46.080037+00:00 app[web.1]:
2017-05-04T13:51:46.085844+00:00 app[web.1]: sh: 1: webpack-dev-server: not found
2017-05-04T13:51:46.090229+00:00 app[web.1]:
2017-05-04T13:51:46.098379+00:00 app[web.1]: npm ERR! node v6.10.3
2017-05-04T13:51:46.097880+00:00 app[web.1]: npm ERR! Linux 3.13.0-112-generic
2017-05-04T13:51:46.098161+00:00 app[web.1]: npm ERR! argv "/app/.heroku/node/bin/node" "/app/.heroku/node/bin/npm" "start"
2017-05-04T13:51:46.098567+00:00 app[web.1]: npm ERR! npm  v3.10.10
2017-05-04T13:51:46.098738+00:00 app[web.1]: npm ERR! file sh
2017-05-04T13:51:46.099801+00:00 app[web.1]: npm ERR! Make sure you have the latest version of node.js and npm installed.
2017-05-04T13:51:46.098883+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2017-05-04T13:51:46.099017+00:00 app[web.1]: npm ERR! errno ENOENT
2017-05-04T13:51:46.099270+00:00 app[web.1]: npm ERR! syscall spawn
2017-05-04T13:51:46.099402+00:00 app[web.1]: npm ERR! innova-client@ start: `webpack-dev-server --config build/webpack.standalone.js`
2017-05-04T13:51:46.099497+00:00 app[web.1]: npm ERR! spawn ENOENT
2017-05-04T13:51:46.099611+00:00 app[web.1]: npm ERR!
2017-05-04T13:51:46.099715+00:00 app[web.1]: npm ERR! Failed at the innova-client@ start script 'webpack-dev-server --config build/webpack.standalone.js'.
2017-05-04T13:51:46.099918+00:00 app[web.1]: npm ERR! If you do, this is most likely a problem with the innova-client package,
2017-05-04T13:51:46.100003+00:00 app[web.1]: npm ERR! not with npm itself.
2017-05-04T13:51:46.104341+00:00 app[web.1]:
2017-05-04T13:51:46.100094+00:00 app[web.1]: npm ERR! Tell the author that this fails on your system:
2017-05-04T13:51:46.100170+00:00 app[web.1]: npm ERR!     webpack-dev-server --config build/webpack.standalone.js
2017-05-04T13:51:46.100261+00:00 app[web.1]: npm ERR! You can get information on how to open an issue for this project with:
2017-05-04T13:51:46.100340+00:00 app[web.1]: npm ERR!     npm bugs innova-client
2017-05-04T13:51:46.100435+00:00 app[web.1]: npm ERR! Or if that isn't available, you can get their info via:
2017-05-04T13:51:46.100600+00:00 app[web.1]: npm ERR!     npm owner ls innova-client
2017-05-04T13:51:46.100763+00:00 app[web.1]: npm ERR! There is likely additional logging output above.
2017-05-04T13:51:46.104506+00:00 app[web.1]: npm ERR! Please include the following file with any support request:
2017-05-04T13:51:46.104590+00:00 app[web.1]: npm ERR!     /app/npm-debug.log
2017-05-04T13:51:47.506127+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=socletechnique.herokuapp.com request_id=02ed8b61-fa43-417c-a5c7-64b510d4a2b8 fwd="77.154.192.115" dyno= connect= service= status=503 bytes= protocol=https
2017-05-04T13:51:47.864947+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=socletechnique.herokuapp.com request_id=c9efb2df-46db-40e2-bc44-c4026a08ed5f fwd="77.154.192.115" dyno= connect= service= status=503 bytes= protocol=https

Do you know why it can't run on heroku ?



via whySoSerious

No comments:

Post a Comment