I am new here and I have a question about React JS. I used the create-react-app tool to initialize my application. I wanted to ask how can I change the initial landing page when I start the application.
For example when i am executing 'npm start' it will go to open a new tab in the browser with url 'localhost:3000'. Now I want when I execute this command to open at localhost:3000/api.
Thank you for your time
Nick
You should be using react router, then you'll be able to redirect the root path to where you want:
<Redirect from='/' to='/api' />
Or, if you want the sub-path without redirection, you can use basename like:
<Router basename={'/api'}>
<Route path="/" component={Api} />
</Router
Now, when you start the project, it will serve from your_domain:port/api
If you don't use react router, then you may set homepage in package.json like:
"homepage": "/api"
You can edit the homepage in package.json
"homepage": "https://your website url/route of what you want start with",
for example:
"homepage": "https://icecreamzhao.github.io/api",
When you start the react application, you'll find that the app runs by opening the url http://localhost:3000/api as you expect.
Refer React docs for more info
If you are using React routing you can add using the prop basename
<Router basename={'api'}>
Or if you want to change the default loading port you'll need to modify the core file which is not recommended
node_modules/react-scripts/scripts/statr.js
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
Thanks
I',m assuming you are using React Router version 6.
From app level you could use the basename property in BrowserRouter and configure all sub routes from there. i.e.: <BrowserRouter basename="/api"> and also add the property in package.json to "http://localhost:3000/api"to make react starts from that route in localhost.
In case you have an application configured at root path / and also the api under /api you could use just the property homepage in package.json. This is also valid for React router v5
setting
"Homepage" : "/home"
in package.json worked for me.
now it opens to /home when i 'npm start'
Related
The Problem:
We have our website https://website.com and we are trying to deploy a react router application to https://website.com/react-app. Routing works fine if the user first navigates to https://website.com/react-app and then navigates around the app from there. However, if someone navigates to https://website.com/react-app/home directly (or via bookmark) they get a 404 even though /home is one of our routes.
What We tried:
In our package.json we have the "homepage": "/react-app/" set. Using BrowserRouter we set the basename prop to /react-app and the app works when deployed except for 404 when navigating directly to a nested route. We have heard that HashRouter can be useful in this situation, however, when we use HashRouter we are getting https://website.com/react-app#/ instead of https://website.com/react-app/#/.
How can we configure this to allow users to navigate directly to nested routes in our React Router application deployed to a the /react-app Subfolder on our server?
React: 17.0.2, React-Router-Dom: 5.2.0
I think the problem must be not connected with React. Your React app is configured right. Check the configuration of your web server. Your webserver must return index.html with React application when the user navigates to any page.
I am using react-router-dom#5.1.2
The project is created with a basic Create React App.
I have the below code in my index.js
<BrowserRouter basename="/login">
<App />
</BrowserRouter>
When I launch my development server, it still points to localhost:3000. Ideally, it should point to localhost:3000/login.
basename doesn't redirect, it just informs the router that there is a piece of the URL before the part of the URL that your router will read and modify.
In your routes, just add a Redirect at the bottom so if none of your other routes match, it will take you to the login page. Assuming you don't have a / route, this will accomplish what you need.
You need to specify homePage: '/login' in package.json to load this route by default.
I tried to deploy my react app which was created using create react app to,
1.nginx
2.github pages
In both instances, only the react app logo and the title is visible in the tab but nothing appears in the body of the page. (The page is blank even though the code is deployed)
Does anyone know why this happens?
This is caused if you have used the Browser Router in your react project.
Both GitHub Pages and nginx serve your app from a non-root folder (i.e. username.github.io/repo-name/) as opposed to from a root folder (i.e. username.github.io/). React Router does not consider your app's URL as a match for any of the routes defined in your app.
For example, if you define a route using <Route exact path="/" component={SomeComponent} />, React Router will see that / and /repo-name/ do not match exactly and will, thus, not render the component.
To overcome this error use base name prop in the BrowserRouter and name it according to the non-root folder name.
example:- if your app is served inside a folder named "folder1" in your server, do as follows.
Hope my answer helps someone struggling with the same issue.cheers! #iii #R2B
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 builded a little questionnaire with React and React-router v4.
I developed with create-react-app.
It is working fine when I build it as standalone page. The Router routes like I want.
But now I made a build for a page in Mahara (https://mahara.org/) and another one for Wordpress.
In Mahara it is a plugin and the questionnaire comes in a part of the Mahara page.
In Wordpress the questionnaire is a part of the whole Wordpress Page.
In both variants the router doesn't work. The path "/" is not found. So the default "not found" page appears.
I edited the homepage property in the package.json and the basename attribute for the BrowserRouter.
Is it generally possible to make the router functioning, when the React app is not a standalone page?
Maybe the problem is, that in both platforms(Mahara/Wordpress) the url is not really the one where the questionnaire exists?
In mahara for example the questionnaire exists in "http://mahara_17_10.local/blocktype/learningstyle/js/build/" but the url shows: "http://mahara_17_10.local/view/view.php?id=3842". This public page is generated with Smarty templating and some php.
I tried both: The real place, where the React build folder exists, or the generated url (the second one). But I had no luck so far.
here some code:
package.json:
"homepage": "http://mahara_17_10.local/view/view.php?id=3842",
BrowserRouter:
<BrowserRouter basename="/view/view.php?id=3842">
Router in Main Component:
<div className={ApplicationClassNames}>
<ApplicationHeader
title={title}
count_blocks={count_blocks}
number_of_blocks_overall={number_of_blocks_overall}
/>
<Switch>
<Route exact path='/' render={() => (
<ApplicationBody
page_now={page_now}
count_cats={count_cats}
count_pages={count_pages}
categories_pages_quantity={categories_pages_quantity}
catValuesCountAll={catValuesCountAll}
language={language}
show_result={false}
values_not_for_categories={values_not_for_categories}
/>
)}/>
<Route path='/wtf' component={Result} />
<Route><div>Not found</div></Route>
</Switch>
</div>
So my questions are:
1: Is it generally possible to make the router functioning, when the React app is not a standalone page?
If yes, how for excample in wordpress or mahara. Maybe anybody knows a tutorial oder something else what can help me here.
I would be very happy, if somebody could help me here a little bit.
thanx =)
# Learner
If you have a Moodle Plugin (as a react application) on a public page for example, and the url is : moodlepage.de/mod/learningstyle/view.php?id=27
you can put an .htaccess file in the root folder of moodle with the following content:
Options -MultiViews
RewriteEngine On
RewriteRule ^mod/learningstyle/view.php/(.*)$ /mod/learningstyle/view.php?id=27 [QSA,L]
This tells the webserver to look at /mod/learningstyle/view.php?id=27 when you type mod/learningstyle/view.php/green for eyample. So the page is called and react has its url with the paramters.
This is the minimal configuration of the htaccess. You can put there rewrite conditions and some other stuff. But this works.
The (.*)$ is for the router paramters. They work too.
Make sure you have Allowoverride All in your virtual host or whereever you have your settings for the webserver.
This works fine in moodle and mahara. Worpress has its own htaccess with some rewriterules, so it didnt work for me. See here:
React Router v4 and htaccess with wordpress