I made an app on ReactJS with create-react-app. Paths to images are breaking in Production mode in subpages. I used react-router.
The Structure of project looks like this static/media/image.jpg
Paths in subpages are getting like this site.com/product/product-one/static/media/image.jpg
How can i fix this problem?
The static directory is outside the src? If that is the case you have to specify in the webpack.
Related
I have got web app which is built using laravel and react.js ; I need to change something in frontend but found that all react files are minified in app.js file, so changing frontend files does not have any effect. I don't have experience in react. Can you please suggest how to regenerate update minified app.js file?
thanks a lot!
I have tried changing frontend js files like normal but it was not working.
I setup react project by create-react-app and I found that the subfolder of react won't able to autoload when I create a new file, eg
<!-- file: /public/subfolder/index.html -->
<p>subfolder content here</p>
anyone knows how? According to the official react doc, it looks like react doesn't allow this kind pattern? Anyone knows more content?
This is not actually a restriction from React itself. That was how Webpack has configured in create-react-app. Please look at the below code snippet of a typical Webpack config file in a React application. If we need more custom configuration, we have to manually configure Webpack and Babel as per our requirements.
Link for the documentation: The best webpack configurations for React applications
I am new to Electron, and I have been having some trouble trying to do something simple in an Electron + React application. All I want to do is: Load a 3D model (.glb) located in my src/assets directory from a React component. I created the project using this guide. In a typical React project, I can just import the file directly in my JS module and reference the path in my code. However, with the default Webpack config, the file can't be found. There's obviously a gap in my understanding on how React + Webpack work when loading assets. What am I missing? Any help is greatly appreciated.
Thanks!
Turns out, the Webpack documentation spells out the answer clearly. Who knew? I found a lot of similar questions/answers for older versions of Webpack, so I'll post one here for Webpack 5. It requires a trivial two-line addition to the webpack.rules.js file:
{
test: /\.(png|jpg|gif|svg|glb)$/,
type: 'asset/resource'
}
The key is the asset/resource line. It's new to Webpack 5 and allows the bundling of assets without needing any additional loaders. With that, assets can be included as Javascript modules and Webpack will take care of the rest.
So, one can do:
import modelSrc from "../assets/some_awesome_model.glb";
And that's that. Webpack will spit out a URL such as /9feee593dc369764dd8c.glb, meaning Webpack has located and processed the asset.
I have built my react js app with create-react-app configs and it works fine in development build of React.
I built that with npm build command and now i have build folder.
this web page is static (server-less), Now I want to know how to use that and where put files in Cpanel.
After the bundle realized by webpack, you can check the transpiled and minified version inside the build folder. You should upload all the content to your public_html or another folder.
And the meaning of server-less is totally different than you're using. Check this article to understand what it is: What is serverless.
I do not use CRA boilerplate since i have my own but in your case, you should find where your js bundle is. You can find the bundle location in the webpack config. Then append that to your html somehow like this:
<div id="root"></div>
<script src='your-js-bundle'></script>
Assuming that somewhere in your code, you are appending your js code into a div like this:
const element = <h1>Hello, world</h1>; // assuming element is your entry point
ReactDOM.render(element, document.getElementById('root'));
That works if its just simple react project your working on (No SSR and such)
I have a question regarding webpack and serving images.
I have a webpack config that build a React webapp and also serves .jpg files from a specific folder.
But what happens if from my webapp I download and add a new image to this folder?
Can I refresh webpack so that it will serve the new image and I will be able to import it with require.context?
Or, is it something that webpack is not supposed to do, and so I need to have this handled in the backend?
Thanks,
This isn't something that would typically be handled by Webpack. require.context creates references to all modules (or in this case images) in a directory that can be required with a request matching a regular expression, so if you were to use that, you'd need to recompile your app every time you add or remove an image from the folder.
It would be best to handle this in the backend, so you can just use the URLs to the images directly.