In my current project, I am using lazy for my routes. It's working perfectly on local but for the production build, it's giving me multiple issues.
When I try to redirect on one of the lazy routes it tries to access the chunk for the relative path and not the base path. something like below
https://myapp.com/mypath/static/js/1.2324dfg.js
instead of https://myapp.com/static/js/1.2324dfg.js
I am preparing the production build simply with npm run build prod command. Please let me know if I am missing any setting.
Can you try putting this line in your package.json file? I had the same issue and now working fine with this setting. Good luck
"homepage": "/",
Related
I created an ReactJS APP. I want to deploy this app in hosted server. So i made the changes as
In package.json add "home": 'https://ww.domain.com/ReactApp"
Installed react-snapshot plugin. Added "&& react-snapshot" in build line in package.json. Replace React-Dom to react-snapshot in index.js.
Build the project and copy the files and folders inside build and paste inside server inetpub/wwwroot/reactApp folder.
Run the application favicon displayed in tab. Blank white screen. No error in console.
Anybody please suggest what mistake am i doing and please suggest quick solution.
Thanks
You can try the following steps to fix your question:
1.Please check your Webpack’s publicpath setting. There is the publicPath setting in your Webpack configuration to tell an app what its root path is. please make sure it is set correctly, it will base links like above from that URL.
2.If you’re using create-react-app, you won’t have to deal with Webpack configs. The way how create-react-app has it’s webpack configuration set up, this will replace the publicPath with the correct base URL for your app. Now your app it’s base URL, run npm run build again and copy the app to your web space to find your app up and running.
Today I see a weird thing after build a ReactJS app. when I checking in the browser after builded files it's exposing my raw folder structure. It should not expose the directory.
I see some StackOverflow saying that "homepage" : "." in package.json will solve, someone saying "start_url" : "/" need to change in manifest.json. but nothing is working for me. Any way to solve this.
You're seeing this because you're running this project locally.
When you run a project locally, it doesn't use the prod version of your app. It uses the dev version which isn't optimized for production. This is done to help you out with debugging during the development phase of your project.
If you deployed the app, the deployment would be using the build output (and not your local build, like you see here).
Note: If you're still experiencing this issue then your bundler (if you've ejected a CreateReactApp, then I'm referring to webpack) needs proper configuration and you'd need to provide us with more information.
I built an app in React with create-react-app. Just JavaScript, CSS, HTML & React. I ran npm build then deployed the app to Netlify.
I want to go back and edit some CSS. So, I cd into the directory from my laptop and deploy on localhost:5000. I open VS Code and make changes however none of the changes are reflected in the browser # localhost:5000.
When I was building the app, the way I had it set up allowed me to view each change immediately in the browser when I save the file.
Are files editable after you run npm build? What am I missing here?
When you run a build on a react app (or any other app) code will be converted from es6 to es5 and then probably minified (depends on webpack config) so code is unreachable and you need .map files to debug code in production environment.
So the most clean way to act on deployed code is to make a new build with updated features and deploy again the frontend.
In local development react boilerplates usually make intensive use of hot-reload, a plugin that allow code to be hot replaced while app is running.
Built application instead load chunks of JS files once and CACHE it. So in order to see your changes you have to clean cache or force a refresh (home+F5 on windows, CMD+R on OSX) to be sure that your changes are visible.
Despite this I discourage to edit the build files. When you have to update the code stay on development mode, before deploy, build your code and test it live.
You could create some files outside the src folder and access them with fecth from app.js or even import them from index.html ... so if you wanted to change something you could do it without having to do a build again.
I am trying to get react app (made with create react app) to run with npm start both locally and in a container that has routing that would require relative paths in index.html.
Specifically, with npm start, everything works fine by going to localhost:300. In the generated source, I see a script being loaded from /static/js/bundle.js.
In my container, the site is accessed at mydomain.com/admin. So, I need the script to be loaded from ./static/js/bundles.js.
I tried to set homepage in package.json to "./", but it doesn't seem to actually do anything. I'm a bit new to this, and none of the answers I am finding seem relevant. I did try ejecting, but that didn't change anything.
I am using conditional rendering without React Router or any other routing module in App.js. I am also using create-react-app for the project, however it's been ejected using npm run eject. If I request http://localhost:3000/privacy.html it seems to rewrite me back to http://localhost:3000/. That is, I'm given the contents of the index file, while the URL remains unchanged. After the production build is put on the production server I am using Nginx to fix the issue on said machine, but how would I solve this on the development machine?
Also if there's an easy configuration setting to conditionally "rewrite" URLs back to index, please give it a mention. For instance, I still want http://localhost:3000/35643, or any URI which ends with numerics, to rewrite back to http://localhost:3000/, but not http://localhost:3000/privacy.html, which would be some sort of exception.
I'm a newbie to Webpack and all the features beside core React, so would highly appreciate generous explanation of the configuration.