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
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.
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"
I'm trying to embed an existing react app to my WordPress site using the plugin ReactPress. I created a react app inside the plugin section:
and added my build folder of the existing react app inside the path where is needed (using file administrator plugin):
The Path is wp-content/plugins/reactpress/apps/dase-mural-design. The problem is when I click on the URL Slug in order to see this section (where the build folder is placed) I don't see the react app I've just uploaded, I just see header and footer and these errors:
What I'm doing wrong? How can I fix it?
Thanks in advance.
Update:
I used FileZilla to upload these files but is still not showing anything. Any idea?
I changed the package.json homepage to: "homepage": "/wp-content/plugins/reactpress/apps/dase-mural-design/build",
But in the console of the WordPress site I see:
Thanks
It's an encoding issue, try setting your site encoding to utf-8 or uploading the files of your react app with a different tool, it could be the file manager plugin is changing the encoding when uploading.
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
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.