We are having a big environment where we have several applications under the same domain eg:
foo.org/a
foo.org/b
We have set up IIS to act in the same way on localhost, so we can type:
localhost/a
localhost/b
to reach the applications. The setup is done so to avoid CORS problems.
We are now trying to create a new application with "create-react-app" (https://github.com/facebook/create-react-app).
To add relative paths when you build for production is no problem, the problems occur when you try to run this with react-scripts start on localhost.
It seems it doesn't support relative paths so it always try to fetch build.js and other resources from /and there is not possible to set this without ejecting webpack.
So my question is, do you have any good ways of sorting this out? Ejecting webpack is not a good solution for us.
You can ejecting the config files by running: npm run eject
Then you'll find a config folder created in your project.
You will find your webpack config files init, where you should be able to change the "root" folder:
module.exports = {
...
resolve: {
modules: [
path.resolve(__dirname, 'node_modules'),
path.resolve(__dirname, './'), // "root" folder
]
}
...
}
Edit: Oh sorry - didn't see that ejecting is no option for you... And unfortunately I don't know any other solution.
"homepage": "/subfolder/path", in package json file should help
Related
Context
I have two projects, main and styles.
Main uses styles as an npm package, importing it as #companyname/styles.
I need to make changes to styles and want to link it locally to see these changes in main.
This is a react app, using Webpack and babel. Yarn is the favoured package manager.
Problem
Using npm link OR yarn link works in so far as I can go into the node_modules/#companyname/styles folder in main and see my changes in there.
However, no changes are reflected in the browser.
I only use one or the other (yarn/npm) at a time, but problem exists with either one
Things I've tried
Deleting node_modules, reinstalling and re-linking
Unlinking and re-linking
Rebuilding
Clearing npm cache, clearing yarn cache
Viewing site in incognito
Deleting dist folder in main and reinstalling
Adding CleanWebpackPlugin to my webpack config
Adding hot: true, to my devServer config in webpack config.
TL;DR
Yarn/npm link not showing my changes in browser, however will show changes in node_modules. Something causing browser to not read changes. Please help.
Have you tried deleting the lock file?
rm package-lock.json
npm clean-install
the cause is in webpack configuration. It took me days to find the perfect combination for symlink packages.
In my case, my project was a Vue app.
So here's a summary of my findings for people from the future (for Webpack 5):
const path = require('path');
module.exports = {
resolve: {
symlinks: false // Important so that symlink packages are resolved to their symlinked location
// If your package contains frontend framework components, prevent two instances of the framework (React for example), one from the app and the other one from the symlink package
// Kudos to https://stackoverflow.com/a/68497876/11840890
alias: {
react: path.resolve('./node_modules/react'),
'#': path.resolve(__dirname, './src') // Add this alias if you get a new issue after setting up the first one
}
},
snapshot: {
// Even though added changes on the symlink package may trigger rebuild, they might not be seen on the browser (using HMR or not)
// To prevent reloading dev server every time, add this (it will include only node_modules but your package in the cache):
managedPaths: [
/^(.+?[\\/]node_modules[\\/](?!(#author[\\/]your-package))(#.+?[\\/])?.+?)[\\/]/,
],
},
}
I have a big project which I was trying to reduce in size using webpack-p according to here: https://hackernoon.com/reduce-webpack-bundle-size-for-production-880bb6b2c72f
I could not run it as I was encountering problems when running webpack -p (it threw an error on every function of index.js
I thought it might be something with my packages. I decided to create new create-react-app and run the command there. To my surprise, there I get the same error:
What might be the problem here?
If your app uses webpack v4 you must use webpack --mode=production instead of webpack -p.
Possible values for mode are: none, development or production.
Another usage:
// webpack.config.js
module.exports = {
...
mode: 'production',
...
}
You don't have a config file because the command you are trying to run is global, it is not getting from your current working directory. Run npm run build instead, which does that under the hood, but has a lot of other things created by the contributors of create-react-app.
You could pass a config file for the global webpack cli, but you don't have access for that in your folder since it is "not" available for your. npm run build also already applies a lot of optimizations for you.
I'm in the process of writing a web app but I constantly see something that really wakes my OCD up. The "src" folder created by create-react-app just doesn't fit well with my idea of folder structure, I'd rather put my views inside a folder called "views". I tried to search for a solution but all I found was "create a symlink". Is there any way to make create-react-app to nominate "src" with some other names?
You can yarn run eject your CRA boilerplate to Tweak with webpack.config.js. yarn run eject reveals the entire preloaders and plugins used to compile your project.
sample script from webpack's wiki
{
context: __dirname + "/views",
entry: "./entry",
output: {
path: __dirname + "/dist",
filename: "bundle.js"
}
}
Important
yarn run eject is a one-way road and you cannot revert back. so be careful.
I am fiddling around with the following local drf-react setup. I'm really new to react and javascript overall and got absolutely no idea why I cannot import axios or any other node module for that matter in my react components, except for the modules that already shipped with the cookiecutter project itself. Is this related to the react-dev-utils..? I would like to use webpack, but I fail to set it up properly. My frontend docker container won't compose, telling me to install webpack-cli. Help is much appreciated.
https://github.com/moritz91/drf-react-app
You should run the command npm install inside your frontend folder:
Open the terminal
Find the frontend folder
Inside of it run the command npm install
This command will install the dependencies related to your package.json file, which is inside the frontend folder.
Inside your React files you will put the whole path to the node_modules folder.
The idea of using node_modules is to make it easier to control your dependencies in your project. You should consider again using webpack to handle these files from node_modules.
Wepack has a module called resolve which you have to fill with a list of directories and inside React components you don't need to use the whole path anymore, because Webpack will understand where to look:
// ALIAS
resolve: {
extensions: ['.js', '.jsx', '.scss'],
modules: [
'YOUR SOURCE FOLDER',
'YOUR NODE MODULES FOLDER',
'ANY OTHER FOLDER'
]
}
From the docs:
Tell webpack what directories should be searched when resolving modules.
The documentation: https://webpack.js.org/configuration/resolve/
Also, I have an example using Webpack + Bootstrap 4.
You can use to build your own Webpack config for React and Redux.
https://github.com/italoborges/webpack-bootstrap4-es6
I receive this errors from react and redux when I tried to deploy my test app. But these errors don't appear on my local machine.
But then I realized that my local machine is not using the minified version of the bundle (but my deployed app is using the minified version), so I minified the bundle, then boom! the errors appeared. Any idea why this happens and how it can be fixed?
Thanks in advance for those who would help.
Okay I get it.
So when minified, react is looking for the process.env.NODE_ENV and checking whether it is set to production. there are two solutions for this:
Solution one
The easiest way of doing this (if you're using webpack, which is, I am) is to run webpack --define process.env.NODE_ENV='\"production\"' which will take care of it for you.
Solution two
is to add these on your plugins in your webpack.config.js file.
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
})