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"
Related
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.
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.
I have a react application build with create-react-app. Its using octoberCMS as the backend fetching data using Axios calls from the frontend. Till now I was developing keeping the build content of react inside a directory named 'react' in the root directory of octoberCMS installation. Hence the URL I was hitting was http://example.com/react/.
The problem is now I am done with the development phase and look forward to deployment. But I want my front-end to be served at http://example.com and backend to be served at http://example.com/backend (backend served as I want). How can I achieve this? I am fairly new to both frameworks.
I have tried keeping the build content along with the rest of the octoberCMS
First build your react app that will give you vendor.js[third party scripts] and your app.js[your actual app]
put them in to theme directory assets something
Then In Ocotber CMS make page with URL /:url? and paste your index.html content there.
it will be your root div and including js html, change path for js which points to the build js which you put in theme directory.
now what happens when anybody come to site
- we are serving same content as we do in dev build
- index.html with root tag and needed js
Now if use hit any other url like https://www.example.com/test/etc it also will be catch by /:url? (and all other requests) and home page served and our react app will work as we needed.
if any questions please comment.
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
I have a react app that's hosted on AWS Cloudfront, and the default root is set to index.html, which loads the react app.
So far so good.
I created a new html page page1.html, and then tried accessing it using the full URL, https://my.site.com/page1.html.
Uh oh.
The React app is loaded, and it's router intercepted the URL, and displayed the page not found error. React has no knowledge of the html page, which sounds about right.
If the cache is cleared the page1.html file loads correctly, however as soon as the react app is loaded, the react router starts intercepting the page1.html URL.
Why is that? I kind of expected the direct URL to load the html file bypassing the react app.
And is there a way to add an exception in react router to allow the page to be loaded without being intercepted?