I m new to react, having some problems with build and uploading project.
If I upload with out adding react-router-dom it works fine, but when i upload files from build folder after importing react-router-dom, blank page appears
but there are not any errors in console. Files and codes are visible from the source tab from Developer tools.
Note: With out react-router-dom all the html renders in browser. Also I have added /folder-name/static....(for chunks and manifest)
This is the code to import react-router-dom
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
No any error messages in console.
Install both react-router and react-router-dom.
Got my answer on github page, was not aware of basename for BrowserRouter.
https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/BrowserRouter.md
I made react-app and webpack from scratch, and everything works and looks fine in webpack-dev-server. But when I build (bundle) app to file it not showing components from 'Route' path.
Webpack outputting no errors so I don't know how to fix that. This is the project: https://github.com/kamilmoskal/react-movies-library-app
Probably you were trying to open index.html as regular file in the browser. The application should be deployed on some server.
The easiest way to make it work is to serve it on you local machine using i.e. serve:
npm install serve --save
cd doc
serve
Then navigate to http://localhost:5000 in your browser
Ok i figured it out the problem was with < Route exact path='/' ... when path is like this "/", to fix that i changed:
from: import { BrowserRouter, Route, Switch } from 'react-router-dom'
to: import { HashRouter as Router, Route, Switch } from 'react-router-dom'
and in code below from: <BrowserRouter>
...
</BrowserRouter>
to: <Router>
...
</Router>
When i was doing apps throught standard 'npx create-react-app my-app' it was enough to add < BrowserRouter basename={process.env.PUBLIC_URL}> but in this case it didint work. maybe it will help someone.
I have classic web application rendered on server. I want to create admin panel as single page application in React. I want to server admin panel from https://smyapp.example.com/admin/. I try to use create-react-app but it assumes that i serve SPA from root URL. How should I configure create-react-app to serve app from "admin" subdirectory? In documentation I found "homepage" property but if I properly understand it requires complete url. I can't give complete url because my app is deployed in few environments.
In addition to your requirements, I am adding mine:
It should be done by CD, through an env variable.
If I need to rename the subdirectory, I should only have to change the env variable.
It should work with react-router.
It should work with scss (sass) and html.
Everything should work normally in dev mode (npm start).
I also had to implement it in Angular2+ project not long ago, I found it harder to implement in React then in Angular2+ where you are good to go with ng build --base-href /<project_name>/. source
Short version
Before building, set PUBLIC_URL env variable to the value of your subdirectory, let use /subdir for example. You can also put this variable into your .env.production (in case you do not have that file you can check the doc)
In public/index.html add the base element bellow, this is for static files like images.
<base href="%PUBLIC_URL%/">
Also in public/index.html, if you have custom link element, make sure theyre are prefixed with %PUBLIC_URL% (like manifest.json and favicon.ico href).
If you use BrowserRouter, you can add basename prop:
<BrowserRouter basename={process.env.PUBLIC_URL} />
If you use Router instead, because you need access to history.push method, to programmatically change page, do the following:
// history.tsx
import {createBrowserHistory} from 'history';
export default createBrowserHistory({ basename: process.env.PUBLIC_URL });
<!-- Where your router is, for me, App.tsx -->
<Router history={history}>
...
</Router>
Use relative links inside your elements
<!-- "./assets/quotes.png" is also ok, but "/assets/quotes.png" is not -->
<img src="assets/quotes.png" alt="" />
Move your background-image links from scss to jsx/tsx files (note that you may not need to do that if you use css files):
/*remove that*/
background-image: url('/assets/background-form.jpg');
<section style={{backgroundImage: `url('assets/background-form.jpg')`}}>
...
You should be done.
Additional informations
I preferred to use PUBLIC_URL instead of homepage in package.json because I want to use env variable set on gitlab to set the subdir. Relevant resources about the subject:
https://create-react-app.dev/docs/deployment/#building-for-relative-paths
https://create-react-app.dev/docs/advanced-configuration/
https://github.com/facebook/create-react-app/issues/998
PUBLIC_URL override homepage, and PUBLIC_URL also take the domain name, if you provide one. If you set only homepage, PUBLIC_URL will be set to the value of homepage.
If you do not want to use a base element in your index.html (I would not know why), you will need to append process.env.PUBLIC_URL to every link yourself. Note that if you have react-router with a base element, but have not set basename prop, you will get a warning.
Sass won't compile with an incorrect relative path. It also won't compile with correct relative path to your ../public/assets folder, because of ModuleScopePlugin restrictions, you can avoid the restriction by moving your image inside the src folder, I haven't tried that.
There seem to be no way of testing relative path in development mode (npm start). see comment
Finnaly, theses stackoverflow link have related issues:
Can I set a base route in react-router
Setting base href using Environment variables
For create-react-app v2 and react-router v4, I used the following combo to serve a production (staging, uat, etc) app under "/app":
package.json:
"homepage": "/app"
Then in the app entry point:
<BrowserRouter basename={process.env.PUBLIC_URL}>
{/* other components */}
</BrowserRouter>
And everything "just works" across both local-dev and deployed environments. HTH!
You should add entry in package.json for this.
Add a key "homepage": "your-subfolder/" in your package.json
All static files will be loaded from "your-subfolder"
If there is no subfolder and you need to load from same folder you need to add the path as "./" or remove the entire line which has "homepage": "xxxxxxxxxx"
"homepage": "./"
From the official docs
By default, Create React App produces a build assuming your app is hosted at the server root.
To override this, specify the homepage in your package.json, for example:
"homepage": "http://mywebsite.com/relativepath",
Note: If you are using react-router#^4, you can route <Link>s using the basename prop on any <Router>.
From here and also check the official CRA docs
To get relative URLs you can build the app like this:
PUBLIC_URL="." npm run build
put in package.json something like this:
"homepage" : "http://localhost:3000/subfolder",
and work fine on any public or local server. Of course, subfolder must be your folder.
Maybe you could use react-router and its relative basename parameter which allows you to serve your app from a subdirectory.
basename is the base URL for all locations. If your app is served from a sub-directory on your server, you’ll want to set this to the sub-directory. A properly formatted basename should have a leading slash, but no trailing slash.
For instance:
<BrowserRouter basename="/calendar"/>
So <Link to="/today"/> will render <a href="/calendar/today">
See: https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string
In our case, we did everything as described in Ambroise's answer, but got a blank page in production with no errors or warnings in the console. It turned out to be a problem with BrowserRouter - we got it working by setting BrowserRouter's basename like so:
<BrowserRouter basename="/our_subfolder/" />
You can specify the public path in your webpack configuration along with use of react route basepath.
Link to Public Path: https://webpack.js.org/guides/public-path/
Note that public path will be both leading and trailing slashes / to be valid.
I'm trying to make a react project on github pages using [username].github.io. but when I go on the link, it just returns a white screen without any error messages. This also happens when I use a custom domain name.
However, it works when I run it locally and also when I use gh-pages instead of a user repo.
I used https://medium.freecodecamp.org/surge-vs-github-pages-deploying-a-create-react-app-project-c0ecbf317089 to upload all my files into github since I created the repo at the end after I finished, but I tweaked it a little to work without gh-pages.
I also referred to this answer: hosting gh-pages on custom domain, white empty page but it didn't do anything for me.
Does anyone know how to fix this? Thanks!
Change BrowserRouter to HashRouter as follow
Before:
import { BrowserRouter } from "react-router-dom"
ReactDOM.render(
<BrowserRouter><App /></BrowserRouter>,
document.getElementById('root')
);
After:
import { HashRouter } from "react-router-dom"
ReactDOM.render(
<HashRouter><App /></HashRouter>,
document.getElementById('root')
);
Check if you're getting an error on the console. You might need to switch from BroswerRouter to HashRouter, because gh-pages doesn't work well with the former.
I am a bit late to this discussion, but I ran into this same issue and I found a solution that was not listed here.
Here is the solution I found: https://github.com/gitname/react-gh-pages/issues/3#issuecomment-399787987
The issue this user was having was related to how GitHub serves your react build from GitHub Pages. GitHub pages serves your react build from a folder names after your repository directory instead of from the root server directory "/". Hopefully this link will help someone else out in the future.
Using react router in my create-react-app i had this same issue. What solved it for me was adding this line to the router.
<Router basename={process.env.PUBLIC_URL}>
I can't find any tutorial showing how to add React Router to an existing create-react-app. All of them show how to do it when you start a fresh create react app. How do I add it to the half finished create-react-app I'm working on?
1.install react-router-dom (v4).
import {Switch,Route,Link} from 'react-router-dom';
import BrowserHistory,
now you can use Switch Route Components to play with routing.