Deployment

Deploying to Nuxthub

Learn how to deploy your Supersaas application to Nuxthub using GitHub Actions

This guide will walk you through the process of deploying your Supersaas application to Nuxthub using GitHub Actions. You can choose between two deployment methods:

  1. Using the NuxtHub CLI (recommended for developers)
  2. Using the NuxtHub admin panel UI (alternative method)

Prerequisites

Before you begin, ensure you have:

  • A Cloudflare account
  • A Nuxthub account
  • A GitHub repository with your Supersaas application

Method 1: Using the NuxtHub CLI

Initial Setup

  1. Clone or fork the repository to your GitHub account
  2. Run the following command in your project directory:
Terminal
npx nuxthub deploy

This command will:

  • Deploy your application to Nuxthub
  • Generate a nuxthub.yml file in your project
  • Set up a GitHub Action for automated deployments

Method 2: Using the NuxtHub Admin Panel UI

If you prefer using the UI over the CLI, follow these steps:

  1. Create a NuxtHub project and configure your GitHub repository through the admin panel UI:
  1. The UI will add a .nuxthub.yml file to your repository. Pull these changes and add the environment secrets to your action file:

Configuring Environment Variables

The deployment will fail if environment variables are not configured. Since GitHub doesn't allow adding secrets via API for private repositories, you'll need to add them manually:

  1. Go to your GitHub repository settings
  2. Navigate to Settings > Secrets and variables > Actions
  3. Add the following secrets (not variables) to your repository:

Required Secrets

Authentication

  • NUXT_OAUTH_GITHUB_CLIENT_ID
  • NUXT_OAUTH_GITHUB_CLIENT_SECRET
  • NUXT_OAUTH_GOOGLE_CLIENT_ID
  • NUXT_OAUTH_GOOGLE_CLIENT_SECRET
  • NUXT_OAUTH_DISCORD_CLIENT_ID
  • NUXT_OAUTH_DISCORD_CLIENT_SECRET
  • NUXT_SESSION_PASSWORD

Payment Processing

  • PAYMENT_PROVIDER
  • NUXT_STRIPE_SECRET_KEY
  • NUXT_STRIPE_WEBHOOK_SECRET

Email Configuration

  • RESEND_API_TOKEN
  • FROM_EMAIL
  • EMAIL_PROVIDER

Application Settings

  • BASE_URL
  • APP_NAME
  • APP_DESCRIPTION
  • LOGO_URL
  • MOCK_EMAIL

Twilio Integration

  • TWILIO_ACCOUNT_SID
  • TWILIO_AUTH_TOKEN
  • TWILIO_PHONE_NUMBER

GitHub Actions Configuration

The following is the GitHub Actions workflow configuration that will be used for deployment:

nuxthub.yml
name: Deploy to NuxtHub
on: push

jobs:
  deploy:
    name: "Deploy to NuxtHub"
    runs-on: ubuntu-latest
    environment:
      name: ${{ github.ref == 'refs/heads/main' && 'production' || 'preview' }}
      url: ${{ steps.deploy.outputs.deployment-url }}
    permissions:
      contents: read
      id-token: write

    steps:
      - uses: actions/checkout@v4

      - name: Install pnpm
        uses: pnpm/action-setup@v4

      - name: Install Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: "pnpm"

      - name: Install dependencies
        run: pnpm install

      - name: Ensure NuxtHub module is installed
        run: pnpx nuxthub@latest ensure

      - name: Build application
        run: pnpm build

      - name: Deploy to NuxtHub
        uses: nuxt-hub/action@v1
        id: deploy
        with:
          project-key: essentials-v3-dzwp
    env:
      # Auth Utils
      NUXT_OAUTH_GITHUB_CLIENT_ID: ${{ secrets.NUXT_OAUTH_GITHUB_CLIENT_ID }}
      NUXT_OAUTH_GITHUB_CLIENT_SECRET: ${{ secrets.NUXT_OAUTH_GITHUB_CLIENT_SECRET }}
      NUXT_OAUTH_GOOGLE_CLIENT_ID: ${{ secrets.NUXT_OAUTH_GOOGLE_CLIENT_ID }}
      NUXT_OAUTH_GOOGLE_CLIENT_SECRET: ${{ secrets.NUXT_OAUTH_GOOGLE_CLIENT_SECRET }}
      NUXT_OAUTH_DISCORD_CLIENT_ID: ${{ secrets.NUXT_OAUTH_DISCORD_CLIENT_ID }}
      NUXT_OAUTH_DISCORD_CLIENT_SECRET: ${{ secrets.NUXT_OAUTH_DISCORD_CLIENT_SECRET }}
      NUXT_SESSION_PASSWORD: ${{ secrets.NUXT_SESSION_PASSWORD }}

      # Payment
      NUXT_STRIPE_SECRET_KEY: ${{ secrets.NUXT_STRIPE_SECRET_KEY }}
      NUXT_STRIPE_WEBHOOK_SECRET: ${{ secrets.NUXT_STRIPE_WEBHOOK_SECRET }}

      # Email
      RESEND_API_TOKEN: ${{ secrets.RESEND_API_TOKEN }}
      FROM_EMAIL: ${{ secrets.FROM_EMAIL }}
      EMAIL_PROVIDER: ${{ secrets.EMAIL_PROVIDER }}

      # App Config
      BASE_URL: ${{ secrets.BASE_URL }}
      APP_NAME: ${{ secrets.APP_NAME }}
      APP_DESCRIPTION: ${{ secrets.APP_DESCRIPTION }}
      LOGO_URL: ${{ secrets.LOGO_URL }}
      MOCK_EMAIL: ${{ secrets.MOCK_EMAIL }}

      # Twilio (Optional)
      TWILIO_ACCOUNT_SID: ${{ secrets.TWILIO_ACCOUNT_SID }}
      TWILIO_AUTH_TOKEN: ${{ secrets.TWILIO_AUTH_TOKEN }}
      TWILIO_PHONE_NUMBER: ${{ secrets.TWILIO_PHONE_NUMBER }}

Final Steps

  1. Push the nuxthub.yml file to your repository
  2. The GitHub Action will automatically trigger and begin the deployment process
  3. Monitor the deployment progress in the Actions tab of your GitHub repository

Once the deployment is complete, your application will be live on Nuxthub with all the configured environment variables and settings in place.

Demo Apps

Supersaas comes with a few demo apps to help you get started.

PocketVue - Intro

PocketVue is a Vue + Nuxt Starter kit made with Pocketbase.