How to deploy Nuxt 3 app to Netlify with Github Actions
Published: 2023-04-19 23:04:57



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](https://nuxt.com/)) so normally, the deployment to Netlify does not require any configuration. Nitro will auto-detect that you are in a [Netlify](https://www.netlify.com/) 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](https://nodejs.org/) 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**](https://app.netlify.com/user/applications#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
6.  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.