The project I'm working on has Redis on port 6379 and the node server on port 5000. I'm running the server by running npm run server
My package.json script is the following:
webpack --watch --progress --config ./build/server/webpack.dev.js
I'm unable to attach a debugger when I add a configuration for Attach to Node.js/Chrome on port 5000 and click the bug icon in WebStorm.
I get invalid response from the remote host
Am I supposed to patch an --inspect option to my package JSON script?
EDIT: I passed inspect down to nodemon. I'm able to attach to the debugger now, but my breakpoints arent suspending. The webpack configs are below:
const commonWebpackConfig = require('./webpack.common')
const merge = require('webpack-merge')
const NodemonPlugin = require('nodemon-webpack-plugin')
module.exports = merge(commonWebpackConfig, {
mode: 'development',
plugins: [
new NodemonPlugin({
nodeArgs: [ '--inspect'],
script: './dist/server.js'
})
]
})
const path = require('path')
const webpack = require('webpack')
const nodeExternals = require('webpack-node-externals')
module.exports = {
entry: {
server: path.join(__dirname, '..', '..', 'server', 'app.js'),
},
output: {
path: path.join(__dirname, '..', '..', 'dist'),
publicPath: '/',
filename: '[name].js'
},
target: 'node',
node: {
__dirname: false,
__filename: false,
},
externals: [nodeExternals()],
resolve: {
extensions: ['.js']
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
plugins: [
['#babel/plugin-proposal-class-properties', {'loose': false}]
]
}
}
}
]
}
}
I found the breakpoint mapping issue. I needed to add the following:
devtool: "eval-source-map",
EDIT:
I don't think the breakpoints are fully working for blocsk of code that has async/await though
I was able to get it to work. We were using nodemon-webpack-plugin, so I needed to pass in nodeArgs like Lena said. I passed it --inspect which by default is port 9229.
I then had to add devtools: "eval-source-map So that my breakpoints had the right mapping.
EDIT:
I don't think the breakpoints are fully working for blocsk of code that has async/await though
Related
I've tried almost every solution but I can't find any solution for this problem. I'm using express to render my ReactJS code, build with webpack. I can open pages without any issues until I'm being redirected from home page. But when I tried entering the URL on browser or refresh the page, I cannot see the page. Instead I see this error:
Cannot GET /path
I have also tried adding historyApiFallback: true to my webpack.config.js but no luck there.
Below are my scripts from package.json
{
...
"scripts": {
"build": "webpack --config webpack.config.js",
"dev": "webpack-dev-server --mode development --open",
"start": "npm run build && node server.js"
},
...
}
And this is my webpack.config.js:
const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path');
const htmlPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js',
publicPath: '/',
},
devServer: {
historyApiFallback: true,
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
]
},
plugins: [htmlPlugin],
resolve: {
extensions: ['*', '.js', '.jsx']
},
};
And the server.js file:
const path = require('path');
const express = require('express');
const PORT = process.env.PORT || 3000;
const app = express();
app.use(express.static(path.join(__dirname, 'dist')));
app.get('/', function(request, response) {
response.sendFile(__dirname + '/dist/index.html');
});
app.listen(PORT, error => (
error
? console.error(error)
: console.info(`Listening on port ${PORT}. Visit http://localhost:${PORT}/ in your browser.`)
));
Important NOTE
When I run server with npm run dev, there is no issues. I can enter URL manually and refresh the page.
But when I run server with npm run start, I am facing the issue I described above.
app.get('/', ... ); only sends back the index.html on the / path, you need to return it on every path
app.get('*', function(request, response) {
response.sendFile(__dirname + '/dist/index.html');
});
Is it possible to render template files (such as Pug or Handlebars) dynamically at runtime using Webpack and Express?
My issue is when loading my root page (index.pug), the html loads however no assets are loading.
Example:
app
.set('views', path.join(__dirname, 'views'))
.set('view engine', 'pug')
.use('/', function(req, res) {
res.render('index', {some: 'param'})
})
If I remove the '/' route handler, the page loads with all of the assets just fine.
Client webpack.config.js file:
module.exports = {
entry: {
main: ['webpack-hot-middleware/client?path=/__webpack_hmr&timeout=60000', './index.js', './css/main.css']
},
output: {
path: path.join(__dirname, 'dist'),
publicPath: '/',
filename: '[name].js'
},
mode: 'development',
target: 'web',
devtool: '#source-map',
module: {
rules: [
{
test: /\.pug$/,
use: ['html-loader?attrs=false', 'pug-html-loader']
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: './views/index.pug',
filename: "./index.html",
excludeChunks: [ 'app' ]
})
]
}
Server webpack.server.config.js:
module.exports = (env, argv) => {
return ({
entry: {
app: 'app.js',
},
output: {
path: path.join(__dirname, 'dist'),
publicPath: '/',
filename: '[name].js'
},
target: 'node',
node: {
// Need this when working with express, otherwise the build fails
__dirname: false, // if you don't put this is, __dirname
__filename: false, // and __filename return blank or /
},
externals: [nodeExternals()], // Need this to avoid error when working with Express
module: {
rules: [
{
// Transpiles ES6-8 into ES5
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
})
}
You can make it work in 2 easy steps (based on the code above).
In server change the views path to where your built template is going to be. In the example above it's going to be inside the dist folder
app
.set("views", "./dist");
.set('view engine', 'pug')
.use('/', function(req, res) {
res.render('index', {some: 'param'})
})
At this point, after we run a build script and start the server we would get a message that there's no view in dist folder, which is correct because engine is looking for a template and all we have are html files
In webpack.config.js in HtmlWebPackPlugin we need to leave a filename as a template
plugins: [
new HtmlWebPackPlugin({
template: './views/index.pug',
filename: "./index.pug",
excludeChunks: [ 'app' ]
})
]
And that's it. Now template engine will find index.pug in dist with injected style and script and generate html from it
Note: In production it's important to set a path for static files, otherwise you won't get your css displayed even though the link tags were injected correctly
app.use(express.static(__dirname));
The above solution worked for me when I run into the same problem, but with the ejs template. I couldn't find the answer to it anywhere, so hopefully, it will save someone hours of frustration.
I have my React app compiling all fine in dev & prod scripts, however, now that I am deploying on DigitalOcean, I am running into a problem with process.env.port being undefined and therefore falling back to 3000 and not the expected port 80.
Package.json npm script:
"build": "webpack -p --config webpack.config.production.js &&
cross-env NODE_ENV=production node server/server.js"
Webpack.config.production.js script which includes the DefinePlugin() for process.env:
module.exports = {
entry: {
app: ["./src/scripts/index.js"]
},
output: {
filename: "[name]-bundle.js", path: __dirname, publicPath: "/"
},
devtool: "source-map",
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: ["babel-loader"]
},
{
test: /\.(scss|css)$/,
use: [
{loader: "style-loader"}, {
loader: "css-loader"}, {
loader: "sass-loader"}, {
loader: "postcss-loader"}
}
]
},
{
test: /\.(jpg|png|svg)$/,
use: {
loader: "file-loader",
options: {
name: "[path][name].[ext]"
}
}
}
]
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production")
}
}),
extractSass,
new UglifyJsPlugin({
sourceMap: true,
uglifyOptions: {
output: {
comments: false
}
}
}),
new HtmlWebpackPlugin({
template: "public/index.html",
favicon: "public/assets/img/favicon.ico"
}),
new ExtractTextPlugin({
filename: "styles/styles.css",
allChunks: true
})
]
};
my express server file:
const path = require("path");
const express = require("express");
const app = express();
const port = process.env.PORT || 3000;
let useFolder;
if (process.env.NODE_ENV !== "production") {
useFolder = "/public/";
const webpack = require("webpack");
const config = require("../webpack.config.development");
const compiler = webpack(config);
app.use(
require("webpack-dev-middleware")(compiler, {
noInfo: true,
publicPath: config.output.publicPath,
hot: true
})
);
app.use(
require("webpack-hot-middleware")(compiler, {
log: console.log,
path: "/__webpack_hmr",
heartbeat: 10 * 1000
})
);
} else {
useFolder = "/dist/";
}
app.use(express.static("dist"));
app.get("/", function(req, res) {
res.sendFile(path.join(__dirname, ".." + useFolder + "index.html"));
});
app.listen(port, function(err) {
if (err) {
return console.error(err);
}
console.log("Listening at port: ", port);
});
There are no errors, and when it runs on backup port 3000 all is good on the live server, but I am expecting port 80.
I have tried swapping where NODE_ENV=production gets set: removing from NPM script, and DefinePlugin() but no success either.
Webpack will by default bundle for web. This means it will replace all process.env. statements with what you have defined in the DefinePlugin. You never set PORT to anything, so it will be undefined.
You have two options, either define PORT in the DefinePlugin, or change the webpack target to node and remove the DefinePlugin. This will make webpack use the actual environment variables on runtime.
https://webpack.js.org/concepts/targets/
To create environment variable within the project create a .env file at the root of the project and add values in that file. You may have to re-run the deployment script you have to bundle them all again. We normally comment values related to other environments during the deployment, we have a script to do that.
#dev
PORT=6000
URL=Blahhh.dev.com
#prod
PORT=7000
URL=Blahhh.com
I'm a webpack newbie. I'm trying to add React to a simple Node project but I've only ever used React with a pre set up webpack dev server and not with another server. Webpack runs it's own node server so this poses one problem for me.
Here's what I need help with:
How do I add hot loading and source mapping if I'm using Express?
How can I add a global Bootstrap css from my public folder with webpack to this project (is there a way to do that kinda of how I did this with the js files and html-webpack-plugin)?
I've tried using webpack's dev server to get get hot loading but I've run into the problem where I have two servers conflicting: webpack and app.js server.
Here's part of my app.js file
var app = module.exports = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, 'public')));
//API Routes
// all other requests
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});
// Starting server
http.createServer(app).listen(port);
.babelrc
{
"presets": [
"react",
"es2015",
"stage-0"
]
}
webpack.config.babel
import webpack from 'webpack'
var HtmlWebpackPlugin = require('html-webpack-plugin')
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/public/index.html',
filename: 'index.html',
inject: 'body'
})
const base = {
entry: {
"jquery": __dirname + '/public/js/lib/jquery/jquery-2.0.3.min.js',
"bootstrap": __dirname + '/public/bootstrap/js/bootstrap.min.js',
"index": __dirname + '/app',
},
output: {
path: __dirname + '/dist',
filename: '[name].js',
},
module: {
loaders: [
{test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
{test: /\.css$/, loader: 'style!css?sourceMap&modules&localIdentName=[name]__[local]___[hash:base64:5]'}
]
},
}
const developmentConfig = {
devtool: 'cheap-module-inline-source-map',
plugins: [HTMLWebpackPluginConfig]
}
export default Object.assign({}, base, developmentConfig)
I tried adding new ExtractTextPlugin("dist/[name].css") to plugins and replacing my css loader with loader: ExtractTextPlugin.extract("style-loader", "css-loader") but I'm still not able to add bootstrap css or any css to my app.
Notice in your webpack.config.babel file you have this output:
output: {
path: __dirname + '/dist',
filename: '[name].js',
},
You need to put this [name].js file in your dist/index.html.
This blog post might be helpful for you for getting yourself properly set up!
I am following a few tutorials, but mainly the one by Dan Abramov on setting up react hot loader but I am having some issues. I think I have a basic configuration working, however hot reloading of component does not seem to work, so obviously the hot loader set up is wrong :(
When I change a component, my browser console logs this:
The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See http://webpack.github.io/docs/hot-module-replacement-with-webpack.html for more details.
- ./app/components/Home/index.jsx
To start off, here is my file structure:
.
|++[app]
|----[actions]
|----[modules]
|----[reducers]
|----[store]
|----index.html
|----index.js
|--[config]
|----server.js
|----webpack.config.js
|--[node_modules]
|--package.json
Here's my webpack config:
var webpack = require('webpack');
var path = require('path');
var autoprefixer = require('autoprefixer');
var isProd = process.env.NODE_ENV === 'production';
module.exports = {
devtool: isProd ? null : 'source-map',
entry: [
'webpack-hot-middleware/client',
path.resolve('app/index.js')
],
output: {
path: path.resolve('dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
resolve: {
root: path.resolve( 'app/'),
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
test: /\.jsx?$/,
loaders: [
'babel'
],
include: path.resolve('.'),
exclude: /node_modules/
},
{
test: /\.(png|jpg)$/,
loader: 'file-loader?name=img/[name].[ext]'
},
{
test: /\.scss$/,
loader: 'style!css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!postcss!sass'
}
]
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin()
],
postcss: [
autoprefixer({ browsers: ['last 3 versions'] })
]
};
And my server.js
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
var config = require('./webpack.config');
var path = require('path');
var app = new (require('express'))();
var port = 3000;
var compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }));
app.use(webpackHotMiddleware(compiler));
app.get('/*', function(req, res) {
res.sendFile(path.resolve('app/index.html'));
});
app.listen(port, function(error) {
if (error) {
console.error(error);
} else {
console.info('started on localhost://%s.', port);
}
});
The react-hot loader is missing within your module.loaders array. More into this.
Next we need to tell Webpack to use React Hot Loader for the components. If you configured Webpack for React, you may already use babel-loader (ex 6to5-loader) or jsx-loader for JS(X) files. Find that line in webpack.config.js and put react-hot before other loader(s).
So you need to add the react-hot loader before your babel loader, like so:
{
test: /\.jsx?$/,
loader: 'react-hot',
exclude: /node_modules/
}
And also you need to install the react-hot-loader module if you haven't already.
npm i -D react-hot-loader