Setup CI/CD Pipeline in Azure DevOps to deploy Eleventy website to Firebase Hosting

Eleventy logo from 11ty.dev

Static sites developed using Eleventy are compiled during build time and stored in the /_site folder. This _site folder is then deployed (either manually or using pipelines) to a server like GitHub Pages or Firebase Hosting.

In this example, we will go over how to setup a CI/CD pipeline in Azure DevOps to deploy the static site built using 11ty to Firebase Hosting.

Prerequisites

Before you continue, make sure you have an Eleventy project setup and source code is available in Azure DevOps Repos.

1. Setup Firebase tools (CLI)

Run the following command in Terminal/Command Prompt to install Firebase Tools:

npm install -g firebase-tools

firebase login

2. Initialize your Firebase project within your Eleventy project

Navigate to your Eleventy project folder:

cd [PATH_TO_YOUR_ELEVENTY_PROJECT]

Run the following command from the root of your local project directory:

firebase init hosting

In this process, Firebase CLI will prompt to select your Firebase project and specify your public root directory.

Make sure to select the following options:

? What do you want to use as your public directory? _site
? Configure as a single-page app (rewrite all urls to /index.html)? No

3. Update package.json file and push your changes to your Azure DevOps Repository

Add the following scripts in your package.json file:

...
  "scripts": {
    "build": "npx @11ty/eleventy",
    "deploy": "npx @11ty/eleventy & firebase deploy",
    "start": "npx @11ty/eleventy  --serve"
  },
...

4. Navigate to the Pipelines page in your Azure DevOps project

Click on 'New Pipeline' button
On the 'Where is your code?' page, select Azure Repos Git
Select your git repository
On the 'Configure your pipeline' page, select 'Starter Pipeline'

5. Update Pipeline YAML file

Replace the content of the starter YAML file with the following:

# Trigger the pipeline whenever new changes are pushed in dev branch
trigger:
- dev

pool:
  vmImage: ubuntu-latest

steps:

# Use this task to find, download, and cache a specified version of Node.js and add it to the PATH.
- task: NodeTool@0
  inputs:
    versionSpec: 12.x
  displayName: 'Install Node.js'

# Run 'npm install' to install packages defined in package.json
- task: Npm@1
  inputs:
    command: 'install'
  displayName: 'Install npm packages'

# Build 11ty project using 'npx @11ty/eleventy' command
- task: CmdLine@2
  inputs:
    script: 'npm run build'
  displayName: 'Build 11ty project'

# Install Firebase CLI tools
- task: CmdLine@2
  inputs:
    script: 'npm install -g firebase-tools'
  displayName: 'Install Firebase tools'

# Deploy the app to Firebase using the CI token stored in variables
- task: CmdLine@2
  inputs:
    script: 'firebase deploy --token "$(FIREBASE_TOKEN)" -m "$(Build.BuildNumber)"'
  displayName: 'Firebase publish -m "$(Build.BuildNumber)"'

6. Generate Firebase CI Token

To deploy a site to Firebase in a headless environment, we need to generate a refresh token.

Run the following command to generate a new token:

firebase login:ci

Copy the token from the output

7. Securely store the token in Azure DevOps

On the YAML page of the pipeline from step 5, click on the 'Variables' button (located on top right of the page).
Click on the '+' Add button
Enter 'FIREBASE_TOKEN' in the name
Paste the Firebase CI token in the value field
Check the 'Keep this value secret' option and click on the 'OK' button

8. Run the pipeline

To make sure everything works fine, manually run the pipeline. It might take few minutes for the pipeline to run, depending on your website size.

9. Trigger the pipeline

Finally, to test the trigger, push some new changes to your dev branch. Once the changes are pushed, the pipeline will start automatically and deploy the app to Firebase Hosting.

If this post was helpful then don't forget to share it with others.