I have switched to BrowserRouter from HashRouter and all navigation works well - except F5.
I understand WHY it's failing.... Sending a request to www.example.com/account will result in a 404 as there is no such path on the server.
From what I have read, I need to add a catch-all. Bit not sure that is the fix. As the request hits the server before it hits my javascript SPA.
My routing is like this:
<Switch>
<Route exact path="/" component={Dashboard} />
<Route exact path="/accounts" component={Accounts} />
<Route exact path="/accounts/:id" component={Accounts} />
<Route exact path="/account" component={AccountEditor} />
But I feel I need to modify something lower down. I'm not sure if it's a server setting, because refeshing www.example.com/accounts/ will force a GET on the server and fail, before it even looks at my code.
I thought maybe webpack is the issue. But as I created my app with create-react-app, I can't find a webpack file. I'm not sure where that was all configured by create-react-app.
How can I handle a F5, or navigating direct to a url that isn't / ?
The host runs IIS, so I'm wondering if there is a web.config rule or something I can use to allow paths in the URL - but always GET from / ?
React build includes static files which includes chunk of .js files and a single index.html file. When you are uploading it to a traditional ngnix server it looks for the file as in the route. To override that and make this work you need to serve you static file using a static file server for .js application. What i mostly use is a npm package named as serve. You can install it on your server after installing node.js on it using:
npm i -g serve
And then you can use the following command to serve your application:
serve folder_name
Hope this works for you.
Related
I'm seeing an issue on Heroku that I'm not having trouble with locally. I've seen various articles and other SO posts that address this issue, and I've got an understanding that it has something to do with properly configuring the static.json file in my app in order for heroku to properly handle front end react routing, but I'm having some real trouble resolving this.
I'm using the following buildpacks and confirmed they're installed via the Heroku Dashboard > Settings:
https://buildpack-registry.s3.amazonaws.com/buildpacks/heroku-community/static.tgz
https://github.com/mars/create-react-app-buildpack
Using a gin-gonic server and serving up ./web to serve the frontend as specified by my .Dockerfile
I have the following static.json:
{
"root": "build/",
"routes": {
"/**": "index.html"
},
"clean_urls": false,
"https_only": true,
"headers": {
"/**": {
"Strict-Transport-Security": "max-age=31557600"
}
}
}
My project structure is as follows:
/app
- /main.go
- /server
-- /server package .go files...
- /client
-- /public
-- /src
-- /remaining react related files and assets...
I have tried having the static.json file in the app root, as well as in the client dir to no avail. Still seeing 404s if I refresh on or navigate from an external site to anything but the homepage.
So, none of the static.json solutions that I found while researching this issue seemed to work. From what I gather this appears to be a known issue with react routing and/or Heroku.
That being said, if this is helpful for anyone else that comes across this issue, this is how I addressed it:
Set up a NotFound handler on the server:
All this NotFound handler do is serve up your index.html file allowing your SPA framework to handle the routing itself (making the determination if valid or truly not found).
I achieved this in go/gin-gonic by:
e := gin.New()
// gin engine set up...
e.NoRoute(func(ctx *gin.Context){
ctx.File("./web")
})
Reason being - when you hit your app normally (via the base url) you're app will serve up index.html, and then and subsequent clicks from within the app are handled via the SPA routing. But if you navigate to any other route directly (i.e. manually going to https://<your domain>.com/foo in the address bar) You will be bypassing the SPA routing and going directly to the server. This case is also achieved by simply refreshing any page other than the homepage as well.
So by serving up the index.html when you hit a not found on the server you are re-enabling the SPA framework to work its magic and serve up that route if its valid which is what we want, but also be able to handle the 404 by...
Wiring up a NotFound component in the React App:
I achieved this in React by making a simple component and wiring up a Route to consume it by registering it to path="*" as a catch all after defining all other routes:
<Router basename="/">
<Route exact path="/foo">
<FooView />
</Route>
<Route exact path="/">
<HomeView />
</Route>
<Route path="*">
<NotFoundView />
</Route>
</Router>
I created a ReactJS project with the create-react-app package and that worked well, also I'm starting the application using npm start command.
So the application is landing on http://localhost:3000 by default, but I wanted to configure my landing URL to something like this http://localhost:3000/google where /google will be useful to configure the apache web server to detect my application.
NOTE: There is a way to redirect using react-router-dom to <Redirect from="/" to="/google" /> option and this will work once the application is loaded. But I am expecting my application should be accessible only with this URL http://localhost:3000/google. That means all my webpack, node_modules, public URL should go via /google only.
How to configure the base URL of web application ?
I think you have the answer to your question here: React Start Landing URL
The first one by #Bhojendra Rauniyar
Hope it helps!
If you are using react-router you can use the basename prop to set the sub directory
<BrowserRouter basename='/google'>
<App />
</BrowserRouter>
OR you can redirect / to /content in your Switch block
<Switch>
<Redirect exact from="/" to="/google" />
<Route exact path="/google" component={ContentComponent} />
</Switch>
I have developed a react application and created a production build using "npm run build". When I put this build files in webapps folder(named ldap) of apache tomcat and start the server and go to "http://localhost:8080/ldap/" this link it is showing 404 errors for all static files.
I looked in the network tab and saw that all my static files are served from http://localhost:8080/static/css/main.4e0cec6e.chunk.css it is missing "ldap" part in the link(http://localhost:8080/ldap/static/css/main.4e0cec6e.chunk.css)
Is there a way to solve this error.
Since you are mounting your React app in a subdirectory, you need to tackle a couple of things.
The first would be to set the basename prop in your router, this tells your React app that it will be mounted in a subdirectory.
<Router basename={'/your-directory'}>
<Route path='/' component={SomeComponent} />
</Router>
The next thing you need to do is to set the homepage parameter in your package.json file. You set the full URL of your app.
"homepage": "https://yourapp.com/your-directory"
And the third and final thing you need to do is update your links and routes.
Example for Route:
<Route path={`${process.env.PUBLIC_URL}/`} component={HomeComponent} />
<Route path={`${process.env.PUBLIC_URL}/other-dir`} component={SomeOtherComponent} />
Example for Link:
<Link to={`${process.env.PUBLIC_URL}/other-dir`}>Link to /other-dir</Link>
I have a website made with React running on Digital Ocean with pm2 and NGINX. The entry point "/" loads just fine but when I try to go to the "/:username" route I just get 404 Not Found. My routes are defined in App.jsx as follows:
<Switch>
<Route
exact path='/'
render={
routeProps => <Front {...routeProps} />
}
/>
<Route
path='/:username'
render={
routeProps => <Profile handleSignOut={ this.handleSignOut } {...routeProps} />
}
/>
</Switch>
index.js has the following code:
ReactDOM.render(<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
)
The routes all work as expected when running locally with npm run start.
This is a very common problem for single page apps written in different frameworks like React or Angular.
The problem, though, is irrelevant to the frameworks. It rather lies in the mechanism that is the in-browser routing. It is actually not a real routing. When you open a single page app, a simple index.html file is served, and when you navigate away inside the app, the framework takes care of rendering a new page and faking a navigation event (so that it will be recorded in the browser history and the url is changed).
But when you arrive on a subadress, like 'myapp.com/some-page', this will mke the server try and serve an actual directory called 'myapp.com/some-page', not your index.html file, which you obviously need to run the app, and, as this directory does not exist, it will throw a 404 error.
To fix this, you need to reconfigure your server, so that in case of a 404 error, instead of failing, it returns your index.html file; this way your code will be loaded and the underlying framework will handle the routing to display the correct page.
For react App hosted on app Platform on Digital Ocean.
Luckily now, you can now enable it through the UI. Please follow the steps below and it should be resolved.
Using Cloud panel UI: Log in and click on App > Settings >> click on component name > scroll down to Custom page > Edit Custom page and select Catchall > Enter index.html in the page name block > Save
Cheers,Arinze Hills
In addition to #amem nice explanation, add the following line to your web server configuration file:
For NGINX add error_page 404 /index.html;
For Apache add ErrorDocument 404 /index.html to your .htaccess
I have set up react for frontend, and for my backend i'm using express.
I came cross with this github repo which is implements to be "simple react-express fullstack" So I went ahead and forked the repo, filled up with my own stuff.
I have sign-in/sign-up form at frontend, which accordingly redirects to /auth/sign-up or /auth/sign-in with using the react router like this.
<Switch>
<Route exact path="/" component={Signin}/>
<Route path="/auth/sign-in" component={Signin}/>
<Route path="/auth/sign-up" component={Signup}/>
</Switch>
When I try to visit these paths when running standalone the frontend, it works. But if I run it with express, the path(s) say error 404, any ideas? Should it be acting like that? My github repo could be found here
You should make two separately applications. I sugest you to use create-react-app for frontend app, and expressjs as backend app. Then in the your react app, in package.json you must add url to your server app. For example: "proxy":"localhost:3000".