how do I change webpack host url? currently my project is running on localhost:8080, I want to run my project on localhost:80/reactApp, how do I do that?
configuration of my system
{
"name": "wp-api",
"version": "1.0.0",
"description": "curejoy website",
"main": "http_server.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"bootstrap": "^3.3.7",
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^2.28.0",
"webpack": "^2.6.1",
"webpack-dev-server": "^2.4.5"
}
}
this my configuration, i am entirely new to this environment, from past two days i am trying to achieve this, but i could not able to do so.
webpack config file
var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
template: __dirname + '/reactJs/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports={
entry:[__dirname+'/reactJs/index.js',
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:80/curejoy'
],
module:{
loaders:[
{
test: /\.jsx?$/,
exclude:/node_modules/,
loader: 'babel-loader'
}
]
},
output:{
filename:'main.js',
path: __dirname+ '/build'
},
plugins: [HTMLWebpackPluginConfig]
};
this is my webpack config file, here i have defined some with help of google. like entry and outputs. and i tried to change my project url by entry, still nothing happened
Since you are using webpack it makes your life very easy.
You can use the inbuilt flags provided by webpack.
--host and --port is what you are looking for. Run your server in this format
webpack-dev-server --host 0.0.0.0 --port 80
Hope that helps!
Related
I am trying to bundle Vaadin in a single file to be loaded inside my portal (which running with AngularJS V1.x) following this guide. It fails because is using an old configuration (which I fixed for the development mode but I didn't for the production one) and because I could bundle the references left in the node modules instead of copied inside the bundle.
So I tried with a new webpack setup with this configuration:
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
var config = {
// TODO: Add common Configuration
mode: 'development',
performance: {
hints: false,
maxEntrypointSize: 5512000,
maxAssetSize: 5512000
},
devServer: {
contentBase: './dist',
},
module: {}
};
var jsConfig = Object.assign({}, config, {
entry: {
index: './src/index.js',
vaadin: './src/webcomponentsjs/main.js'
},
optimization: {
minimize: true
},
plugins: [
new HtmlWebpackPlugin({
title: 'Vaadin Library',
template: './src/index.html'
}),
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1,
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: false
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
plugins: ['transform-class-properties']
}
}
}
],
}
});
module.exports = [
jsConfig
];
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"private": true,
"dependencies": {
"lodash": "^4.17.21",
"web-animations-js": "^2.3.2"
},
"devDependencies": {
"#babel/cli": "^7.14.5",
"#babel/core": "^7.14.6",
"#babel/plugin-syntax-top-level-await": "^7.14.5",
"#babel/plugin-transform-template-literals": "^7.14.5",
"#babel/preset-env": "^7.14.5",
"babel-core": "^7.0.0-bridge.0",
"babel-loader": "^8.2.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"css-loader": "^5.2.6",
"extract-text-webpack-plugin": "^3.0.2",
"html-webpack-plugin": "^5.3.1",
"install": "^0.13.0",
"mini-css-extract-plugin": "^1.6.0",
"npm": "^7.17.0",
"sass": "^1.35.1",
"sass-loader": "^12.1.0",
"script-ext-html-webpack-plugin": "^2.1.5",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"webpack": "^5.39.1",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "echo \"Bundling Vaadin library to less files and convert to ES5 with Webpack and Babel (loader)\" && webpack",
"start": "webpack serve --open"
},
"keywords": [],
"author": "",
"license": "ISC"
}
And here the errors (for each component imported in index.js):
ERROR in ./src/index.js 2:0-31
Module not found: Error: Can't resolve '#vaadin/vaadin-button' in '/Users/username/Dev/current/webpack-vaadin/src'
Did you mean './#vaadin/vaadin-button'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.
Did anyone already manage to import Vaadin into an angularJs application? How did you do or could you point me at the right place in the documentation (which I didn't find as very new with this FW)?
Thanks in advance.
I have a website that I've had up for maybe a couple of years now, and I think it's starting to get outdated. I haven't touched it in a while, so I'm not exactly sure what is going on with it. I'm not exactly sure what the issue is, but it might have to do with my webpack version, or maybe my react version, I'm not really sure.
The issue started because I was trying to run webpack --mode production because I wanted to remake the bundle.js file, and when I would run this command, the file wouldn't create the bundle.js. Eventually I somehow came to the conclusion that there was something wrong with my webpack version, and so I updated it to the most recent version that was compatible with my dependencies which was version 4.46.0. I tried the command again, and this time it gives me this error:
[0] ./src/index.js 666 bytes {0} [built] [failed] [1 error]
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (6:4)
4 |
5 | ReactDOM.render(
> 6 | <App />,
| ^
7 | document.getElementById("root")
8 | );
I tried reinstalling different versions of babel-loader, but the least bad error seems to be with the version 7.1.5. I also tried deleting my node-modules and then running npm install. Here is my package.json:
{
"name": "mywebsite",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --mode production",
"set-dev-server": "webpack-dev-server --open --mode development",
"start": "npm run build && npm run set-dev-server",
"deploy": "gh-pages -d dist",
"publish-demo": "npm run build && npm run deploy"
},
"repository": {
"type": "git",
"url": "git+my/github/link"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "my/github/link/issues"
},
"homepage": "my/github/link",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"file-loader": "^1.1.11",
"gh-pages": "^1.2.0",
"html-webpack-plugin": "^3.2.0",
"image-webpack-loader": "^7.0.1",
"jquery": "^3.5.1",
"node-css": "^0.1.0",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"sass-loader": "^7.3.1",
"style-loader": "^0.21.0",
"styled-components": "^5.2.1",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"#babel/core": "^7.13.8",
"babel-loader": "^7.1.5",
"css-loader": "^5.1.1",
"node-sass": "^5.0.0",
"schema-utils": "^3.0.0",
"webpack": "^4.46.0"
}
}
From what I found online the issue could also have to do with the webpack.config.js, but all of the issues I could find were from really old versions of webpack (2 or 3?), but anyways here is what I have in that file:
const path = require("path");
const webpack = require("webpack");
const bundlePath = path.resolve(__dirname, "dist/");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlWebpackPlugin = new HtmlWebpackPlugin({
template: path.join(__dirname, "dist/index.html"),
filename: "index.html"
});
module.exports = {
entry: path.join(__dirname, "src/index.js"),
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: { presets: ['env'] }
},
{
test: /\.scss$/,
use: [ 'style-loader', 'css-loader', 'sass-loader' ]
},
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true, // webpack#1.x
disable: true, // webpack#2.x and newer
},
},
],
}
]
},
resolve: { extensions: ['*', '.js', '.jsx'] },
output: {
publicPath: bundlePath,
filename: "bundle.js"
},
devServer: {
contentBase: path.join(__dirname,'dist/'),
port: 3000,
publicPath: "http://localhost:3000/"
},
plugins: [ new webpack.HotModuleReplacementPlugin(), htmlWebpackPlugin ]
};
Looks like you are using a jsx token <> while your file is named index.js. Try naming it as index.jsx
My project is running a VERY old version of React and I would like to drag it into 16. I went through the "best practice" tutorial on how to get 16 up and running and ended up with these two machine generated files,
package.json
{
"name": "asset_iq",
"version": "1.0.0",
"description": "New application for the old dealer net",
"main": "bundle.js",
"directories": {
"doc": "docs",
"test": "test"
},
"scripts": {
"start": "webpack-dev-server --progress --colors --hot --config ./webpack.config.js"
},
"keywords": [
"React",
"Redux",
"ES6"
],
"author": "Mark Addinall",
"license": "ISC",
"babel": {
"presets": [
"es2015",
"react",
"stage-2"
]
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"react-hot-loader": "^3.1.3",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
},
"dependencies": {
"axios": "^0.17.1",
"lodash": "^4.17.4",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"redux": "^3.7.2",
"redux-form": "^7.2.0",
"redux-promise": "^0.5.3"
}
}
and webpack.config.js
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:8888',
'webpack/hot/only-dev-server',
'./src/index.js'
],
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'react-hot-loader!babel-loader'
}]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
hot: true
}
};
Now I have been using react and webpack for about a year, but on a version from the dark past. React 0.x! This looked reasonable to me, however,
npm start
> asset_iq#1.0.0 start /disk/dev/www/fastrack-react16/app/client
> webpack-dev-server --progress --colors --hot --config ./webpack.config.js
10% building modules 1/1 modules 0 active
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from ./dist
10% building modules 6/11 modules 5 active ...track-react16/app/client/src/index.js/disk/dev/www/fastrack-react16/app/client/node_modules/loader-runner/lib/loadLoader.js:35
throw new Error("Module '" + loader.path + "' is not a loader (must have normal or pitch function)");
^
The curious thing is the fact that it is trying to run the project on 8080 which IS in use so I think this is the start of the LIFECYCLE exception. Not sure why it is failing to start on 8888. I solved that by adding it in the devServer object at the end of the config file, however it is still failing with the same error.
Try to use the configuration of react-hot-loader in your webpack like this:
{
test: /\.(js|jsx)$/,
loader: require.resolve('babel-loader'),
options: {
cacheDirectory: true,
plugins: [
'react-hot-loader/babel'
]
}
}
Hope it helps :)
Need some direction in terms of setting up the DEV environment and server for a project I'm starting for learning purposes. I want to use ReacJS with Bootstrap. Last time I worked with ReactJS, the build and server was already configured and I did not have to do much. We were using npm, gulp and bunch of other stuff.
Now that I'm trying to set this up, I'm not sure what to do. Can someone outline the simplest steps I can follow. I want to use latest versions of React eco-system and ideally have a build system to minify and combine files and stuff. There is so much info on Google that it is confusing. Another challenge I'm facing is that which versions to specify in package.json. Instead of gulp I decided to use webpack. Wasn't really sure if to go with gulp or webpack but decided to go with webpack. It is all working but not sure if I have the most updated versions of everything or need more stuff. I know for sure I don't have any watchers to auto refresh page on changes. For server I'm just using npm, not sure if that is all I need or there are any advantages of using others.
This is my package.json
{
"name": "track",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --port 3000 --progress --inline",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"html-webpack-plugin": "^2.29.0",
"path": "^0.12.7",
"react": "^16.0.0",
"react-dom": "^15.6.1",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.5.0"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.0",
"babel-preset-es2017": "^6.24.1",
"babel-preset-react": "^6.24.1"
}
}
Below is the webpack.config.js
module.exports = {
entry: './src/app.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: { presets: [ 'es2015', 'react' ] }
}
]
}
};
Can someone outline the simplest steps I can follow.
I have faced very similar situation but i was working with react, redux, react-redux, other libraries and using axios for sending (http) request where i have to figure out by myself , Here's what i did :
NOTE: Make sure you have Node.js installed because i have Node along with webpack-dev-server here
npm init
Installed project dependencies using npm.
Inside script i have given link to node and webpack-dev-server as you can see
package.json
{
"name": "searchapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.3"
},
"dependencies": {
"babel-preset-stage-1": "^6.24.1",
"lodash": "^4.17.4",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"redux": "^3.7.2",
"redux-promise": "^0.5.3"
}
}
And this is webpack.config.js
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: {
bundle: './src/index.js',
},
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
loaders: [{
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-1']
}
}]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};
And then make sure to include .babelrc
{
"presets": ["react", "es2015", "stage-1"]
}
And if you have github repository make sure to include .gitignore file so that these folders or files will not be included in git repo
.gitignore
/node_modules
bundle.js
npm-debug.log
.DS_Store
If you think all of this is overwhelming and too much for a start then best place to start with is create-react-app
I'm trying to run webpack -w but its not running continuously as expected. Earlier it used to rebuild on every save in my code. But now it has stopped working because of which i have to run every time webpack -w in order to make the changes.
Let me know if I need to provide any other information.
//package.json
{
"name": "react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --color --inline --content-base public/ --history-api-fallback"
},
"repository": {
"type": "git",
"url": "*************"
},
"author": "",
"license": "ISC",
"homepage": "*********************",
"dependencies": {
"flux": "^2.1.1",
"jquery": "^3.0.0",
"material-ui": "^0.15.0",
"react": "^15.1.0",
"react-bootstrap-table": "^2.3.5",
"react-dom": "^15.1.0",
"react-mdl": "^1.5.4",
"react-router": "^2.4.1",
"react-tap-event-plugin": "^1.0.0"
},
"devDependencies": {
"babel-core": "^6.9.1",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"http-server": "^0.9.0",
"path": "^0.12.7",
"react-router": "^2.4.1",
"react-sidenav": "^1.0.4",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}
}
// webpack.config.js
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
module.exports = {
context: __dirname,
devtool: "inline-sourcemap",
entry: "./app/index.js",
output: {
path: __dirname + "/public/",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015&presets[]=react'
}
]
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
Here it what happens when I run "webpack -w"
$ webpack -w
Hash: 5f80fac0cde2c497f037
Version: webpack 1.13.1
Time: 4146ms
Asset Size Chunks Chunk Names
./public/bundle.js 3.03 MB 0 [emitted] main
+ 653 hidden modules
$
It should keep running my server and look for changes occured.
If I understood your question correctly, Your problem is with webpack hot reloading
For that you need to specify webpack where to look for while hot reloading.
If I'm not wrong, I don't see any mention of in memory location inside your entry object in your config file.
Also, If possible please post the relevant part of your server.js. It would be helpful for us to answer your problem.
Try adding this:
entry: [
'webpack-dev-server/client?http://0.0.0.0:3000', // WebpackDevServer host and port
'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
'./app/index.js' // Your appʼs entry point
]
The issue was that I didn't had much available watchers in my system. If this value is too low, the file watcher in Webpack won’t recognize the changes.
cat /proc/sys/fs/inotify/max_user_watches
Ubuntu users (and possibly others):
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p.
This solves my problem.
Here is the link: not-enough-watchers