my react app is working locally but after the deploy, I faced the problem when I press any button there is no problem but if I want to refresh I see that problem "404 - File or directory not found."
I found this solution:
https://github.com/ReactTraining/react-router/blob/v3/docs/guides/Histories.md#browserhistory
Configure Your Server
"Your server must be ready to handle real URLs. When the app first loads at / it will probably work, but as the user navigates around and then hits refresh at /accounts/23 your web server will get a request to /accounts/23. You will need it to handle that URL and include your JavaScript application in the response."
But I don't know how can I do this
I try something but it doesn't work
TRY
npm run build, this will create build folder inside your project root folder
if you want to deploy to remote server just transfer that build
folder.
npx serve -s build on windows, if you are using mac kindly see if it is still npx.
then try to refresh every path of it
hope this works, happy coding.
Since the server cannot find the static content in the directory (i.e. not found the file /tomcat/accounts/23), it will give you 404 unless you have additional route handling.
In React routing I think you can try with HashRouter
See more details here:
https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/HashRouter.md
HashRouter vs BrowserRouter
Related
I'm new in react app development, I just build my practice app and deployed it through Netlify. I can visit my app and everything is fine till I refresh my window. Refreshing the window comes with an error page not found. what should I do to solve this problem?
You may need to look at providing a _redirects file in your root directory. See https://docs.netlify.com/routing/redirects/
For example,
/* /index.html 200
As cra is single page application, you need server setting to redirect everytime to index.html,
You might want to check this link
https://www.netlify.com/blog/2020/04/07/creating-better-more-predictable-redirect-rules-for-spas/
I am working on a React app that's running on AWS Amplify. My React app is using the react-router-dom library to route to different components. After running amplify publish in the CLI, at the root of the app (obktraining.com) everything is fine in the browser, I can also route to other components in the app just fine as well. But when I refresh my browser while I am on a route (obktraining.com/menu), I get an Access Denied error message.
I have found other posts about similar issues regarding rewrites and redirects in Amplify, but the solutions given do not work for me.
Here is an image of the error:
My Amplify app rewrites & redirects :
Again, the error only displays when I refresh on a route (obktraining.com/menu or obktraining.com/drinks) not on obktraining.com. Is the issue being caused by the react-router-dom library or is it an issue with Amplify settings? I am not sure where to go from here.
I have been facing the same error since days.The error is being caused by the amplify settings. The solution is simple,
Edit your Rewrites and redirects by adding a new rule.
source address = </^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
target address = /index.html
status = 200 (Rewrite)
Country code can be left blank
Save and try refreshing your app again. It should probably work.
use this for reference: https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa
Then you can just put in (as Dhruv Godambe posted above)
</^((?!.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>
as the Source address and
/index.html as your target address
You can navigate to 'rewrites and redirects' in your app from AWS Amplify console and click on edit and select open text editor, and add this piece of code in your array(if present) else put the array braces around it.
{
"source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>",
"target": "/index.html",
"status": "200",
"condition": null
}
Reference: https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa
Reference:
https://docs.aws.amazon.com/amplify/latest/userguide/manual-deploys.html
I have faced the same problem.
I was using Manual Zip File (Compressed) download (wrong).
Here is how to deploy manually correctely:
Run this command
npm run build
Now a build folder will be created.
2. Compress the content of this folder
Not the content of the whole project.
You chnage directory to the build folder and Compress the content in side.
3. Upload that compressed file Inside the build directory
Now this should work just fine.
:)
The correct rule should be like this:
Source address: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>
Target address: /index.html
Status: 200
I was getting the an Access Denied error message too. The error went away when I followed the documentation described in the answer above, but then I got the white screen problem described above too.
Reviewing the steps I noticed the auto-complete for the "Destination Address" listed in the "Rewrites and redirects" settings was /. When I tried using / as the "Destination Address" instead of /index.html I no longer got the white screen and got the expected page content.
Sharing what I found in case this helps others who are seeing a white screen after fixing the error with the rewrite rule described in the answers above. (Note as of Nov 2022 the "Rewrites and redirects" setting page uses the wording "Target Address" instead of "Destination Address".)
I have faced the same problem. I was zipping build folder, but not the contents within the zip folder.
Here is how I fixed it:
Run build command
npm run build
Now a build folder will be created inside your project directory.
Open build folder.
Compress the contents of build folder, and not build folder.
Now upload this new zip created from sub files and folders from build folder.
App will run fine on AWS Amplify.
I got the same error,
I zipped the build folder first then uploaded it and got that error,
but when I just uploaded the folder without zipping it, it worked fine !! weird!!
in my application I used the port 8080
I'm using Nextjs for a front-end application and dotnet core 3.1 for the Web API. There are some pages that are static and other that are dynamic I followed the official documentation to achieve this. On development mode (local machine) everything works fine. Both static and dynamic routes are working properly and fetching data from the dontnet core Web API.
However, when publishing the Nextjs app following this steps:
yarn build
yarn export
An out folder is generated at the root of the project
The content of that folder is uploaded to the server
After, the deployed files are uploaded and when loging to the app, it redirects to the main page (until here is working OK), but as soon as I click on the reload page botton (Chrome) I am gettint the 404 error.
Looking at the console in the developer tools I got this:
I found this Stackoverflow link with same issue but there the answer is to use Express for server routing. In my case I am using dotnet core Web API for server requests. So, not sure how to do that.
Is there a way to fix this from the client side? Might be a configuration is missing?
The only thing I noticed while doing the export was a message saying: No "exportPathMap" found. Not sure if that would the the reason.
I had got similar issue in react when all of my pages after building and exporting had ".html" extensions. I solved it by the following code in next.config.js file.
next.config.js
module.exports = {
exportTrailingSlash: true,
}
Note: Do not work with the above code while in development. Use it just before building the project.
You can find the documentation link here: https://nextjs.org/docs/api-reference/next.config.js/exportPathMap#adding-a-trailing-slash.
UPDATE
The above code was for next.js v9.3.4 which I was using at that time. For newer versions below code should be used according to docs.
next.config.js
module.exports = {
trailingSlash: true,
}
it has been fixed update your nextjs package
npm install next#latest
based on the current version of Next js you have, visit here to see if there's any breaking change before updating what you have
I had a similar issue where after deploying the out folder created by next export all URL's would redirect me to the homepage. Everything was working fine during development and all URL's were accessible with next/link but in order to access pages with a URL I had to add a .html extension at the end of the URL.
Because I needed a quick workaround I added a useEffect block in the _app.tsx file for rerouting so that upon landing on the homepage it would act as if a Link component was clicked redirecting to the entered URL.
useEffect(()=>{
router.push(window.location.href)
},[])
When running my spring app from my IDE and running the React app from within VSCode, everything worked perfectly. I used the build script to build my React project, and then put the output into my /static folder of Spring. Then I used mvn clean install to build the .jar file. After running the entire app from the .jar file, I can access my homepage with localhost:5000. I can also use my navbar links to access different parts of the website, like the Home page and the About page... But if I try to manually enter the url localhost:5000/about I get a 404 Not found error.. What am I doing wrong?
My guess is that your Spring (webmvc?) application is not configured to listen to different URLs other than /. And while it may seem as if the navbar successfully redirects to http://localhost:5000/about, in reality the single page application uses JavaScript client-side routing to change the URL in the browser, unload the currently rendered page, and load another page.
If you are indeed using Spring MVC, you could (among other options) modify your Spring static resource configuration, modify your #RequestMapping to listen to multiple endpoints, or use a ViewControllerRegistry.
I have a React application created by create-react-app. The app works fine, but I have run into a problem
I need to test som ad things on a plain html site, no additional React code. The problem I have is that the ads.txt tags need to be crawled by Google, which can take up to 24 hours on a new page/URL, time that I don't really have.
So I did the following. In my repo under /public folder I added a folder /ad-test with an index.html inside. When I serve it locally using npm start and go to http://localhost:3000/ad-test, it works fine.
Great, I thought and deployed it to the production environment, but now when I try to go to http://[my-site]/ad-test or http://[my-site]/yo-test/index.html it does not work (I get the React 404 site that I created).
I looked here and if I understand correctly, it is not possible to do it the way that I tried since the build stage will not include the public folder. Am I correct in this?
Any idea how to solve this?
EDIT:
I have a good knowledge of React and React Router in general, the app already uses <Switch><Route ... /></Switch> with a catch-all route directing to Not Found Component and the bottom.
The problem I have is that we include some ad scripts from an ad provider. The ads are not displayed in the application (adblockers totally removed from browser etc.) and the provider thinks that we have made errors in the React code.
We don't think that we made any errors (the ads were displayed fine in our test environment but not in prod) and we have to prove that React is not to blame for the ads not showing.
To do this we created a static HTML file with all ads hardcoded, no React components or other things that might disturb. BUT, because of ads and Google crawlers and ads.txt, we need to have the static test page under the same domain as our main page/application.
This is why I ask if it is possible to somehow add a static HTML that can be reached from http://my.page/test-page.html without being "intercepted" by react router, i.e. it exists outside React but on the same server.
When you use react by create-react-app, it means you are building a single-page application.
What this means is that after running npm run build you will have a build folder with only one html file called index.html in that fold.
This index.html does not know and has no relationship with your added 'index.html' in ad-test folder.
If you want your ad-test html to be recognised by react, you need to make it a component of app.js and use react-router to give it a pathname.
It is very simple.
First, install react-router-dom;
Second, set up react-router-dom;refer to https://reacttraining.com/react-router/web/guides/quick-start
Third, give your add-test component a pathname.Your js code should look something like this:
<Route path='/ad-test' component={AdTest} />
IMPORTANT:
After you deploy your app, always remember you just built a single-page application.
You only have one html in your app.
Please make sure when you test your app after you deployed you must tell your service provider that no matter what pathname a user inputs in the address bar you always redirect it to the index.html
The build stage includes the public folder:
If you have a picture in the public folder, and this picture was imported to other components it will be shown after you run npm run build
Hope it helps.
Have you tried playing with webserver configurations? It is usually setup to redirect all traffic to index.html. Maybe exclude your static html path from redirection?
Place test-page.html in public folder like
public/path-to-static-html/test-page.html
Configure webserver for
directing all traffic to index.html EXCEPT /path-to-static-html which
will be directed to test-page.html.
For example, in case of Apache
you will be setting the DirectoryIndex directive.