Is it possible to have a Vue.js application running on Firebase hosting while using Webflow for marketing campaigns, homepage, and blog, all under the same domain for SEO purposes?
TL;DR
- Use Firebase Hosting as the primary domain to serve Vue.js app routes (e.g., /app, /dashboard) via rewrites.
- Proxy marketing paths (e.g., /, /blog, /campaign) to Webflow content hosted on a subdomain using Firebase Functions.
- Configure Firebase DNS and SEO settings to ensure proper routing, discoverability, and canonical consistency.
Yes, it's possible to use Vue.js on Firebase Hosting and Webflow for marketing content under the same domain by configuring URL-based routing with Firebase's rewrites. This allows each platform to serve specific paths, maintaining SEO benefits.
1. Use Firebase Hosting as the Primary Domain Host
- Firebase Hosting needs to handle domain resolution (e.g., yourdomain.com).
- All traffic goes through Firebase, which then serves either your Vue app or proxies content from Webflow depending on the path.
2. Deploy Vue.js App for App-Specific Routes
- Deploy your Vue.js SPA to Firebase for specific routes like
/app,/dashboard, or/admin. - In your
firebase.json, use a rewrite rule to serve these routes with the Vue build.
Example:
"rewrites": [ { "source": "/app/**", "destination": "/index.html" }]3. Proxy Webflow Pages with Firebase Rewrites
- Host your marketing site, blog, and homepage in Webflow under a separate subdomain like
webflow.yourdomain.com. - In Webflow, publish to this subdomain using a different custom domain.
- In Firebase, create rewrites for paths like
/,/blog/**, and/campaign/**to proxy Webflow content from that subdomain.
Example:
"rewrites": [ { "source": "/", "function": "proxyWebflowHome" }, { "source": "/blog/**", "function": "proxyWebflow" }, { "source": "/campaign/**", "function": "proxyWebflow" }]- You’ll need a Cloud Function (e.g.,
proxyWebflow) that usesres.redirectorres.proxyto pull Webflow content.
4. Configure SEO-Friendly URLs and Metadata
- Make sure Webflow handles all SEO metadata (title, meta description, open graph tags).
- Firebase will serve Webflow content directly at SEO-visible URLs (
/,/blog/post-name), preserving discoverability.
5. DNS Configuration
- Point your main domain (e.g., yourdomain.com) to Firebase using A records:
- (a)
199.36.158.100 - Set up
www.yourdomain.comas a redirect via Firebase to ensure canonical consistency.
Summary
Yes, you can use Firebase Hosting to serve a Vue.js app and proxy Webflow pages under the same domain. Use Firebase rewrites and Cloud Functions to route specific URL paths to either your app or Webflow content, maintaining SEO-friendly URLs across the board.