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>
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>
Since I'm using redirect from react-router-dom to handle my routes in a react app, I'm
Say someone hits:
example.com/privacy-policy
it gets to redirected to:
example.com
and also if someone hits :
example.com/privacy-policy/test'
it is getting redirected to :
example.com'
how to avoid the redirection for example.com/privacy-policy/test' but it should redirect forexample.com/privacy-policy'
The reason for all your routes going to example.com is because create-react-app uses --history-api-fallback option`. See docs.
This option enables History API Fallback support in webpack-dev-server , effectively asking the server to fallback to index. html in the event that a requested resource cannot be found.
So you need to use react-router-dom package and make use of BrowserRouter and Route and Switch components and define your routes.
<Router>
<Switch>
<Route path='/' exact component={ExampleHomePage}></Route>
<Route path='/privacy-policy' exact component={PrivacyPolicy}></Route>
<Route path='/privacy-policy/test' component={PrivacyPolicy}></Route>
</Switch>
</Router>
You can find a lot of examples online. Such as:
React router docs
Another example to get started
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>
React app starts on localhost:3000 by defult as soon we run command npm start. At the moment I have nothing to show on my home route "/". I want the app start directly from http://localhost:3000/content when I run command npm start. I can't figure out the way to do so. There is a way when we deploy the app on some server, but don't know how to do it development mode?
If you are using react-router you can use the basename prop to set the sub directory
<BrowserRouter basename='/content'>
<App />
</BrowserRouter>
OR you can redirect / to /content in your Switch block
<Switch>
<Redirect exact from="/" to="/content" />
<Route exact path="/content" component={ContentComponent} />
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".