I am building an app with django3.2 and React 17 using react-router-dom 6.
My react app is served at
https://www.example.com/
And if I navigate within the app to https://www.example.com/auth/signup I get the form, however, if I input the url directly into the browser I am taken to a blank page.
In my django.urls, I have a catch all that should send the path down to my react app, and in local development it works great.
urlpatterns = [
...,
re_path(r'^(?:.*)/?$', homepage),
]
PROBLEM: In production I am taken to a blank page.
I suspect it has to do with relative paths in production. I've followed these questions:
Django static file serving in conflict with React Router
React router not loading dynamic url in production
And so far have tried:
Adding "homepage": "https://www.example.com/" to my package.json.
Adding <base href="/" /> to index.html
Adding "homepage": "." to package.json
But so far nothing has worked, and I need this feature, particularly for email verification. Happy to clarify anything or share front end code.
Related
Hey. I have a problem with react. I use '/' path for client (some static html content), and '/panel' for example for another server using 1 domain.
But i have errors which don't load my react page.
So on home location (http://localhost/) all good.
http://localhost/panel - only 'react app' in title.
That's because your React app tries to load the CSS and JS from the root path. Configure the homePage field in package json to be
"homePage": "/panel"
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'm building a React plugin in Wordpress (for my own purposes).
I've used 'create-react-app', then 'yarn build' and then upload the production 'build' folder into Wordpress to a custom directory '/apps/my-custom-app/frontend/build'.
I've used this tutorial to create a Wordpress plugin that gets all the assets from the 'build' folder and renders the React App in the target div on a Wordpress page.
All of this works as expected, the React App renders on my Wordpress page "https://mywebsite.com/wp-page-slug/" and the React routing/navigation works fine ... but only within the React App.
The issue is that if I'm on a React page (except for the root slug) and refresh the browser, I end up getting a 404 error.
After researching on StackOverflow, I've found that this is resolved using the .htaccess file.
I've used this function from the solution in this article ...
add_action( 'init', 'my_custom_app_frontent_rewrite_rule' );
function my_custom_app_frontent_rewrite_rule() {
add_rewrite_rule('^react-app-root-url/(.+)?', 'index.php?pagename=wp-page-slug', 'top');
}
... to add a rewrite rule, but there's something wrong. When I enable it, the entire frontend of the website goes blank (white screen).
Is the 'add_rewrite_rule' not correct? I don't know what's wrong here.
Wordpress Permalinks are currently set to 'Post Name'.
The Wordpress page slug is '/wp-page-slug'.
The React App Router Base URL is '/react-app-root-url'.
And the homepage property in the React package.json file is '/apps/my-custom-app/frontend/build'.
Any assistance would be appreciated, thank you.
Problem:
I've deployed a React application to our internal cloud at my company. It works with Cloud Foundry. The app works really well, but there's one problem. Whenever I refresh the application and the URL isn't pointing to the root, for example myapp.ourcloud.com/my-route, I get a Error 404 from Nginx.
What I'm using:
The App is a simple React application. No special modules installed beside React Router V4. The Code is pretty simple, I'm using the BrowserRouter, as a child the application. There are only 3 components that ar simply routed with <Link To=.../> and <Route path={.../> ... as said, pretty basic.
What I've tried so far:
I have added a Staticfile in the root directory with pushstate: enabled as stated in the Cloud Foundry documentation.
I just found the answer by myself. I'll post it here for future users:
My manifest.yml file had the following content:
...
path: build/
...
You simply have to put the Staticfile inside the build/ folder from react and not in the project root. Also be careful, the Staticfile gets deleted everytime you build the project.
Serve index.html for all request and then the react router will manage all the routing.
If you however have endpoints or some backend routes you need to access, just make exception for these routes and serve index.html for everything else.
I have a React App (CRA) who is currently deployed on HTTP Apache Server. To access to the app I use the url root (http:///). Because of adding supplementary apps I have to specify the app name in the url to access it. Like that http:///
To do that I tried to set the homepage in package.json with
"homepage": "http://<ip>/<folder_name>",
I also set the basename of my Router in my React Component with the folder name.
<BrowserRouter basename="/<folder_name>">
After these modifications when I try to access to the site I have a blank page. And in the console I get two erros.
stylesheet http://localhost:3000/src/css/component.css was not loaded because its MIME type, “text/html”, is not “text/css”
SyntaxError: expected expression, got '<' main.xxx.js
My project is under /var/www/html/.
I also create a htaccess in the react public folder.
If any has an idea I'll be thankful.
Thanks