Comments (18)
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
from razzle.
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.
from razzle.
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.
from razzle.
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.
from razzle.
Currently trying this out http://jlongster.com/Backend-Apps-with-Webpack--Part-I
Will do a PR when I get it working. π
from razzle.
Pm2 is a lot of overhead. We use Throng in production. But yes we can make that change.
from razzle.
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.
from razzle.
Will need to use webpack on the server
from razzle.
Problem is that there is no HMR on the server, even with jlongster's approach. π¦
from razzle.
How about if it was limited to production only?
from razzle.
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
}, {})
}
from razzle.
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?
from razzle.
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?
from razzle.
You donβt need Node modules in prod
from razzle.
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?
from razzle.
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.
from razzle.
Anyone got this working, I don't want to take the node_modules along to the production server after creating the bundle.
from razzle.
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
from razzle.
Related Issues (20)
- HMR does not activate when a file containing only types is modified
- Dependency Terminate uses GPLv2 License - any alternative?
- Can't deploy to heroku
- plugin options are coming to be undefined HOT 4
- Content Security Policy Implementation HOT 1
- Regarding deployment in server HOT 5
- For Laravel project, add it where ? please HOT 1
- Is the project abandoned? π€ HOT 8
- How to expose config to out ?
- digital envelope routines::unsupported HOT 1
- Why razzle forcing buffer and process package in ProvidePlugin if webpack version is 5
- Unexpected token: punc (.) HOT 6
- Does latest razzle support react 18 ? HOT 1
- Support for react 18 HOT 4
- ~Wrong repo~
- How to use webpack 5 with Razzle 4 HOT 1
- Razzle utilizes vulnerable versions of browserslist and minimatch as nested dependencies, causing security issues.
- Maybe mark this project as abandoned in its github repository description and in readme? HOT 2
- Anyone has a fork updated for webpack-dev-server 5? HOT 1
- How to use 'mini-css-extract-plugin' in razzle config HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from razzle.