Firebase

How to set up Firebase Hosting with continuous deployment (CD) using CircleCI?

Discover an easy-to-follow guide on setting up Firebase Hosting paired with CircleCI for smooth, continuous deployment. Make web project deployments entirely automated.

Developer profile skeleton
a developer thinking

Overview

Setting up Firebase Hosting with continuous deployment (CD) using CircleCI brings a smooth deployment process to your fingertips, ensuring your app updates automatically whenever changes hit the code repository. This setup includes steps like configuring your Firebase project, integrating CircleCI with your repository, establishing a deployment pipeline, and managing Firebase tokens securely. Using these tools together helps maintain a streamlined workflow, cuts down on manual tasks, and guarantees that your live site stays current with the newest code updates.

Get a Free No-Code Consultation
Meet with Will, CEO at Bootstrapped to get a Free No-Code Consultation
Book a Call
Will Hawkins
CEO at Bootstrapped

How to set up Firebase Hosting with continuous deployment (CD) using CircleCI?

Step 1: Set Up Firebase Project and Firebase Hosting

  • Head over to the Firebase Console.
  • Click on Add Project and just follow the steps to whip up a new Firebase project.
  • Once you're all set, go to Hosting in the left sidebar.
  • Click Get Started and follow the on-screen instructions to set up Firebase Hosting. This includes initializing Firebase in your local project.
# In your local project directory:
firebase init hosting
  • Follow the prompts to select the Firebase project you just created and set up hosting configurations.

Step 2: Install Firebase CLI

  • Make sure Node.js is installed.
  • Install the Firebase CLI globally using npm.
npm install -g firebase-tools

Step 3: Log in to Firebase

  • Use the Firebase CLI to log in to your Firebase account.
firebase login

Step 4: Set Up CircleCI

  • Go to CircleCI and sign in or sign up using your preferred method (like GitHub or Bitbucket).
  • Once you're in, navigate to Projects and pick the repository that has your Firebase project.
  • Click Set Up Project and choose the option to create a new configuration.

Step 5: Create a CircleCI Configuration File

  • In your project directory, create a folder named .circleci.
  • Inside the .circleci folder, create a file named config.yml.
version: 2.1

orbs:
  node: circleci/[email protected]

executors:
  node-executor:
    docker:
      - image: circleci/node:latest

jobs:
  deploy:
    executor: node-executor
    steps:
      - checkout
      - node/install-packages:
          pkg-manager: npm
      - run:
          name: Install Firebase CLI
          command: npm install -g firebase-tools
      - run:
          name: Deploy to Firebase
          command: |
            echo $FIREBASE_TOKEN | firebase login:ci --interactive
            firebase deploy --only hosting

workflows:
  version: 2
  deploy:
    jobs:
      - deploy

Step 6: Add Firebase Token as Environment Variable

  • On the CircleCI dashboard, navigate to your project settings.
  • Go to Environment Variables and add a new variable named FIREBASE_TOKEN.
  • Retrieve a CI token by running:
firebase login:ci
  • Copy the generated token and paste it as the value for the FIREBASE_TOKEN environment variable in CircleCI.

Step 7: Trigger a Deployment

  • Commit and push the .circleci/config.yml file to your repository.
  • Every push to the repository should now trigger a CircleCI build and deploy your project to Firebase Hosting accordingly. Check the CircleCI dashboard to monitor the build and deployment status.
git add .circleci/config.yml
git commit -m "Add CircleCI configuration for Firebase Hosting"
git push origin main

Explore more Firebase tutorials

Complete Guide to Firebase: Tutorials, Tips, and Best Practices

Explore our Firebase tutorials directory - an essential resource for learning how to create, deploy and manage robust server-side applications with ease and efficiency.

Why are companies choosing Bootstrapped?

40-60%

Faster with no-code

Nocode tools allow us to develop and deploy your new application 40-60% faster than regular app development methods.

90 days

From idea to MVP

Save time, money, and energy with an optimized hiring process. Access a pool of experts who are sourced, vetted, and matched to meet your precise requirements.

1 283 apps

built by our developers

With the Bootstrapped platform, managing projects and developers has never been easier.

hero graphic

Our capabilities

Bootstrapped offers a comprehensive suite of capabilities tailored for startups. Our expertise spans web and mobile app development, utilizing the latest technologies to ensure high performance and scalability. The team excels in creating intuitive user interfaces and seamless user experiences. We employ agile methodologies for flexible and efficient project management, ensuring timely delivery and adaptability to changing requirements. Additionally, Bootstrapped provides continuous support and maintenance, helping startups grow and evolve their digital products. Our services are designed to be affordable and high-quality, making them an ideal partner for new ventures.

Engineered for you

1

Fast Development: Bootstrapped specializes in helping startup founders build web and mobile apps quickly, ensuring a fast go-to-market strategy.

2

Tailored Solutions: The company offers customized app development, adapting to specific business needs and goals, which ensures your app stands out in the competitive market.

3

Expert Team: With a team of experienced developers and designers, Bootstrapped ensures high-quality, reliable, and scalable app solutions.

4

Affordable Pricing: Ideal for startups, Bootstrapped offers cost-effective development services without compromising on quality.

5

Supportive Partnership: Beyond development, Bootstrapped provides ongoing support and consultation, fostering long-term success for your startup.

6

Agile Methodology: Utilizing agile development practices, Bootstrapped ensures flexibility, iterative progress, and swift adaptation to changes, enhancing project success.

Yes, if you can dream it, we can build it.