Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

How to deploy a webpack application on heroku?

Tags:

heroku

I have an node application. My project structure is something like that:

myApp
  |_ dist
  |_ node_modules
  |_ package.json
  |_ Procfile
  |_ webpack.config.js
  |_ src
      |_ assets
      |_ styles
      |_ vendors
      |_ js
          |_ app.js

app.js is my entry point. In my package.json, I defined the following scripts:

"scripts": {
    "build": "webpack -p --progress",
    "start": "webpack-dev-server"
}

as well my Procfile

web: webpack-dev-server

This is my webpack.config.js file:

var path = require("path");
var CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: path.resolve(__dirname, './src/js/app.js'),

  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015']
        }
      },
      {
        test: /\.less$/,
        loader: "style!css!less"
      },
      {
        test: /\.(jpg|png|gif)$/,
        include: /img/,
        loader: 'url'
      },
    ]},

    plugins: [
      new CopyWebpackPlugin([
        { from: './src/index.html' }
      ]),
      new CopyWebpackPlugin([
        { from: './src/vendors/vendor.min.js' }
      ]),
      new CopyWebpackPlugin([
        { from: './src/assets', to: 'assets' }
      ])
    ],

    devServer: {
      contentBase: path.resolve(__dirname, 'dist'),
      port: 5000,
      headers: {
        "Access-Control-Allow-Origin": "*"
      }
    }
};

If I run the app local, all things work fine. But, after I push my app on heroku by typing git push heroku master, the deploy occurs ok, but I can't open the app via heroku open, I get an error. Actually, I don't know how to run my application on heroku.

Appreciate any help.

Here are my logs

2017-01-11T13:27:35.645636+00:00 app[web.1]: npm ERR! 
2017-01-11T13:27:35.645849+00:00 app[web.1]: npm ERR! Failed at the [email protected] start script 'webpack-dev-server'.
2017-01-11T13:27:35.646053+00:00 app[web.1]: npm ERR! Make sure you have the latest version of node.js and npm installed.
2017-01-11T13:27:35.646249+00:00 app[web.1]: npm ERR! If you do, this is most likely a problem with the pegaladrao package,
2017-01-11T13:27:35.646475+00:00 app[web.1]: npm ERR! not with npm itself.
2017-01-11T13:27:35.646685+00:00 app[web.1]: npm ERR! Tell the author that this fails on your system:
2017-01-11T13:27:35.646899+00:00 app[web.1]: npm ERR!     webpack-dev-server
2017-01-11T13:27:35.647130+00:00 app[web.1]: npm ERR! You can get information on how to open an issue for this project with:
2017-01-11T13:27:35.647532+00:00 app[web.1]: npm ERR! Or if that isn't available, you can get their info via:
2017-01-11T13:27:35.647369+00:00 app[web.1]: npm ERR!     npm bugs pegaladrao
2017-01-11T13:27:35.647742+00:00 app[web.1]: npm ERR!     npm owner ls pegaladrao
2017-01-11T13:27:35.647942+00:00 app[web.1]: npm ERR! There is likely additional logging output above.
2017-01-11T13:27:35.652129+00:00 app[web.1]: 
2017-01-11T13:27:35.652339+00:00 app[web.1]: npm ERR! Please include the following file with any support request:
2017-01-11T13:27:35.652442+00:00 app[web.1]: npm ERR!     /app/npm-debug.log
2017-01-11T13:27:35.725498+00:00 heroku[web.1]: State changed from starting to crashed
2017-01-11T13:27:35.714352+00:00 heroku[web.1]: Process exited with status 1
2017-01-11T13:37:15.944416+00:00 heroku[web.1]: State changed from crashed to starting
2017-01-11T13:37:18.456711+00:00 heroku[web.1]: Starting process with command `npm start`
2017-01-11T13:37:21.392243+00:00 app[web.1]: 
2017-01-11T13:37:21.392258+00:00 app[web.1]: > [email protected] start /app
2017-01-11T13:37:21.392259+00:00 app[web.1]: > webpack-dev-server
2017-01-11T13:37:21.392260+00:00 app[web.1]: 
2017-01-11T13:37:21.400189+00:00 app[web.1]: sh: 1: webpack-dev-server: not found
2017-01-11T13:37:21.406100+00:00 app[web.1]: 
2017-01-11T13:37:21.414419+00:00 app[web.1]: npm ERR! Linux 3.13.0-105-generic
2017-01-11T13:37:21.414827+00:00 app[web.1]: npm ERR! argv "/app/.heroku/node/bin/node" "/app/.heroku/node/bin/npm" "start"
2017-01-11T13:37:21.415115+00:00 app[web.1]: npm ERR! node v6.2.1
2017-01-11T13:37:21.415585+00:00 app[web.1]: npm ERR! npm  v3.9.3
2017-01-11T13:37:21.415878+00:00 app[web.1]: npm ERR! file sh
2017-01-11T13:37:21.416076+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2017-01-11T13:37:21.416260+00:00 app[web.1]: npm ERR! errno ENOENT
2017-01-11T13:37:21.416441+00:00 app[web.1]: npm ERR! syscall spawn
2017-01-11T13:37:21.416605+00:00 app[web.1]: npm ERR! [email protected] start: `webpack-dev-server`
2017-01-11T13:37:21.416753+00:00 app[web.1]: npm ERR! spawn ENOENT
2017-01-11T13:37:21.416905+00:00 app[web.1]: npm ERR! 
2017-01-11T13:37:21.417068+00:00 app[web.1]: npm ERR! Failed at the [email protected] start script 'webpack-dev-server'.
2017-01-11T13:37:21.417220+00:00 app[web.1]: npm ERR! Make sure you have the latest version of node.js and npm installed.
2017-01-11T13:37:21.417365+00:00 app[web.1]: npm ERR! If you do, this is most likely a problem with the pegaladrao package,
2017-01-11T13:37:21.417517+00:00 app[web.1]: npm ERR! not with npm itself.
2017-01-11T13:37:21.417661+00:00 app[web.1]: npm ERR! Tell the author that this fails on your system:
2017-01-11T13:37:21.417804+00:00 app[web.1]: npm ERR!     webpack-dev-server
2017-01-11T13:37:21.417948+00:00 app[web.1]: npm ERR! You can get information on how to open an issue for this project with:
2017-01-11T13:37:21.418094+00:00 app[web.1]: npm ERR!     npm bugs pegaladrao
2017-01-11T13:37:21.418244+00:00 app[web.1]: npm ERR! Or if that isn't available, you can get their info via:
2017-01-11T13:37:21.418407+00:00 app[web.1]: npm ERR!     npm owner ls pegaladrao
2017-01-11T13:37:21.422856+00:00 app[web.1]: 
2017-01-11T13:37:21.423142+00:00 app[web.1]: npm ERR!     /app/npm-debug.log
2017-01-11T13:37:21.423030+00:00 app[web.1]: npm ERR! Please include the following file with any support request:
2017-01-11T13:37:21.418591+00:00 app[web.1]: npm ERR! There is likely additional logging output above.
2017-01-11T13:37:21.512091+00:00 heroku[web.1]: State changed from starting to crashed
2017-01-11T13:37:21.499631+00:00 heroku[web.1]: Process exited with status 1
2017-01-11T13:40:32.051966+00:00 heroku[slug-compiler]: Slug compilation started
2017-01-11T13:40:32.051974+00:00 heroku[slug-compiler]: Slug compilation finished
2017-01-11T13:40:31.858391+00:00 app[api]: Deploy da11e80 by user [email protected]
2017-01-11T13:40:31.858391+00:00 app[api]: Release v10 created by user [email protected]
2017-01-11T13:40:32.191176+00:00 heroku[web.1]: State changed from crashed to starting
2017-01-11T13:40:34.783548+00:00 heroku[web.1]: Starting process with command `webpack-dev-server`
2017-01-11T13:40:37.475574+00:00 app[web.1]: bash: webpack-dev-server: command not found
2017-01-11T13:40:37.575920+00:00 heroku[web.1]: State changed from starting to crashed
2017-01-11T13:40:37.585438+00:00 heroku[web.1]: Process exited with status 127
2017-01-11T13:42:00.220939+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=game-pega-ladrao.herokuapp.com request_id=e88c7f11-ec3d-4a9c-bce0-e116bb692f61 fwd="177.135.168.30" dyno= connect= service= status=503 bytes=
2017-01-11T13:42:00.744864+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=game-pega-ladrao.herokuapp.com request_id=9e1e96b3-15a8-4915-9d58-008b9edcaa15 fwd="177.135.168.30" dyno= connect= service= status=503 bytes=
2017-01-11T13:49:22.413923+00:00 heroku[web.1]: State changed from crashed to starting
2017-01-11T13:49:24.395890+00:00 heroku[web.1]: Starting process with command `webpack-dev-server`
2017-01-11T13:49:26.583343+00:00 heroku[web.1]: Process exited with status 127
2017-01-11T13:49:26.525449+00:00 app[web.1]: bash: webpack-dev-server: command not found
2017-01-11T13:49:26.600280+00:00 heroku[web.1]: State changed from starting to crashed
2017-01-11T14:14:36.683508+00:00 heroku[web.1]: State changed from crashed to starting
2017-01-11T14:14:39.320308+00:00 heroku[web.1]: Starting process with command `webpack-dev-server`
2017-01-11T14:14:41.990804+00:00 app[web.1]: bash: webpack-dev-server: command not found
2017-01-11T14:14:42.107745+00:00 heroku[web.1]: State changed from starting to crashed
2017-01-11T14:14:42.099658+00:00 heroku[web.1]: Process exited with status 127
2017-01-11T14:56:53.024731+00:00 heroku[web.1]: State changed from crashed to starting
2017-01-11T14:56:55.165335+00:00 heroku[web.1]: Starting process with command `webpack-dev-server`
2017-01-11T14:56:57.911706+00:00 app[web.1]: bash: webpack-dev-server: command not found
2017-01-11T14:56:57.996355+00:00 heroku[web.1]: Process exited with status 127
2017-01-11T14:56:57.988466+00:00 heroku[web.1]: State changed from starting to crashed
2017-01-11T16:27:07.649780+00:00 heroku[web.1]: State changed from crashed to starting
2017-01-11T16:27:09.953062+00:00 heroku[web.1]: Starting process with command `webpack-dev-server`
2017-01-11T16:27:11.936009+00:00 heroku[web.1]: Process exited with status 127
2017-01-11T16:27:11.888475+00:00 app[web.1]: bash: webpack-dev-server: command not found
2017-01-11T16:27:11.946530+00:00 heroku[web.1]: State changed from starting to crashed
2017-01-11T18:25:46.669394+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=game-pega-ladrao.herokuapp.com request_id=74811720-1a10-4b97-9842-da6d0010addb fwd="177.135.168.30" dyno= connect= service= status=503 bytes=
2017-01-11T18:25:47.200025+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=game-pega-ladrao.herokuapp.com request_id=fc371066-439b-4577-96a0-50a939b1d89b fwd="177.135.168.30" dyno= connect= service= status=503 bytes=
2017-01-11T18:28:28.039141+00:00 heroku[slug-compiler]: Slug compilation started
2017-01-11T18:28:28.039146+00:00 heroku[slug-compiler]: Slug compilation finished
2017-01-11T18:28:27.876738+00:00 app[api]: Deploy 78b5ba3 by user [email protected]
2017-01-11T18:28:27.876738+00:00 app[api]: Release v11 created by user [email protected]
2017-01-11T18:28:28.173651+00:00 heroku[web.1]: State changed from crashed to starting
2017-01-11T18:28:31.152586+00:00 heroku[web.1]: Starting process with command `webpack-dev-server`
2017-01-11T18:28:33.608949+00:00 heroku[web.1]: State changed from starting to crashed
2017-01-11T18:28:33.473917+00:00 app[web.1]: bash: webpack-dev-server: command not found
2017-01-11T18:28:33.610173+00:00 heroku[web.1]: State changed from crashed to starting
2017-01-11T18:28:33.571897+00:00 heroku[web.1]: Process exited with status 127
2017-01-11T18:28:35.516449+00:00 heroku[web.1]: Starting process with command `webpack-dev-server`
2017-01-11T18:28:37.581803+00:00 heroku[web.1]: Process exited with status 127
2017-01-11T18:28:37.481833+00:00 app[web.1]: bash: webpack-dev-server: command not found
2017-01-11T18:28:37.563587+00:00 heroku[web.1]: State changed from starting to crashed
2017-01-11T18:30:41.542396+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=game-pega-ladrao.herokuapp.com request_id=4105e69a-2dcc-42c8-9e77-46552cd9af42 fwd="177.135.168.30" dyno= connect= service= status=503 bytes=
2017-01-11T18:30:42.148595+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=game-pega-ladrao.herokuapp.com request_id=f0018d93-366f-435e-86c0-3d0ba9fcf563 fwd="177.135.168.30" dyno= connect= service= status=503 bytes=

This is the response I'm getting after run "git push heroku master" on terminal:

Node.js app detected
remote: 
remote: -----> Creating runtime environment
remote:        
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NPM_CONFIG_PRODUCTION=true
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote: 
remote: -----> Installing binaries
remote:        engines.node (package.json):  6.2.1
remote:        engines.npm (package.json):   3.9.3
remote:        
remote:        Downloading and installing node 6.2.1...
remote:        npm 3.9.3 already installed with node
remote: 
remote: -----> Restoring cache
remote:        Loading 2 from cacheDirectories (default):
remote:        - node_modules
remote:        - bower_components (not cached - skipping)
remote: 
remote: -----> Building dependencies
remote:        Installing node modules (package.json)
remote: 
remote: -----> Caching build
remote:        Clearing previous node cache
remote:        Saving 2 cacheDirectories (default):
remote:        - node_modules
remote:        - bower_components (nothing to cache)
remote: 
remote: -----> Build succeeded!
remote:        └── (empty)
remote:        
remote: -----> Discovering process types
remote:        Procfile declares types -> web
remote: 
remote: -----> Compressing...
remote:        Done: 24.5M
remote: -----> Launching...
remote:        Released v16
remote:        https://game-pega-ladrao.herokuapp.com/ deployed to Heroku
remote: 
remote: Verifying deploy... done.
like image 789
Pablo Darde Avatar asked Jan 11 '17 14:01

Pablo Darde

1 Answers

After some attempts, I could deploy my webpack project on Heroku by using the following architecture.

  1. Create a Webpack config file running a webpack-dev-server for development.
  2. Create a server.js file with an express server for deploy on Heroku.

I created a little github repo for those interested in using webpack deployed in Heroku.

like image 136
Pablo Darde Avatar answered Nov 13 '22 03:11

Pablo Darde
Sign in to Comment

Related questions

Rails error 500, "We're sorry, but something went wrong"
How to catch Memory Quota exceptions in a heroku worker
How to push to Heroku without putting the app down
TypeError (String can't be coerced into Fixnum)?
Grails push to Heroku failed - applicationContext.xml doesn't exist
How to unzip files in a Heroku Buildpack
Set up Heroku in Windows
What OS does heroku cedar run?
Serve static files on heroku using AWS S3 for django?
rake aborted! PG::ConnectionBad: fe_sendauth: no password supplied Tasks: TOP => db:migrate (See full trace by running task with --trace)
Heroku Slug Size After Multiple Deployments
Node.js with express app crashes on Heroku, works locally
new version cloud 9 : how to deploy to heroku
How to override pool and reaping_frequency in heroku's database.yml
I am getting Error R14 (Memory quota exceeded) in heroku with a Django app
Run Gulp tasks during composer install
How to configure DNS records for Name.com and a Heroku app
Heroku cannot find `babel-core/register`
Redirect Elixir Phoenix request from root domain to www
How to deploy Loopback ? Need simple explanation

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!