skills.rest
nikhilkakarla
nikhilkakarlaCOMMUNITY
Explore all skills by this author →
GitHub

firebase-hosting-basics

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
One-click install
npx skills add https://github.com/nikhilkakarla/nikhilkakarla.github.io --skill firebase-hosting-basics-nikhilkakarla
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
rebyteai-templaterebyteai-template
15

web-app-builder

Build and deploy static web apps from local directories to cloud hosting.

Official
Intermediate
MattSenterMattSenter

senternet-site-firebase

Configures Firebase Hosting or App Hosting with custom domains, headers, and deploy scripts.

Community
Advanced
ericdahl-devericdahl-dev

land-and-deploy

Automate deployment workflows for merged pull requests with CI/CD and canary releases.

Official
Advanced
firebasefirebase
402

firebase-app-hosting-basics

Deploy Next.js and Angular apps to Firebase App Hosting with git push.

Official
Intermediate