Usage of babel-register

[ranyefet]

Hi,

Thanks for the great repo!
I have a concern about the usage of babel-register on the server.
According to babel docs, it should not be used in production.

Note that this is not meant for production use. It's considered bad practice to deploy code that gets compiled this way. It is far better to compile ahead of time before deploying.

Is there a plan to tackle this issue?

[rowellx68]

We could compile the whole src folder into build? Did a quick test and here's what I've come up with:

"start:prod": "npm run build:server && npm run build && NODE_ENV=production node ./build/server/server.js",
"build:server": "babel src --out-dir build",

I've replaced the npm scripts and it seems to work. I'm sure there are better solutions though.

[jaredpalmer]

Will need to use webpack on the server

[rowellx68]

Currently trying this out http://jlongster.com/Backend-Apps-with-Webpack--Part-I

Will do a PR when I get it working. 👍

[jaredpalmer]

Problem is that there is no HMR on the server, even with jlongster's approach. 😦

[rowellx68]

How about if it was limited to production only?

[jaredpalmer]

It would look something like this:

// webpack.server.prod.config.js

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

module.exports = {
  target: 'node',

  devtool: 'inline-source-map',

  entry: path.join(__dirname, 'app.js'),

  output: {
    filename: path.join(__dirname, 'app.bundle.js')
  },

  // keep node_module paths out of the bundle keep size down
  externals: getExternals(),

  node: {
    __filename: true,
    __dirname: true
  },

  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader' }  // handwaiving here
    ]
  },

  plugins: [
    new webpack.BannerPlugin(
      'require("source-map-support").install();',
      { raw: true, entryOnly: false }
    )
  ]
}

function getExternals() {
  const nodeModules = fs.readdirSync(path.resolve(__dirname, 'node_modules'))
  return nodeModules.reduce((ext, mod) => {
    ext[mod] = 'commonjs ' + mod
    return ext
  }, {})
}

[ranyefet]

Thanks for the quick response! So basically after using this config, we need to change start:prod script to use app.bundle.js right?

Another question about running in production, currently start:prod command uses node to run the server.
Shouldn't we use something like PM2 to run the server on production?
So it will auto-restart on code changes and scale to all cores?

[jaredpalmer]

Pm2 is a lot of overhead. We use Throng in production. But yes we can make that change.

[Grsmto]

Hi guys,
It seems like we still need the node_modules in production as well? Deploying only the /build folder throw an error babel related, so I'm wondering if this issue isn't related. Did anyone figured out something similar?

When doing node ./build/server.js using only the /build folder:
Error: Cannot find module 'babel-runtime/core-js/json/stringify'

Thanks!

Edit: reformulate my question: Why do we still need the node_modules in production even if all the code is bundled by Webpack? Shouldn't everything needed for production be contained within the /build folder?

[jaredpalmer]

You don’t need Node modules in prod

[Grsmto]

Hi Jared,
Thanks for your answer :)

That's what I expected as well! So I tested with a fresh install, with examples/basic and followed this process:

• cd examples/basic
• npm install
• npm run build
• rm -rf node_modules
• npm run start:prod

and then it fails with:
Error: Cannot find module 'express'

Should I open a new issue or am I doing something wrong?

[Grsmto]

For posterity:
From what I understand of the Webpack config for the backend, it uses webpack-node-externals as seen in this line so the node_modules are not bundled with the backend bundle. Which means the node_modules are required on production and have to be deployed alongside the /build folder.

[krystianjj]

Hi @Grsmto,
Can you resolve the problem? To build razzle app with include node_modules?
For me it's not good to copy all files from catalog node_modules to production.

[Grsmto]

Hi @krystianjj,
I had to copy the node_modules folder to the production server or build the app directly on the production server. unfortunately I didn't find a way to deploy only the /build folder.

[krystianjj]

Thank you for quick response @Grsmto
I do the same - copy package.json to production server run npm install and I have build folder with node_modules.
Maybe @jaredpalmer can add fix in future for this, or this is good solution to copy node_modules to the server.

[SanthoshRaju91]

Anyone got this working, I don't want to take the node_modules along to the production server after creating the bundle.

[SanthoshRaju91]

Okay, got this issue fixed in some way.

We need to add this in razzle.config.

module.exports = {
  modify: (config, { target, dev }) => {
    if(target === "node") {
      config = {
        ...config,
        externals: []
      }
    }
    return config;
  }
}

In order for this work in your CI pipeline, you need to make the process.env.CI to false.

Because, if CI environment variable is true, warnings are treated as errors and your build will fail. Why is this you ask ? Because of express dependency issue

./node_modules/express/lib/view.js
Critical dependency: the request of a dependency is an expression

[Risbot]

For me it not works, I get this error:

Critical dependency: the request of a dependency is an expression
    at CommonJsRequireContextDependency.getWarnings (C:\Projects\My\GitLab\inseritas-web\node_modules\webpack\lib\dependencies\ContextDependency.js:82:18)
    at Compilation.reportDependencyErrorsAndWarnings (C:\Projects\My\GitLab\inseritas-web\node_modules\webpack\lib\Compilation.js:2565:24)
    at C:\Projects\My\GitLab\inseritas-web\node_modules\webpack\lib\Compilation.js:2193:10
    at _next2 (eval at create (C:\Projects\My\GitLab\inseritas-web\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:34:1)
    at eval (eval at create (C:\Projects\My\GitLab\inseritas-web\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:62:1)    at C:\Projects\My\GitLab\inseritas-web\node_modules\webpack\lib\FlagDependencyExportsPlugin.js:375:11
    at C:\Projects\My\GitLab\inseritas-web\node_modules\neo-async\async.js:2830:7
    at Object.each (C:\Projects\My\GitLab\inseritas-web\node_modules\neo-async\async.js:2850:39)
    at C:\Projects\My\GitLab\inseritas-web\node_modules\webpack\lib\FlagDependencyExportsPlugin.js:354:18
    at C:\Projects\My\GitLab\inseritas-web\node_modules\neo-async\async.js:2830:7
    at Object.each (C:\Projects\My\GitLab\inseritas-web\node_modules\neo-async\async.js:2850:39)
    at C:\Projects\My\GitLab\inseritas-web\node_modules\webpack\lib\FlagDependencyExportsPlugin.js:48:16
    at Hook.eval [as callAsync] (eval at create (C:\Projects\My\GitLab\inseritas-web\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:58:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Projects\My\GitLab\inseritas-web\node_modules\tapable\lib\Hook.js:18:14)
    at Compilation.finish (C:\Projects\My\GitLab\inseritas-web\node_modules\webpack\lib\Compilation.js:2185:28)
    at C:\Projects\My\GitLab\inseritas-web\node_modules\webpack\lib\Compiler.js:1089:19