We Keep Coding

Importing a js file outside the src directory in react js

I have a js file which contains some data, in the public directory. And I want to change them even after the building. And I don't like to build every time I change that file. How can I import that data.js file without getting "Relative imports outside of src/ are not supported." error.
The project was created using create-react-app.

You need to include it using a script tag in the index.html file in your public folder.

Dynamically set the file path for static files in the index.html file in a React app via a JSON file

I'm trying to dynamically set the file paths to the static files (js & css) in the index.html file of my create-react-app such that they can point to different sub-directories depending on what I set in a settings.json file.
Example:
If I set the base_url in my settings.json file like this:
{
"BASE_PATH_URL": "/subdirec1"
}
I expect the file path in my index.html file to be like this:
<script src="/subdirec1/static/vendors/js/core/jquery-3.2.1.min.js" type="text/javascript"></script>
I'd be grateful if anyone could help me out here. Thanks!

If you're using webpack, you can use webpack variables that you can set within the webpack config object, which themselves come from a .json/.js file.
This is the example you can use if you're using webpack!
WARNING: Don't use the command below before reading up on it, because it will make a big mess of files you might not understand yet!
Since you're using create-react-app, I think it uses webpack under the hood but you need to npm run eject it to have more complete access to its configuration!

React & Webpack - Project set up for multi page application

I'm starting up a react project (using create-react-app) which will have multi "one page" components within. So, I assume, the directory structure for development would look like below:
/Project
/node_modules
/public
/src
/components
/layout
/popup
...
/pages
/dashboard
index.js
/profiles
index.js
...
If I build the project without any modification, it would bundle all the source code and resources under one directory. Well, that's not going to work for what I am trying to do for this project. I need to have different bundles for each page. So the bundles under the /public folder should look something similar to the following structure:
/Project
...
/build
/dashboard
/static
/css
/js
/media
index.html
/profiles
/static
/css
/js
/media
index.html
...
I looked at "Code Splitting" in webpack documentation. There's a good example with different entry points but I couldn't adapt it. How can I achieve the desired setup with webpack and react?

I would suggest to use React code splitting, using React Loadable, no need to modify Webpack configuration.
https://reactjs.org/docs/code-splitting.html

May be it is late to answer but I was facing the same issue and found a simple solution that I wanted to share.
I followed these steps:
Multiple entry points in webpack for each page
dynamic output bundle names for each entry point
Multiple html output files with different filenames using HtmlWebpackPlugin, also define particular chunks (bundles),
new HtmlWebpackPlugin({ filename: 'index.html',template: './src/index.html' ,chunks:['page1']})
Each template for each html page will have one div with particular id lets say root which is used by react app to render its app on dom.
Now every js entry point for each page will have
ReactDOM.render(<Page1 />, document.getElementById("root"));

Have a look at the Webpack docs on Multiple Entry files
And have a look at the examples in webpack's github

Transfer a file, then inline it without Webpack bundling/loader code

I cannot come up with a working solution. I guess I should somehow be using html-webpack-inline-source-plugin or a combination of multiple entry points but this is too much for me to handle.
What I want to have is:
all my js files bundled together and injected (not inlined) into index.html [this works of course!]
one js file, which is not included in the bundle described above, inlined into index.html
the inlined js file has to go through the Webpack "transformation pipe" since that js file depends on the Webpack build step
Example of the file to be inlined:
const asset = "require('./assets/blob.json')";
fetch(asset).then(.......)
This file should first go through the Webpack transformation since what should actually be inlined is something like:
<script>
var asset = "/static/json/blob.md5hashofblobjson.json";
fetch(asset).then(.......)
</script>
So basically the file that is to be inlined depends on the Webpack build process and cannot be just read with the fs module and written directly into index.html by hand.
Also, the inlined JavaScript should not include any WebpackJSONP bundle loading code, just the pure JS. Below that inlined piece of JS should come the usual bundled scripts that are injected (not inlined).
How should I configure my build process? Thanks a mil!

How to run a custom html file with budo (or browserify)?

Budo does great job to browserify and run with livereload. But it is using index.html by default. That makes it less convenient with several html files. Is it possible to run it against a custom html file?
It mentions to accept all browserify options but I couldn't find the relevant one.

You can use the dir flag to point to a custom path where you house a different index.html file:
eg: budo index.js --dir myCustomBudoDir
this will serve your index.html out of your myCustomBudoDir directory

If your launch dir has an index.html, budo will use that. I've got a super simple project here.

Currently, Budo has the name index.html baked in, so using separate directories is the way to go, see the dir option in the doc