Firebase dynamic links and hosting on the same (custom) domain - firebase

I'm using Firebase Hosting to host a website and I'm using a custom domain name.
I want my website to be the destination for let's say: https://example.com
I also use firebase dynamic links that uses the same domain but using a different prefix.
Like this: https://links.example.com
The website host and dynamic links are working fine, but the problem is I don't know how to write my firebase.json rewrites in a way that allows for both the site (example.com) to work and the subdomain (links.firebase.com) that I can use for my dynamic links.
The dynamic links work if I use the following rewrite:
"rewrites": [
{
"source": "/**",
"dynamicLinks": true
}
]
But this way the main website (example.com) display a message about not being a valid dynamic link, in stead of showing the index.html
TL/DR
I'm wondering if it is possible to have both the website (example.com) and the dynamic links (links.example.com) working on the same domain (example) ?
Thanks in advance
EDIT 1:
I had renamed the index.html so that's why I wasn't seeing the website. Now that I changed it back it works, but the dynamic links do not. links.example.com shows the index.html
EDIT 2:
It finally works as intented: example.com and links.example.com point to the index.html while any format like links.example.com/aShortDynamicLinkCode activates dynamic links.
I used the following rewrites in my Firebase.json to achieve this
{
"source": "**",
"dynamicLinks": true
},
{
"source": "/**",
"dynamicLinks": true
},

If you have an index.html in your public directory, it will serve at / even if you have a rewrite like you specify (see serving priority in the docs).
If you're not seeing your index.html, that indicates that something is probably misconfigured. Double-check that your index.html is in the root of your public directory and that the number of files being deployed seems accurate.

Related

Next JS nextjs rewrites not working as intended

I am proxying part of my site to a 'new' nextjs page, as such all my assets, images etc... are messing up because the pathing is wrong.
So, I used "assetPrefix" for the css/js files, BUT all my images and api's are wrong, so I am trying to do a rewrite and its not working...
Is there a way to have next be able to ignore the host (that is proxing) and just use its own domain.. for instance, all the assets are: https://preview.mysite.com (current site), but I want it to use its "real domain" -- https://previewnext.mysite.com
async rewrites() {
return [
{
source: 'https://preview.mysite.com/_next/image*',
destination: 'https://previewnext.mysite.com/_next/image*'
},
basically, if the path is: https://preview.mysite.com/_next/image?, which is my current domain that proxies the nextjs site, SO I need the nextjs site to actually rewrite those image assets to: https://previewnext.mysite.com/_next/image*
Seems a huge limitation to not be able to use absolute paths for rewrites.

Unable to display website using Firebase Hosting

I am trying to host my dynamic Node.js website using Firebase Hosting but I am having difficulty based on my file structure. Here is what is looks like:
In my code, I am not using an index.html file but when I ran firebase init it automatically created one for me along with a 404.html file. When I deploy my code, only index.html file seems to execute. But when I try deploying after deleting the index.html file, I can see the 404.html file.
This is the firebase.json file. that I am using:
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
None of the files in the 'public/html' folder seem to be executing. I tried changing the public field to public/html in the firebase.json file but then I can only see Cannot GET / when deployed. How do I run the files in the 'public/html' folder when deploying along with the js files in the 'src/js' folder?
I have an error.html file in my code which is located under 'public/html/main'. If I want to use it besides the 404.html file, will I have to place in directly inside the public folder?
Additionally, I also have a lot of backend files. In order to use those, do I need to use some other service offered by firebase or that can be accomplished by using Firebase Hosting itself?
With Firebase Hosting, if you want to see web content when you load the "/" path, you will need a file called "index.html" in your public directory. It will not look in subdirectories. By default, with the configuration you're showing, all the paths are served relative to public.
It's hard to tell what you're expecting to work differently. If you want to refer to foo.html nested under html, then your path will need to be "/html/foo.html". If you want to change the hosting configuration to do something different, I suggest looking over the documentation.

How to implement a sitemap.xml file for a single page app using Firebase?

I was reading Google's guidelines about SEO and I found this.
Help Google find your content
The first step to getting your site on Google is to be sure that Google can find it. The best way to do that is to submit a sitemap. A sitemap is a file on your site that tells search engines about new or changed pages on your site. Learn more about how to build and submit a sitemap.
Obs.: My web app is an ecommerce/blog in which I have a shop that I have products to sell and I have a blogging section where I create and post content about those products.
So, each product has a product page, and each blog post has a blogPost page.
Then I went looking for some examples of Sitemaps from websites like mine that have good SEO ranking.
And I've found this good example:
robots.txt
User-Agent: *
Disallow: ... // SOME ROUTES
Sitemap: https://www.website.com/sitemap.xml
I.E: Apparently the crawler robot finds the Sitemap location from the robots.txt file.
And I've also found out that they keep separate sitemap files for blogPost and product pages.
sitemap.xml
<sitemapindex xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/siteindex.xsd">
<sitemap>
<loc>https://www.website.com/blogPosts-sitemap.xml</loc> // FOR POSTS
<lastmod>2019-09-10T05:00:14+00:00</lastmod>
</sitemap>
<sitemap>
<loc>https://www.website.com/products-sitemap.xml</loc> // FOR PRODUCTS
<lastmod>2019-09-10T05:00:14+00:00</lastmod>
</sitemap>
</sitemapindex>
blogPosts-sitemap.xml
// HUGE LIST WITH AN <url> FOR EACH BLOGPOST URL
<url>
<loc>
https://www.website.com/blog/some-blog-post-slug
</loc>
<lastmod>2019-09-03T18:11:56.873+00:00</lastmod>
<changefreq>weekly</changefreq>
<priority>0.8</priority>
</url>
products-sitemap.xml
// HUGE LIST WITH AN <url> FOR EACH PRODUCT URL
<url>
<loc>
https://www.website.com/gp/some-product-slug
</loc>
<lastmod>2019-09-08T07:00:16+00:00</lastmod>
<changefreq>yearly</changefreq>
<priority>0.3</priority>
</url>
QUESTION
How can I keep updated Sitemap files like that if my web app is a Single Page App with client site routing?
Since I'm using Firebase as my hosting, what I've thought about doing is:
OPTION #1 - Keep sitemap.xml in Firebase Hosting
From this question Upload single file to firebase hosting via CLI or other without deleting existing ones?
Frank van Puffelen says:
Update (December 2018): Firebase Hosting now has a REST API. While this still doesn't officially allow you to deploy a single file, you can use it creatively to get what you want. See my Gist here: https://gist.github.com/puf/e00c34dd82b35c56e91adbc3a9b1c412
I could use his Gist to update the sitemap.xml file and run this script once a day, or whenever I want. This would work for my current project, but it would not work for a project with a higher change frequency of dynamic pages, like a news portal or market place, for example.
OPTION #2 - Keep sitemap.xml in Firebase Storage
Keep the sitemap files in my Storage bucket and update it as frequently as I need via a admin script or a cloud scheduled function.
Set a rewrite in my firebase.json and specify a function to respond and serve the sitemap files from the bucket, when requested.
firebase.json
"hosting": {
// ...
// Add the "rewrites" attribute within "hosting"
"rewrites": [ {
"source": "/sitemap.xml",
"function": "serveSitemapFromStorageBucket"
} ]
}
FINAL QUESTION
I'm leaning towards OPTION #2, I want to know if it will work for this specific purpose or if I'm missing something out.
I ended up creating a cloud function to build the sitemap file on-demand.
firebase.json
"rewrites": [
{
"source": "/sitemap.xml",
"function": "buildSitemap"
},
]
buildSitemap.js (this is a cloud function)
import * as admin from 'firebase-admin';
async function buildSitemap(req,res) {
// Use firebase-admin to gather necessary data
// Build the sitemap file string
// and send it back
res.set('Content-Type', 'text/xml');
res.status(200).send(SITEMAP_STRING);
return;
}
export default buildSitemap;
Remove src/sitemap.xml from angular.json
"assets": [
"src/assets",
"src/favicon.ico",
"src/manifest.json",
"src/robots.txt"
],

Unable to set up Dynamic Links for Firebase Authentication

I've followed documentation in order to set dynamic links
https://firebase.google.com/docs/dynamic-links/custom-domains
My domain was already added to my hosting
So I went ahead to dynamic links and created custom prefix i.e. https://example.com/link
After that I added custom hosting configuration and deployed it
"hosting": {
"public": "hosting",
"appAssociation": "AUTO",
"rewrites": [
{
"source": "/link/**",
"dynamicLinks": true
}
]
}
Once deployed I added following key to my iOS projects .plist file
<key>FirebaseDynamicLinksCustomDomains</key>
<array>
<string>https://example.com/link</string>
</array>
Now I've cleaned my build, ran the app and sent myself a dynamic link. Url still uses firebases page.link structure. I'm not sure if there is something I'm doing wrong or am I misunderstanding what these custom domains mean?
Note: I am testing this through email link (passwordless) authentication, perhaps custom domain is just not applied there?
Firebase Auth only supports custom Firebase Dynamic Links without custom paths.
So if your custom domain is https://example.com/link, it won't work. However, configuring https://example.com as the custom domain will work.

firebase hosting - displaying incorrect content in Iframes

I have a react app that runs on firebase and is required to display content in an IFrame. When running on firebase, firebase displays the index.html in the IFrame instead of the relevant page.
All files are in the same directory but firebase defaults to using the index.html instead of the requested page
When you initialized your Firebase project in the command line, pre-deployment, you probably said "Yes" to the prompt asking if this project is a single-page-app. By saying yes, the CLI tool generated the following setting in the firebase.json settings file:
This tells the Firebase server to route all page requests to your index.html file - notice the wildcards ** - so that your React app can load the appropriate page.
If you don't want a specific route included in that rule, such as the call to your other file - you need to include an additional rewrite in that firebase.json settings file:
"rewrites": [
{
"source": "/more/**",
"destination": "/more/anotherpage.html"
},
{
"source": "**",
"destination": "/index.html"
},
]
*Note that the order is important, make sure it's before the catch-all wildcard option
You can read more about rewrites in the relevant section of the official documentation.

Resources