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?
- Use Firebase Hosting to serve both Webflow (marketing pages) and Vue.js (app) under the same domain with custom URL rewrites.
- Export Webflow HTML, place it in the Firebase
public/directory, host the Vue app in a subfolder (e.g.,/app/), and configurefirebase.jsonto route/app/**to Vue and all other paths to Webflow content.
Yes, it's possible to use Webflow for marketing pages and a Vue.js app hosted on Firebase under the same domain, but it requires some custom URL routing via Firebase Hosting to handle both sources.
1. Host Webflow and Vue Under One Domain
To achieve this setup, you can configure Firebase Hosting as the main domain handler and use rewrites/proxies in the firebase.json file to serve:
- Vue app for paths like
/app/** - Webflow site for root path
/and other marketing/blog pages
2. Export Webflow and Upload to Firebase
Since Webflow doesn’t allow direct custom routing per URL path, you’ll likely need to:
- Export Webflow HTML (available on paid plans)
- Upload Webflow pages to the
public/folder of your Firebase project, maintaining the structure for homepage, blog, etc. - Keep Vue app in a subdirectory, e.g.,
public/app/, or route to it with rewrites.
3. Firebase Hosting Configuration
Configure firebase.json with rewrites like:
- Route
/app/**toapp/index.htmlto load your Vue.js single-page app. - All other routes (like
/,/blog,/about) serve Webflow-exported HTML files.
Example:
"rewrites": [ { "source": "/app/**", "destination": "/app/index.html" }, { "source": "**", "destination": "/index.html" }]This assumes that Webflow’s exported homepage index.html is in the root of the Firebase public/ folder.
4. Use Custom Domain with Firebase Hosting
- Point your custom domain (e.g.,
www.example.com) to Firebase Hosting via A records or CNAME as per Firebase instructions. - All routing is then controlled in the
firebase.json.
5. SEO Considerations
- Webflow’s semantic HTML, meta tags, and Open Graph settings will help your homepage, blog, and marketing sections score well for SEO.
- Vue.js app (likely on a path like
/app) won’t be SEO-rich unless you implement server-side rendering (SSR) or pre-rendering.
Summary
You can host both Webflow (for homepage and content) and a Vue app (hosted on Firebase) under the same domain, using Firebase Hosting as the main router. Export Webflow, integrate it into Firebase, and define route rewrites to split traffic cleanly for both content and app sections.