I have set up routes on my MaterialApp like this:
routes: {
'/': (context) => const Gate(),
'/ungated': (context) => const LandingPage(gated: false,)
}
it all works fine locally, but when I host it on Firebase hosting and I try to access the /ungated route I get 404 page not found.
also the 404 that I get is not the page I defined in onUnknownRoute: (settings)=> MaterialPageRoute(builder: (_) => _errorRoute(settings))
Any ideas? I feel that I need to change firebase.json but have no idea what to put in there.
EDIT
The problem is because I am using PathUrlStrategy and Firebase Hosting does not work with that. I don't know if it's possible to make it work.
Related
Attempting to let Firebase persist authentication within the app.js of React Native by doing the following:
There is a sign in page that envokes auth() sign in via Firebase, which works fine, and redirects to the home page via navigation.replace("Home"); however, once the app is closed and relaunched on the emulator, it redirects back to sign in.
This is seemingly what the App.js looks like, I assume that the AuthStateChanged would be prevalent as depicted below, however, user is not accessed in App.js as it is established in SignIn.js, when the Firebase credentials are sent, but I assume it would be similar to this layout?
const App = () => {
var initialRoute = null
React.useEffect(() => {
const unsubscribe = auth().onAuthStateChanged(user => {
if(user) {
initialRoute = "Home"
}
else {
initialRoute = "SignIn"
}
})
return unsubscribe
}, []);
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false,
}}
initialRouteName={initialRoute}
>
The reason it needs to affect the initial route, and not just redirect anyone who reopens to the home page, is because after registration, there are extra steps included that adjust the database, such as location mapping and etc., therefore, the redirection has to occur within the initial route.
Thanks for your assistance.
This is not how you build a navigation flow with react-navigation. But that's no problem since theres a guide here on the official react-navigation side on how to do that: https://reactnavigation.org/docs/auth-flow/
Fixed by setting two different returns within App.js, one for if the user is authenticated with Firebase that sets the initialRoute to "Home", and one for else that sets it to "SignUp", seems to work fine.
I have a Next.js page, where the pages are statically generated (using next export). It's a dynamic route, but I will only fetch data on the client after the initial page load (in a useEffect).
The path is something like: /pages/foo/[id].tsx. This is in fact the only route which is going to exist.
My problem is:
If I access the URL directly (e.g. typing in https://mysite.fake/foo/1337 into the URL bar) I get a 404.
If I navigate to that route using a <Link /> it does work as expected
If I then reload the page, I get a 404 again.
On local dev, it works fine. The problem only exists when deployed.
The page in question is using the router.query, but I have the same problem with a completely static page (e.g. just /pages/bar/baz.tsx).
Example:
export const Home: NextPage = () => {
const router = useRouter()
const { id } = router.query
const headerText = id ? `Hello ${id.toString()}` : ''
// in a later iteration, I will use the query id to fetch data in a useEffect
return <h1>{headerText}</h1>
}
As far as I understand from the Next.js documentation on dynamic routing and data fetching this should be possible to do.
My next.config.js is very bare:
/** #type {import('next').NextConfig} */
module.exports = {
reactStrictMode: true,
}
What am I doing wrong?
I am trying to show a custom 404 not found page in my website with Flutter.
I am using the following code :
MaterialApp(
debugShowCheckedModeBanner: false,
initialRoute: "/",
routes: {
"/": (context) => Scaffold(),
"/test": (context) => TestPage()
},
onUnknownRoute: (settings) {
return MaterialPageRoute(builder: (_) => Scaffold(
body: Center(
child: Text("Page not found !"),
),
));
},
i have rebuild my app and deploy it with Firebase Hosting. However i am seeing this if i enter a wrong url :
Since i am using flutter, i don't really want to add an .html file as it is said, even if it works.
I would rather display a custom page built in dart.
How can i display my custom "Page not found" in such case ?
EDIT :
Here is my current firebase.json file :
{
"hosting": {
"cleanUrls": true,
"public": "build/web",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
What i have tried and what didn't work :
Not having rewrites
Having rewrites in hope that flutter routing would take the lead
Test the project in localhost
Change the Flutter routing Strategy from URL to PATH according to the documentation
In the end :
My existing pages in the website are working fine
All wrong urls are redirected to /index.html
The only thing that is working is :
Adding a 404.html file in my /build/web folder
Remove rewrites in firebase.json
However this is not what i want, i would like to display my not_found_page.dart instead.
This might be a Flutter issue, i keep this open in the meantime but i will dig deeper on the Flutter side.
The problem was indeed on the Flutter side.
I was using "/" as initialRoute and "/" as another route which was creating conflicts apparently and was actually useless in my code as the first page returned is defined under the MaterialApp's child.
Flutter was redirecting my routes to "/" instead of calling onUnknownRoute and there was a conflict with the rewrites in firebase.json
So i have removed the "/": (context) => Scaffold(), from the routes map.
I have also removed rewrites in firebase.json in order for this to work.
I have also set back the URL strategy, all the steps above were not working with the PATH strategy.
EDIT : i have figured out that the PATH strategy can work only if there is no home property on the MaterialApp widget.
If so, all of the wrong routes will be redirected to the home and not call the onUnknownRoute
For the / route, the home property, if non-null, is used.
Otherwise, the routes table is used, if it has an entry for the route.
Otherwise, onGenerateRoute is called, if provided. It should return a non-null value for any valid route not handled by home and routes.
Finally if all else fails onUnknownRoute is called.
PS : There is no need to implement 404.html file
just add a 404.html page in your root and redirect it your own custom flutter built page.
you can also learn to handle the
'Famous 404 page not found !' from here
I build all of my initial routes for a dynamic slug based on what I have available in my CMS at build time. Then as new CMS data is available, I will generate new pages when they are requested by the user.
I'm running into an issue where a user might hit /posts/1, but since posts/1 has no CMS data, I'm rendering the 404 page using the notFound boolean inside of getStaticProps. This is what I expect to happen.
Now, if I publish some data to /posts/1 in my CMS, the next time a user hits /posts/1, the API data is fetched in the getStaticProps method, and the page begins to build. The problem is that the user is immediately redirected to the 404 page even though the notFound block is not hit. The router.isFallback flag is also shown as false when it should be true since the page is building. Now, if this user were to refresh their page, they would see the generated page and no longer the 404 page since it is now built.
It seems like Next might route the user's request to the 404 page in the second scenario since it was previously a 404, but is there some way I can "block" the user's request or show my fallback until the page is rendered so that they don't see this 404 when the page is building? This scenario would not happen if the first user did not hit this slug before there was CMS data available.
Here's a simplified example of how I am using getStaticPaths and getStaticProps:
export const getStaticPaths = async (ctx) => {
const myInitialPaths = await fetch('http://my-cms-endpoint.com/initial-paths/');
return {
paths: [
...myInitialPaths
],
fallback: true
}
}
export const getStaticProps = async ({ params }) => {
const myPageData = await fetch('http://my-cms-endpoint.com/page/#id');
if (myPageData) {
return {
props: {
myPageData
}
}
} else {
return {
notFound: true
}
}
}
I have been using Expo to develop a react-native app, The functionality I am currently trying to implement is to share a link with friends on platforms such as fb messenger/whatapp or even normal texts and when they click this link it will launch my app to a specific page using the parameters.
After extensive research online - I’ve come to a blocker, following expo’s documentation I defined a scheme for my app - when I press share everything works correctly a message is created and I’m able to share content but only as string.
I am using react-natives Share library to share to an app and I’m using Expo to provide me with the link.
Ideally my first goal is to get the app opening using the Expo Link before I explore further into adding more functionality to the link.
Share.share({
message: "Click Here to View More! " + Linking.makeUrl( ' ' , { postkey : "7a5d6w2x9d6s3a28d8d});
url: Linking.makeUrl( ' ' , { pkey : gkey });
title: 'This post is amazing',
})
.then((result) =>{
console.log(result)
if(result === 'dismissedAction'){
return
}
})
.catch((error) => console.log(error))
In the root of my app I have also defined the event handlers: App.js
_handleRedirect=(event)=> {
let {path,queryParams} = Linking.parse(event);
Alert.alert(`queryparams : ${event} path : ${path} `)
this.props.navigation.navigate("Post_Detail",{key:queryParams.postkey})
}
}
componentDidMount() {
let scheme = 'nxet'
Linking.getInitialURL()
.then(url => {
console.log("App.js getInitialURL Triggered")
// this.handleOpenURL({ url });
})
.catch(error => console.error(error));
Linking.addEventListener('url', ({url}) => this._handleRedirect(url));;
}
componentWillUnmount() {
Linking.removeEventListener('url', this.handleOpenURL);
}
When I share the link to Whatsapp, Facebook Messenger or even just messages or notes it appears as myapplink://, I try to enter this into the browser and instead of asking me to open my app - it does a google search.
Please note I am attempting to have this working on Android Device and facing this issue
Is there something I am doing incorrectly?
Any help is much appreciated. Thanks.
You can not open external links, means other than http, https on Android. But you can on iOS. In order to be able to open your expo links, you need proper anchor tags on android. You can create html mails and give it a try, you will see it is gonna work on Android as well.