How to deploy Nuxt 3 app to Netlify with Github Actions

Deploying a Nuxt 3 app to Netlify seems like a easy job. You can connect repository to Netlify site and it is automatically deployed when you pushed your changes to the origin branch.
Me in the other hand, prefer to have everything in one place, so I wanted to control my CI/CD from Github Actions. In this article I will show you how, let's go!

As you might not know Nuxt 3 works with Nitro (open engine powering Nuxt) so normally, the deployment to Netlify does not require any configuration. Nitro will auto-detect that you are in a Netlify build environment and build the correct version of your server. But our scenario is not normal so we need to take some additional steps.

Create empty project

Make sure you have installed yarn, npx (included by default with npm
v5.2+) or npm (v6.1+) and node with at least
16.x version installed

yarn create nuxt-app <project-name>

Inside of the nuxt.config.ts file change the preset to netlify

export default defineNuxtConfig({  
    nitro: {  
        preset: 'netlify'  
  },  
  ...
})

Create workflow configuration

mkdir -p .github/workflows && touch .github/workflows/main.yml

Here is the inside of main.yml file

name: 'My Workflow'  

on:  
  push:  
    branches:  
    - main  

jobs:  
  deploy:  
    # Operating system to run job on  
  runs-on: ubuntu-latest  

    # Steps in job  
  steps:  
      # Get code from repo  
  - name: Checkout code  
        uses: actions/checkout@v1  
      # Install NodeJS  
  - name: Use Node.js 16.x  
        uses: actions/setup-node@v1  
        with:  
          node-version: 16.10.0  
      # Run npm install and build on our code  
  - run: npm install  
      - run: npm run build  
      # Deploy to Netlify using our dev secrets  
  - name: Deploy to netlify  
        uses: netlify/actions/cli@master  
        env:  
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_TOKEN }}  
          NETLIFY_SITE_ID:  ${{ secrets.SITE_ID }} 
        with:  
          args: deploy

Next we need to add secrets to our repository settings, you can find it here
https://github.com/{GITHUB_USERNAME}/{REPOSITORY_NAME}/settings/secrets/actions

Obtain a token in the Netlify UI

You can generate an access token manually in your Netlify user settings for Personal access tokens.

1. Under Personal access tokens, select New access token.

2. Enter a description.

3. Select Generate token.

4. Copy the generated token to your clipboard. Once you navigate from the page, the token cannot be seen again.

5. Save the token as a NETLIFY_AUTH_TOKEN environment variable in your terminal settings or in the UI of a Continuous Integration (CI) tool.

Obtaining Site ID

On your Netlify account

1. Go to Site settings > General > Site details > Site information, and copy the value for Site ID.

Push Your Code

Make sure you have pushed your code to the main branch, this way you will trigger Github Workflow and deploy your app to the world.