i have just created my first website with react.js. when i run it, everything works and i can see all the pages (So the routers all work correctly so far).
i wanted to host my site with firebase and everything worked, i got a domain and with that i can reach the login page from my website. Url: tracker-2baa0.web.app But when i want to change the page, for example i want to change to the "/menu" by clicking on the house symbol in the upper left corner, i get the error message, "404 Page Not Found".
I have read from others that i have to rewrite the firebase.json file, but i don't know what the stuff there means exactly. specifically how I need to write the rewrites for the individual routers.
this is my firebase.json file:
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"hosting": {
"public": "build",
"rewrites": [ {
"source": "/Menu/*",
"destination": "/Menu"
}],
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
},
"storage": {
"rules": "storage.rules"
}
}
and my routing:
var App = () => {
var currentUserName = ""
return (
<AuthProvider>
<Router>
<Switch>
<Route path ='/menu' exact component={Menu} />
<Route path ='/add' exact component={Add} />
<Route path = '/add-Evaluation' component ={AddEvaluation}/>
<Route path ='/login' exact component={Login} />
<Route exact path="/signup" component = {SignUp} />
<Route path ="/projekt" exact component={Projekt} />
<Route path ="/Contact" exact component={Contact} />
<PrivateRoute exact path="/" component = {Home} />
</Switch>
</Router>
</AuthProvider>
);
}
i have no experience with hosting and would be very happy if someone could help me or give me some advice on what to look out for.
love greetings
If your app is a "Progressive Web App" or PWA you most likely want to rewrite all paths to the index.
This is typically done with the following rewrites:
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
This is because modern frameworks like react don't change the page, but rather edit the home page index.html with the page content based on the URL path.
You can set up other rewrites to cloud functions and other cool things too and a full example can be seen in the documentation for the many features Firebase hosting supports here.
It is also important that you clear your cache to ensure you are seeing changes server side