Deploying Nuxt to Firebase Hosting with GitHub Actions

Nuxt.js is easily one of the best static site generators right now and deploying it to any static hosting site is effortless.

Generate your static site

To deploy, you'll need to generate your static website first:

yarn generate

If you haven't done so, make sure that the target property in your nuxt.config.js is set to static:

export default {
  // Target: https://go.nuxtjs.dev/config-target
  target: 'static'
}

Deploying using the Firebase CLI

You'll need to set up a Firebase project and install the Firebase CLI.

Once you've added and initialized Firebase in your project, you should have a file called firebase.json in your application root.

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

Since Nuxt.js generates its distribution files in the dist directory by default, you should also update the public property in your firebase.json to dist:

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

To deploy your static website to Firebase hosting, you can now simply run:

firebase deploy --only hosting

Automate deployment with GitHub Actions

If you're using GitHub, you can use GitHub Actions to automatically generate and deploy your site to Firebase Hosting whenever a pull request is merged to your default branch.

To automatically generate the GitHub Actions configuration files for your site, run the following:

firebase init hosting:github

The command above will generate 2 files:

• .github/workflows/firebase-hosting-merge.yml - is triggered whenever a branch or pull request is merged to your default branch. The application will be deployed to your production site.
• .github/workflows/firebase-hosting-pull-request.yml - is triggered whenever a pull request is created. The application will be deployed to a beta channel.

Using yarn instead of npm

By default, the workflow configuration will be using npm. If you prefer to use yarn, you'll need to replace the command that builds your distribution files.

Replace the npm commands:

npm ci && npm run generate

To yarn commands:

yarn install --frozen-lockfile && yarn generate

Replacing sensitive data

You can use GitHub secrets to store sensitive information such as API keys and have them automatically inserted when building your app with GitHub actions. For example, if you want to replace an API key, you can simply add a step in your workflow that replaces a placeholder with the actual value:

- run: sed -i "s/API_KEY/${API_KEY}/" app.html
  env:
    API_KEY: ${{ secrets.FIREBASE_API_KEY }}

In the step above, we use sed to replace instances of ${API_KEY} with the actual API key.

Real-world example

If you're looking for an actual working example, look no further! This website is using GitHub actions to automatically build and deploy itself.