firebase-hosting-basics

Name: firebase-hosting-basics
Availability: InStock
Author: nikhilkakarla

Configure and deploy static web apps to Firebase Hosting via CLI.

Updated Aug 5, 2024

Search Tags:#deployment #spa #hosting #static site #firebase #firebase.json #preview channels

Ready to run

npx skills add https://github.com/nikhilkakarla/nikhilkakarla.github.io --skill firebase-hosting-basics-nikhilkakarla

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: firebase-hosting-basics
Source: https://github.com/nikhilkakarla/nikhilkakarla.github.io/tree/main/.agents/skills/firebase-hosting-basics
Command: npx skills add https://github.com/nikhilkakarla/nikhilkakarla.github.io --skill firebase-hosting-basics-nikhilkakarla

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires firebase-tools, and includes references (resource) components.

What problem does it solve? Deploying static sites and SPAs to Firebase Hosting requires correct firebase.json configuration, knowledge of deploy commands, and understanding of preview channels, which developers often get wrong or handle manually. ## Core Features & Use Cases - Hosting Configuration: Set up firebase.json with public directories, rewrites, redirects, headers, clean URLs, and trailing slash behavior. - Deployment Workflows: Deploy to live sites, create expiring preview channels, and clone preview versions to production without rebuilding. - Local Emulation: Test hosting behavior locally with the Firebase emulator before deploying. - Use Case: You have a React SPA built into a dist folder. Use this Skill to configure SPA rewrites, preview the build on a temporary channel, and promote it to your live site. ## Quick Start Ask the AI to configure firebase.json for your SPA and deploy it to a Firebase Hosting preview channel.

Frequently Asked Questions about firebase-hosting-basics

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I deploy a static site to Firebase Hosting?▼

Deploy to Firebase Hosting by running npx firebase-tools deploy --only hosting after configuring the public directory in firebase.json. This publishes your site to PROJECT_ID.web.app and PROJECT_ID.firebaseapp.com.

How do I configure SPA rewrites in firebase.json?▼

Add a rewrites rule in firebase.json with source "**" and destination "/index.html" so all routes serve your SPA entry point. This enables client-side routing for React, Vue, and similar frameworks.

Firebase Hosting vs Firebase App Hosting, which should I use?▼

Use Firebase Hosting for static sites and SPAs without server-side rendering, controlled via CLI. Choose Firebase App Hosting for full-stack frameworks like Next.js or Angular that need SSR and git-push-to-deploy workflows.

How do I preview changes before deploying to Firebase Hosting live?▼

Run firebase-tools hosting:channel:deploy CHANNEL_ID to publish to a temporary preview URL. Channels expire after 7 days by default, and you can clone a preview version to live with hosting:clone.

Can Firebase Hosting serve dynamic content or APIs?▼

Yes, Firebase Hosting serves dynamic content through rewrites that point to Cloud Functions or Cloud Run services. Configure a rewrite with a function name or run serviceId and region in firebase.json.