In firebase.json, is there a way to rewrite (not redirect) all requests to the corresponding .html file but leave other extensions?
for example, https://example.com/foo will be the same as https://example.com/foo.html.
But https://example.com/data will not be the same as https://example.com/data.xml.
This is the cleanUrls option (as in the docs) in firebase.json:
{
"hosting": {
"cleanUrls": true
}
}
Related
I have the following project tree in /public
.
On my website, if I request a non-existent page from a page in /public, e.g. mydomain.com/nonexistentpage, it throws a 404 page properly.
However, if I request a non-existent page from mydomain.com/folder/nonexistentpage, it breaks everything except HTML. Errors thrown in the browser indicate that it's looking for assets in /public/folder/files and /public/folder, while the actual files are in /public/files and /public.
My firebase.json is:
{
"hosting": {
"public": "public",
"cleanUrls": true,
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
What do I do to make the 404 page appear properly on any page?
Check if you don't use relative paths when using <link>.
My goal is to have two kinds of dynamic routes on the same path. I want:
mywebsite.com/#username to send people to /pages/[username].tsx
mywebsite.com/page-slug to send people to /pages/[pageSlug].tsx
I tried creating two files:
/pages/[pageSlug].tsx
/pages/[...username].tsx
So that [pageSlug].tsx would have priority, and then everything else would go to [...username].tsx, where I would extract the username from the path and render the page.
It works great locally, but on vercel mywebsite.com/#username pages return 404 error.
I have also tried following this advice about doing this with url rewrites, but it doesn't seem to work.
I have created two files:
/pages/[pageSlug].tsx
/pages/user/[username].tsx
Set up the rewrites in next.config.js:
module.exports = {
reactStrictMode: true,
async rewrites() {
return [
{
source: '/:username(#[a-zA-Z0-9]+)/:id*',
destination: "/user/:username/:id*",
}
]
}
}
And set up the links to the user profiles like so:
<Link href="/user/[username]" as={`#${post.author.username}`}>
{post.author.username}
</Link>
Just loading the http://localhost:3080/#lumen works, but when I click on a link I'm getting:
Error: The provided as value (/#lumen) is incompatible with the href value (/user/[username]). Read more: https://nextjs.org/docs/messages/incompatible-href-as
How can I make this work with the rewrites (or in any other way)? Any advice?
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 found in the firebase documents that you could hide the .html extensions of my site by creating a "firebase.json" file. I effectively remove the extensions but when I want to enter my other pages I cannot. I always see the main page.
I tried previously with .htaccess but it didn't work out. Now I found this firebase resource but any extension directs me to the main page.
I put that in my file "firebase.json"
"hosting": {
"cleanUrls": true,
"trailingSlash": false
}
You can set up routes inside of firebase.json. They can either be rewrites (where the url is actually pointing to another location, but that is unknown to the user), or redirects (where the page redirects to another url).
Inside of your firebase.json, hosting should look like this:
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "/sign-up",
"destination": "/sign-up.html"
}
],
"redirects": [
{
"source": "/sign-up.html",
"destination": "/sign-up"
}
]
}
There are 2 added nodes, rewrites and redirects. What this does is whenever someone visits /sign-up, you actually point them to /sign-up.html, where your actual html code is. But when someone visits /sign-up.html on their own, you redirect them to /sign-up.
I have created a custom module and added requires-config.js (app\code\Namespace\Modulename\view\frontend).
var config = {
map: {
'*': {
test: 'https://example.com/test.js'
}
}
};
After that I have deploy the static content, now I can see the external js has added in following location (pub\static_requirejs\frontend\Magento\luma\en_US),but still external js is not loaded in page source (using console).
Still I need to add the js files in layout?
<head>
<link src="https://example.com/test.js"/>
</head>
Its good practise to put your js in Modulename/view/frontend/web/js folder rather than loading from url.
var config = {
"map": {
"*": {
"test": "Modulename/js/test"
}
}
};
Also you don't need to add .js extenstion in the require js file.
then check it will load
Please clear the cache and also do static content deploy