How should one do to remove server folder from react-boilerplate? Question is also asked here by another person https://github.com/react-boilerplate/react-boilerplate/issues/2110.
Removing just server folder will not work because the webpack dev configuration is utilising it for hot reload as well as your npm start command starts express server from this folder.
If you want to remove server folder completely and still want the application to be working as it was like hot reloading etc, follow the below steps. We will require webpack dev server in that case:
Remove ./server folder manually.
Install webpack-dev-server and react-hot-loader as dev dependencies.
In your ./internals/webpack/webpack.dev.babel.js, do the following modifications:
Change entry to this:
entry: [
require.resolve('react-app-polyfill/ie11'),
'react-hot-loader/patch',
`webpack-dev-server/client?http://localhost:3000/`,
'webpack/hot/only-dev-server',
path.join(process.cwd(), 'app/app.js'), // Start with js/app.js
],
Add publicPath in output:
output: {
filename: '[name].js',
chunkFilename: '[name].chunk.js',
publicPath: `http://localhost:3000/`,
},
Add webpack dev server config property in the same file:
devServer: {
port: 3000,
publicPath: `http://localhost:3000/`,
compress: true,
noInfo: false,
stats: 'errors-only',
inline: true,
lazy: false,
hot: true,
open: true,
overlay: true,
headers: { 'Access-Control-Allow-Origin': '*' },
contentBase: path.join(__dirname, '..', '..', 'app', 'build'),
watchOptions: {
aggregateTimeout: 300,
ignored: /node_modules/,
poll: 100,
},
historyApiFallback: {
verbose: true,
disableDotRule: false,
},
},
In ./internals/webpack/webpack.base.babel.js, add the line:
devServer: options.devServer,
And finally, modify your start script in package.json as below:
"start": "cross-env NODE_ENV=development node --trace-warnings ./node_modules/webpack-dev-server/bin/webpack-dev-server --color --config internals/webpack/webpack.dev.babel.js",
And you are good to go!!
Just remove with rm -rf ./server if you feel harassed :)
Related
This is my current webpack.config.js:
module.exports = {
// ...
mode: 'development',
devtool: 'inline-source-map',
devServer: {
static: {
directory: path.join(__dirname, 'dist'),
},
compress: true,
port: 9000,
historyApiFallback: {
index: 'index.html'
},
},
// ...
};
I can make it work if the index.html file is in the dist folder but I don't want it there because I want that folder to be purely generated files so that I can tell git to ignore it.
How can I make the dev server run from using an index.html in the root folder (or even from ./src for that matter).
I have debugger for chrome extension installed. I run my app using
webpack-dev-server -d --config webpack.dev.js --inline
I'm running a react app, all source codes are under /src folder. I have js, ts and tsx files. When I put a breakpoint on render function, editor properly breaks execution, but when I put a breakpoint to an onClick event of a button, it doesn't break, it just continues the execution of the code.
related part of my webpack config is as follows:
mode: 'development',
devtool: 'source-map',
entry: {
bundle: [
'#babel/polyfill',
'react-hot-loader/patch',
`webpack-dev-server/client?http://${host}:${devPort}`,
'webpack/hot/only-dev-server',
path.resolve(__dirname, 'src/index.js'),
],
},
output: {
path: path.resolve(__dirname, 'public'),
publicPath: '/',
filename: '[name].[hash:16].js',
chunkFilename: '[id].[hash:16].js',
},
devServer: {
inline: true,
port: devPort,
contentBase: path.resolve(__dirname, 'public'),
hot: true,
writeToDisk: true,
publicPath: '/',
historyApiFallback: true,
host,
}
and my launch.json is as below:
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///./src/*.js": "${workspaceRoot}/src/*.js",
"webpack:///./src/*.tsx": "${workspaceRoot}/src/*.tsx",
"webpack:///./src/*.ts": "${workspaceRoot}/src/*.ts",
"webpack:///./node_modules/*": "${workspaceRoot}/node_modules/*"
}
}
What I'm missing?
I got this to work by using inline-source-map in my config file:
{
devtool: 'inline-source-map',
// ....
}
Now it works properly and breaks wherever I put the breakpoint.
I was facing the same issue with create-react-app. In webpack.config.js (after ejecting) I changed devtool: isEnvProduction? shouldUseSourceMap ? "inline-source-map" instead of "source-map" and now my breakpoints are constantly hitting!
Thanks for the tip!
I got the webpack-dev-server hot reloading feature working with the following webpack.config.js file.
mode: 'development',
watch: true,
entry: path.join(__dirname, 'src/app.js'),
devServer: {
contentBase: path.join(__dirname, 'public'),
hot: true,
inline: true,
historyApiFallback: true,
watchContentBase: true,
port: 9001
},
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
},
Index.html serves to
<script src="./bundle.js"></script>
What i am trying to do right now is refactor the directories so that the bundle.js will fall into public/build and index.html will fall into public/dist. So i changed my webpack.config.js as following
mode: 'development',
watch: true,
entry: path.join(__dirname, 'src/app.js'),
devServer: {
contentBase: path.join(__dirname, 'public', 'dist'),
hot: true,
inline: true,
historyApiFallback: true,
watchContentBase: true,
port: 9001
},
output: {
path: path.join(__dirname, 'public','build'),
filename: 'bundle.js',
},
Index.html serves to
<script src="../build/bundle.js"></script>
But the above config does not work and i get bundle.js config not found.
My express server is serving the static path as follows.
const publicPath=path.join(__dirname,'..','public')
console.log('publicpath',publicPath);
app.use(express.static(publicPath))
Any reason why the directory structure fail to work with HMR?
Attached is my directory structure.
I try react aplication for running docker
compiled successfully but I am plagued with the problem that changes to React files are not detected.
I tried add watch option and build producition mode but None of them worked
https://medium.com/#zwegrzyniak/docker-compose-and-webpack-dev-server-hot-reloads-b73b65d13d79
This article seems to be the most direct problem for me, but I'm not sure
this mycode
webpack.config.js
const publidDir = `${__dirname}/public`;
module.exports = {
entry: [
'./src/index.jsx',
],
output: {
path: publidDir,
publicPath: '/',
filename: 'bundle.js',
},
module: {
rules: [{
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015'],
},
}],
},
resolve: {
extensions: ['.js', '.jsx'],
},
watch: true,
watchOptions: {
aggregateTimeout: 300,
poll: 1000
},
devServer: {
historyApiFallback: true,
contentBase: publidDir,
host: '0.0.0.0',
port: '3000',
open: true,
hot: true,
},
};
Dockerfile
FROM node:10.16.3-alpine
RUN mkdir -p /src
WORKDIR /src
COPY ./ ./
RUN yarn install
CMD ["yarn", "start"]
EXPOSE 3000
docker-compose.yml
version: "3"
services:
webpack:
build: ./docker
ports:
- "3000:3000"
volumes:
- ./docker/src:/docker/src
thanks
If I start my webpack-dev-server it listens for my application on localhost:8080/. I want now move the context for application from '/' to '/test'. Is there any way to do this?
Every help is welcome.
My part of package.json to start webpack-dev-server
"devserver": "./node_modules/.bin/webpack-dev-server --host 0.0.0.0 --inline --hot --config webpack.config.devel.js --content-base public/"
It seems to work with webpack config. Tho original configuration looks like
...
module.exports = {
devtool: 'source-map',
entry: [
'./src/index.tsx'
],
output: {
path: path.join(__dirname, 'public/dist'),
filename: 'my_app.js',
publicPath: '/dist'
},
...
After change the publicPath attrib the application is accessible with context '/test'
output: {
path: path.join(__dirname, 'public/test'),
filename: 'my_app.js',
publicPath: '/test/'
},