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".
Related
I am trying to run my ReactJS build on wp engine hosting, where my WordPress site is already residing. I have placed my ReactJS build on the root along with other folders such as wp-admin, wp-content, wp-includes.
My ReactJS build is placed in a folder named calculator. My React App URL looks like this http://xyz.blahblah.com/calculator/ When I launch this URL, It works normally in the flow but I am unable to open any of my React Route directly from the web browser.
When I try to open any other route directly such as http://xyz.blahblah.com/calculator/recomendations It takes me to the WordPress site page not found page. How to fix this? So that I can open any route of my ReactJS App.
Below is my React App routing code:
<BrowserRouter basename="/calculator">
<Switch>
<Route path="/" exact component={QuestionsWrapper} />
<Route path="/recomendations" component={Recomendations} />
</Switch>
</BrowserRouter>
My project setup.
Backend: Springboot, exposing various REST API's
Frontend: React Js.
Build: I am using maven frontend-maven-plugin and maven-antrun-plugin to build my react project using npm and package it with the springboot jar.
My react js Router class looks like this
const Routes = () => {
return (
<Switch>
<Redirect
exact
from="/"
to="/dashboard"
/>
<RouteWithLayout
component={DashboardView}
exact
layout={MainLayout}
path="/dashboard"
/>
.......
.......
I run my jar using java -jar .... command. When I try to reach http://<host:port> it redirects me to http://<host:port>/dashboard, which is fine. All the navigations from here on works fine according to my routes and each view, calls backend endpoints to serve the content in the page.
Problem is when I try to nagivate to any of the page directly, for example If I type http://<host:port>/dashboard in my browser, I get 404 Not found(thrown by springboot).
I believe the problem is that, springboot is trying to search for the endpoint /dashboard which is not there in the backend and hence 404 is thrown. How can I indicate reactjs or springboot that this url needs to be rendered the same way as when it was done through /
I am not sure if this problem needs to be fixed on backend(Springboot) or frontend(React js routes).
Does any one has any idea?
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.
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>