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 rewrites to serve your Vue.js app under specific paths (e.g., /app/**) and optionally redirect other paths to Webflow.
  • Prefer hosting Webflow on a subdomain (e.g., www.yourdomain.com) and serve your Vue app on the root or subpath (yourdomain.com/app) for simplicity and SEO consistency.
  • Configure DNS: point www.domain.com to Webflow’s IPs and domain.com to Firebase or redirect it; use canonical tags to unify SEO across domain variants.

Yes, it's possible to use a Vue.js app on Firebase Hosting alongside a Webflow-managed homepage, blog, and marketing pages under the same domain. This setup allows you to maximize SEO benefits while keeping content and app infrastructure separated.

​

Here's how you can architect this:

​

1. Use Firebase Hosting “Rewrites” and “Redirects”

​

  • Firebase Hosting supports custom routing via the firebase.json configuration file.
  • Use rewrites to point certain paths (like /app/**) to your Vue.js app.
  • Use redirects to reroute specific paths to external URLs, such as Webflow-hosted pages.

​

2. Host Webflow Content on a Subdomain or Use Proxy Paths

​

You have two main options for integrating Webflow with Firebase Hosting:

​

  • Option A: Use a subdomain (e.g., www.yourdomain.com for Webflow)  
  • Point www.yourdomain.com to Webflow via its A records (75.2.70.75, 99.83.190.102) and CNAME for proxy-ssl.webflow.com.
  • Serve your Vue app on a subpath like yourdomain.com/app via Firebase Hosting root (yourdomain.com), while Webflow controls www.yourdomain.com.
  • Set a canonical domain for SEO consistency.

​

  • Option B: Use Firebase Rewrites to Proxy Webflow Pages  
  • Host your Vue app at yourdomain.com.
  • Use Firebase rewrites to proxy paths like /blog, /pricing, or / (homepage) directly to your Webflow-hosted URLs.
  • This involves setting firebase.json to rewrite those paths to Webflow’s external URLs, maintaining the same domain in appearance for SEO.

​

  Example rule in firebase.json:

  • { "source": "/blog/**", "destination": "https://webflow-site.webflow.io/blog" }

​

  ⚠️ Note: Proxying external URLs via Firebase Hosting isn't supported natively unless you use a Cloud Function or a proxy server, which adds complexity. In that case, Option A is preferred for simplicity and reliability.

​

3. Use Subdomains + Canonical Tags for SEO

​

  • Webflow can manage www.yourdomain.com and include canonical tags pointing to yourdomain.com, or vice versa.
  • Redirect yourdomain.com to www.yourdomain.com (or the opposite) to unify your domain and avoid SEO penalties for duplicate content.

​

4. DNS Configuration

​

  • Point www.domain.com to Webflow’s IPs:  

  (a) 75.2.70.75, (b) 99.83.190.102

  • Point domain.com to Firebase Hosting’s IPs, or redirect it to www.domain.com depending on the main hosting point.
  • Alternatively, use Cloudflare or another DNS provider to manage root-level redirects and domain resolution.

​

Summary

​

You can host your Vue.js app on Firebase Hosting and your marketing site, homepage, and blog on Webflow, all under the same domain by using subdomains (recommended) or advanced routing/proxying with Firebase. For SEO, ensure consistent URLs with canonical tags and redirects to unify domain variants.

Rate this answer

Other Webflow Questions