CODEWITHSUNDEEP
node.jsbabeljsnode-webkitbabel-node
Positonic
Positonic

Reputation: 9411

Deploying an app developed with babel-node

I have been using webpack for the first time, starting for a tutorial, but I'm stuck trying to deploy this to digital ocean.

I have been running the server during development by typing

 npm start

Which calls:

 babel-node devServer.js

This works fine for me locally, but when I try to run it on digital ocean it first works for a few minutes, then dies. I read somewhere that running babel-node on a live server isn't recommended, so I guess this is something to do with that.

I can see from this line in package.json :

"build:webpack": "NODE_ENV=production node_modules/webpack/bin/webpack.js --config webpack.config.prod.js",

that I should be doing some sort of deploy step, which I do, but I can still only get it to run using npm start, which uses babel-node devServer.js

How do I actually run this after doing the build? What am I doing wrong?

From package.json:

"scripts": {
    "build:webpack": "NODE_ENV=production node_modules/webpack/bin/webpack.js --config webpack.config.prod.js",
    "build": "npm run clean && npm run build:webpack",
    "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js \"test/**/*@(.js|.jsx)\"",
    "clean": "rimraf dist",
    "start": "babel-node devServer.js",
    "tunnel": "browser-sync start --proxy localhost:7770 --tunnel wesbos",
    "test:watch": "npm run test -- --watch"
  },

My dev config:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'source-map',
  entry: [
    'webpack-hot-middleware/client',
    './client/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  resolve: {
    root: [
      path.resolve('./client')
    ],
    alias: {

    },
  },
  module: {
    loaders: [
    // js
    {
      test: /\.js$/,
      loaders: ['babel'],
      include: path.join(__dirname, 'client')
    },
    // CSS
    { 
      test: /\.styl$/, 
      include: path.join(__dirname, 'client'),
      loader: 'style-loader!css-loader!stylus-loader'
    }
    ]
  }
};

Prod config:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'source-map',
  entry: [

    './client/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': "'production'"
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false
      }
    })
  ],
  resolve: {
    root: [
      path.resolve('./client')
    ],
    alias: {

    },
  },
  module: {
    loaders: [
    // js
    {
      test: /\.js$/,
      loaders: ['babel'],
      include: path.join(__dirname, 'client')
    },
    // CSS
    {
      test: /\.styl$/,
      include: path.join(__dirname, 'client'),
      loader: 'style-loader!css-loader!stylus-loader'
    }
    ]
  }
};

Upvotes: 0

Views: 1274

Answers (1)

alex
alex

Reputation: 5573

You could try using babel-loader and running the build script in npm start

In your package.json:

"start": "npm run build && babel-node --presets es2015 devServer.js"

Also include the following dependencies in your package.json:

"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.3.13",

In your webpack.config:

loaders: [
  { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader',
    query: {
      presets: ['react', 'es2015']
    }
  }
]

Upvotes: 1

Related Questions