We Keep Coding

How to change production build static folder path in a React project?

I have a React project on which I ran npm run build and it made a production build for me. The problem is that it gives me the following stylesheet injected into the index.html
<script src="./static/js/5.a4bfdba9.chunk.js"></script>
As you can see, the path set is ./static/js/
But I want the path to be set to ./static/dashboard/js/5.a4bfdba9.chunk.js
I can't figure out where or what to change to ensure every time I run the build, it takes the path specified by me instead of the default path?
Note: I looked at "homepage": "." attribute in package.json but changing this will only append a path before /static/js/

Update:
You will need to update the webpack config to achieve this. There are multiple ways to do that:
react-scripts eject (not recommended)
patch-package
react-app-rewired
I am providing steps for patch-package.
You need to make changes to the file config/webpack.config.js of react-scripts package. Here is a git diff of changes you need to make:
diff --git a/node_modules/react-scripts/config/webpack.config.js b/node_modules/react-scripts/config/webpack.config.js
index 26c2a65..ad29fbd 100644
--- a/node_modules/react-scripts/config/webpack.config.js
+++ b/node_modules/react-scripts/config/webpack.config.js
## -212,13 +212,13 ## module.exports = function (webpackEnv) {
// There will be one main bundle, and one file per asynchronous chunk.
// In development, it does not produce real files.
filename: isEnvProduction
- ? 'static/js/[name].[contenthash:8].js'
+ ? 'static/dashboard/js/[name].[contenthash:8].js'
: isEnvDevelopment && 'static/js/bundle.js',
// TODO: remove this when upgrading to webpack 5
futureEmitAssets: true,
// There are also additional JS chunk files if you use code splitting.
chunkFilename: isEnvProduction
- ? 'static/js/[name].[contenthash:8].chunk.js'
+ ? 'static/dashboard/js/[name].[contenthash:8].chunk.js'
: isEnvDevelopment && 'static/js/[name].chunk.js',
// webpack uses `publicPath` to determine where the app is being served from.
// It requires a trailing slash, or the file assets will get an incorrect path.
## -676,8 +676,8 ## module.exports = function (webpackEnv) {
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
- filename: 'static/css/[name].[contenthash:8].css',
- chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
+ filename: 'static/dashboard/css/[name].[contenthash:8].css',
+ chunkFilename: 'static/dashboard/css/[name].[contenthash:8].chunk.css',
}),
// Generate an asset manifest file with the following content:
// - "files" key: Mapping of all asset filenames to their corresponding
Now if you make these changes to node_modules/react-scripts/config/webpack.config.js you will get the files outputted to your desired folder and index.html will have correct paths too.
But the changes in node_modules will be overwritten if you install/uninstall any package. To persist those changes you can use patch-package, which will write your changes in node_modules after install.
Here are the steps to setup patch-package, you can read their readme file for more details:
yarn add patch-package postinstall-postinstall
Add this in scripts section of package.json:
"postinstall": "patch-package"
run patch-package to create a .patch file:
npx patch-package some-package
commit the patch file to share the fix with your team
git add patches/react-scripts+4.0.3.patch
git commit -m "change output dir structure in react-scripts"
I have created a git repository too for your reference.
Old Answer:
Warning: won't work for moving contents of build folder. Can move the whole build folder only. eg: mv build/ dist/
Changing settings of create react app so that it outputs to different folder will be very complicated. But you can move the files after build completes, which is much simple.
In your package.json you have:
"scripts": {
"build": "react-scripts build"
You can add another script called postbuild that does something after the build and will be called by npm/Yarn automatically.
"postbuild": "mv build/ dist/"
This should move the files to different folder.

In case anyone else runs into a similar problem. My issue was that the project name was being prepended to the static path.
So the path was /{project-name}/static/5.a4bfdba9.chunk.js instead of /static/5.a4bfdba9.chunk.js
Following the solution provided I came across a note specifying the "public path" was inferred from homepage. In the package.json my homepage url included the project name.
Wrong
"homepage": "https://{URL}.io/project-name"
Correct
"homepage": "https://{URL}.io/project-name"
Removing the project name from this url resolved the issue.

Change/add create-react-app entry point or location of index.js

I am trying to use create-react-app to create a simple web-app. I have moved the pages and components into separate directories under src labeled pages and components. I would like to change/add the entry point for index.js from src/index.js to src/pages/index.js. Another option would be to keep index.js in src/ and import from pages and component directories. Can someone help me to find how i can change the entry point path?
I can't seem to find the location of the default html-webpack-plugin config file.
Here is what I would like the structure to be:
(in src)
...
pages/
- App.js
- Home.js
components/
- Filter.js
serviceWorker.js

I used react-rewired to achieve something like this:
https://github.com/timarney/react-app-rewired/issues/189
in my config-overrides.js
console.log("#######################");
console.log("# using react-rewired #");
console.log("#######################");
module.exports = {
// The Webpack config to use when compiling your react app for development or production.
webpack: function(config, env) {
// ...add your webpack config
console.log("###########");
console.log("# webpack #");
console.log("###########");
console.log({config, env});
if (env === 'development') {
config.entry = config.entry.replace(new RegExp("index.ts$"), 'runApp.tsx');
console.log("entry point changed:", config.entry);
}
return config;
},
}
I needed to run on a different file but only when running the development server
the link above has the full solution

Try using npm run eject.
this will take all script from node_module/react-script in the project folder. There you will be able to access webpack.config.js file in config folder. you can search for html-webpack-plugin and get the access point.
I have added my access point to config/paths.js and used as default access point which worked for me.
NOTE: make sure you don't have any different configuration setting as it gets very difficult to manage, if environment setup changes or doesn't match.

How to prevent Webpack from removing other files in output path?

Let's say I compile some JS assets to dist/static/js:
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
},
Before running npm run build I create one file in /dist/, /static/ and /js/.
After running npm run build this file was removed. The one created in /static/ and /js/ is gone. How can I prevent it?
I'm using Vue.js/Webpack boilerplate:
https://github.com/vuejs-templates/webpack

If you look here:
https://github.com/vuejs-templates/webpack/blob/17ed63b1b3a0eaaebd3f593c08c32107a7cb7e01/template/build/build.js
You can see that a package called rimraf is being imported:
const rm = require('rimraf')
This package is responsible for clearing out your assetsRoot and assetsSubDirectory. This is a good thing because usually when you re-run your build process from nothing, you want a clean slate to begin with.
I would advise you not to disable this but rather put your file in another directory or let your Javascript generate your file since the removal takes places before the compilation.

Rewriting sass url when building project

I'm using webpack-dev-server during development and have a public folder as content base containing: index.html, img/**.*.jpg.
During development in my sass file i reference images as:
background-image: url('img/background.jpg');
This works fine during development since webpack-dev-server is serving the images in the public folder.
But when I build the project and generate a dist folder that is later going to be deployed to a test server I need to rewrite all the urls in the sass files since they aren't going to be served from the root of the webserver. In my case I would like to rewrite the previous css rule as:
background-image: url('folder1/folder2/folder3/img/background.jpg');
Is this possible?

Not exactly. I would recommend you instead keep your paths relative to the folder you're currently in. For instance, have an assets folder that has both img, sass, etc. Then, your paths could be relative to the assets root as opposed to needing to traverse to a separate build folder. That way it won't matter if you're in build, dist or otherwise.
For example:
|assets
|-sass
|--my_styles.scss
|--SUBSTYLES
|---my_substyles.scss
|-img
|--my_img.png
and your paths would then be:
url(../img/my_img.png) //For my_styles.scss
and
url(../../img/my_img.png) //For my_substyles.scss
Otherwise, you'll need to keep a separate variable file per server/build type that defines a ROOT_PATH variable and appends it in your SASS. Something along the lines of
url($ROOT_PATH + 'img/my_img.png')
which could always be wrapped in a mixin to be used more easily.

I solved this with environment variables using sass-loader.
module.exports = {
...
sassLoader: {
data: "$env: " + process.env.NODE_ENV + ";"
}
};

Set custom paths to files in Browserify

I'm taking a crack at changing my current RequireJS workflow to a Browserify + Watchify one, solely for my frontend Javascript (my backend is Ruby). The only issue I'm running into is that I don't have an easy place to configure what I would called "named paths". Let's assume my frontend is structured like so:
app/
models/
ExampleModel.js
views/
ExampleView.js
main.js
util/
backbone-all.js
vendor/
jquery-2.1.0.js
backbone-1.1.2.js
backbone-marionette-2.0.1.js
underscore-1.6.0.js
In the example above, please note two things:
All of my vendored JS files have their version right in their filename
Note the backbone-all.js file in the util folder
With RequirejS, I could do something like the following:
require.config({
paths: {
"jquery": "vendor/jquery-2.1.0",
"backbone": "vendor/backbone-1.1.2",
"underscore": "vendor/underscore-1.6.0",
"backbone-all": "util/backbone-all"
}
});
And be able to require my code simply by name, rather than fully qualified (or even relative) path. I haven't yet been able to figure out a way to get this to work the exact way that I want on the frontend. The closest I got was to create a dependency map file that is loaded before my application starts (and is globally available), and use it as the keys:
window.d = window.dependency = {
"jquery": "/vendor/jquery-2.1.0",
"backbone": "/vendor/backbone-1.1.2",
"underscore": "/vendor/underscore-1.6.0",
"backbone-all": "/util/backbone-all"
};
var $ = require(d.jquery);
Has anyone encountered this issue, or come across a suitable solution? I came across this post which is similar, but has no accepted answer from 6 months ago. Perhaps things have changed.

You can use the browser field in your package.json to configure a map similar to requireJS's paths map. See the browserify docs.
"browser": {
"jquery": "./vendor/jquery-1.42.js",
"./lib/ops.js": "./browser/opts.js"
}