diff --git a/docs/content/0.index.yml b/docs/content/0.index.yml index a49df931..fe047e57 100644 --- a/docs/content/0.index.yml +++ b/docs/content/0.index.yml @@ -10,8 +10,8 @@ hero: light: '/images/landing/hero-light.svg' dark: '/images/landing/hero-dark.svg' headline: - label: "Cloudflare Access integration" - to: /changelog/cloudflare-access + label: "NuxtHub Github App & Action" + to: /changelog/github-app-and-action icon: i-lucide-arrow-right features: - name: Cloud Hosting diff --git a/docs/content/1.docs/1.getting-started/3.deploy.md b/docs/content/1.docs/1.getting-started/3.deploy.md index c4c93fc5..46a7362e 100644 --- a/docs/content/1.docs/1.getting-started/3.deploy.md +++ b/docs/content/1.docs/1.getting-started/3.deploy.md @@ -43,10 +43,6 @@ Toggle between production and preview environments in the NuxtHub admin using th ## NuxtHub CLI -::important -If you do your first deployment with the NuxtHub CLI, you won't be able to attach your GitHub/GitLab repository later on due to a Cloudflare limitation, but you can use the [Github action](#github-action) to deploy on commit. -:: - Deploy your local project with a single command: ```bash [Terminal] @@ -71,76 +67,178 @@ The command will: You can also install the [NuxtHub CLI](https://github.com/nuxt-hub/cli) globally with: `npm i -g nuxthub`. :: -### GitHub Action +## GitHub Action + +After linking a GitHub repository to your project, NuxtHub automatically adds a GitHub Actions workflow to automatically deploy your application on every commit using the [NuxtHub GitHub Action](https://github.com/marketplace/actions/deploy-to-nuxthub). + +NuxtHub integrates with [GitHub deployments](https://docs.github.com/en/actions/managing-workflow-runs-and-deployments/managing-deployments). This allows you to: +- [View deployment statuses within GitHub](https://docs.github.com/en/actions/managing-workflow-runs-and-deployments/managing-deployments/viewing-deployment-history) +- [Setup deployment concurrency](https://docs.github.com/en/actions/use-cases-and-examples/deploying/deploying-with-github-actions#using-concurrency) +- [Require approvals for deploying to environments](https://docs.github.com/en/actions/managing-workflow-runs-and-deployments/managing-deployments/reviewing-deployments) -To deploy your project with a GitHub Action, you can use the following workflow: +After deploying from a pull request, NuxtHub automatically adds a comment with information about the deployment. + +:nuxt-img{src="/images/docs/nuxthub-github-app-pr-comment.png" alt="NuxtHUb GitHub Action commenting on pull requests" width="926" height="520"} + +::tip +You can customise the workflow to tailor to any specific custom DevOps requirements. +:: -```yaml [.github/workflows/deploy.yml] -name: Deploy with NuxtHub CLI +::note{to="#linking-a-repository-to-existing-projects"} +Projects created prior to releasing our GitHub Action uses Pages CI for deployments. Read our [migration guide](#linking-a-repository-to-existing-projects). +:: + +### Default workflow + +The GitHub Workflow added to your repository is automatically tailored to your project's package manager. This is an example of a workflow added for a project using pnpm. + +Currently, the supported package managers + +```yaml [.github/workflows/nuxthub.yml] +name: Deploy to NuxtHub on: push + jobs: - build-and-deploy: + 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: - - name: Checkout - uses: actions/checkout@v4 - - uses: pnpm/action-setup@v4 - name: Install pnpm + - uses: actions/checkout@v4 + + - name: Install pnpm + uses: pnpm/action-setup@v4 with: - run_install: false + version: 9 + - name: Install Node.js uses: actions/setup-node@v4 with: - node-version: 20 + node-version: 22 cache: 'pnpm' - - name: Get pnpm store directory - shell: bash - run: | - echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV - - uses: actions/cache@v4 - name: Setup pnpm cache - with: - path: ${{ env.STORE_PATH }} - key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} - restore-keys: | - ${{ runner.os }}-pnpm-store- + - name: Install dependencies run: pnpm install - - name: Deploy with nuxthub - run: npx nuxthub deploy - env: - NUXT_HUB_PROJECT_KEY: ${{ secrets.NUXT_HUB_PROJECT_KEY}} - NUXT_HUB_USER_TOKEN: ${{ secrets.NUXT_HUB_USER_TOKEN }} + - name: Build application + run: pnpm run build + + - name: Deploy to NuxtHub + uses: nuxt-hub/action@v1 + id: deploy ``` -You need to add the following secrets to your GitHub repository: -- `NUXT_HUB_PROJECT_KEY`: Your project key (available in your project settings in the NuxtHub Admin or in your `.env` file if you ran `npx nuxthub link`) -- `NUXT_HUB_USER_TOKEN`: Your user token available in **User settings** → **Tokens** in the NuxtHub Admin +### Options -::tip -We recommend to create a new user token for the Github CI so you can revoke it at any time or add an expiration date. +#### Inputs + +The following input parameters can be provided to the GitHub Action. Learn more about [Workflow syntax for GitHub Actions](https://docs.github.com/en/actions/writing-workflows/workflow-syntax-for-github-actions#jobsjob_idstepswith) on GitHub's documentation. + +::field-group + ::field{name="directory" type="string" default="dist"} + The directory of the built Nuxt application. Defaults to `dist`. + :: + + ::field{name="project-key" type="string"} + The project key of the NuxtHub project to deploy to. If the repository is linked to more than one project, project key is required. + :: :: +#### Outputs + +The GitHub Action provides the following outputs that you can use in subsequent workflow steps. + + +::field-group + ::field{name="environment" type="'production' | 'preview'"} + The environment of the deployment (e.g. production, preview). + :: + + ::field{name="deployment-url" type="string"} + The URL of the deployment. For preview environments, it links to the deployment of the commit. + + Examples: + - https://example.nuxt.dev (main) + - https://abcdefg.example.pages.dev (feat/example) + :: + + ::field{name="branch-url" type="string"} + The permanent URL for the current branch deployment. + + Examples: + - https://example.nuxt.dev (main) + - https://feat-example.example.pages.dev (feat/example) + :: +:: + +### Environment Variables & Secrets + +NuxtHub automatically copies all your project's environment variables to your GitHub repository actions environment variables. + +When encrypting an environment variable in the NuxtHub Admin, a GitHub actions secret will be created in your repository + +In order to use the GitHub Actions secret, you need to update the GitHub Actions workflow to use the secret as environment variable: + +```diff [.github/workflows/nuxthub.yml] + - name: Build application + run: pnpm run build ++ env: ++ NUXT_UI_PRO_LICENSE: ${{ secrets.NUXT_UI_PRO_LICENSE }} +``` + ::note -This GitHub action uses pnpm to install dependencies. If you are using npm or yarn, we recommend you to adapt the action to your needs. +This is mostly useful for build-time environment variables. :: -## Cloudflare Pages CI +### Setup + +#### Creating a new project + +When creating a new project from a template, or importing a Git repository, the GitHub Action workflow will automatically be set up for you. + +#### Linking a repository to existing projects + +Link your project to a GitHub repository within [NuxtHub Admin](https://admin.hub.nuxt.com/) → Project → Settings → Git. ::warning -You should never create the project on Cloudflare Pages as NuxtHub will create it for you. +Only non-secret environment variables are automatically copied to GitHub. Existing environment secrets are not automatically migrated to GitHub, and should be updated to sync them to GitHub. :: -It is possible to use [Cloudflare Pages CI](https://pages.cloudflare.com) to deploy your project by connecting your GitHub or GitLab account. Once your repository is connected, each commit will trigger a new deployment. +#### Monorepo setup -1. Open the [NuxtHub Admin](https://admin.hub.nuxt.com) -2. Click on `New Project` then `Import a GitHub repository` -3. Select your Github repository -4. Click on `Import repository` +Our GitHub integration supports deploying multiple applications from the same repository. -::tip -That's it! NuxtHub will automatically configure the necessary resources and environment variables for you start a deployment on Cloudflare. +When linking a Git repository, set "project root directory" to the base folder of your Nuxt application corresponding to that NuxtHub project. + +When a repository is already linked to at least one project, additional projects linked will have the generated GitHub Actions workflow named `nuxthub-.yml`. + +::note +When multiple projects are linked to the same repository, the [`project-key`](#inputs) input parameter must be specified on each [Deploy to NuxtHub GitHub Action](https://github.com/marketplace/actions/deploy-to-nuxthub). +:: + +**Current limitations** + +- Separate applications should be deployed using different workflow jobs. + +## Cloudflare Pages CI + +Importing an existing Cloudflare Pages project that is already linked to a Git repository will use [Cloudflare Pages CI](https://pages.cloudflare.com) to deploy your project. + +- Each commit will trigger a new deployment within Pages CI. +- Environment variables set within NuxtHub Admin will be available during CI. + +::note +All existing projects with a Git repository linked to Cloudflare Pages prior to our GitHub Action being released uses [Cloudflare Pages CI](https://pages.cloudflare.com) for automated deployments. +:: + +::tip{to="#migrating-to-from-pages-ci"} +You can migrate from Cloudflare Pages CI to [GitHub Actions](#github-action) at any time. Read our [migration guide](#linking-a-repository-to-existing-projects). :: ## Self-hosted diff --git a/docs/content/4.changelog/github-app-and-action.md b/docs/content/4.changelog/github-app-and-action.md new file mode 100644 index 00000000..f31477fb --- /dev/null +++ b/docs/content/4.changelog/github-app-and-action.md @@ -0,0 +1,68 @@ +--- +title: NuxtHub GitHub App & Action +description: "Introducing our GitHub App & Action for automating your Nuxt deployments with GitHub as well as a new project creation flow." +date: 2024-12-23 +image: '/images/changelog/nuxthub-github-app-action.png' +authors: + - name: Rihan Arfan + avatar: + src: https://avatars.githubusercontent.com/u/20425781?v=4 + to: https://bsky.app/profile/rihan.dev + username: RihanArfan + - name: Sebastien Chopin + avatar: + src: https://avatars.githubusercontent.com/u/904724?v=4 + to: https://bsky.app/profile/atinux.com + username: atinux +--- + +We're thrilled to release our brand new [GitHub Application](https://github.com/apps/nuxthub-admin) & [GitHub Action](https://github.com/marketplace/actions/deploy-to-nuxthub) to help you create and deploy Nuxt applications to NuxtHub. + + +## Pull Request Integration + +Once setup, NuxtHub will automatically comment on pull requests with branch URLs, permalinks and QR codes for easy preview access. + +:nuxt-img{src="/images/changelog/nuxthub-github-app-action.png" alt="GitHub Action" width="926" height="520"} + +## GitHub Deployments + +NuxtHub also integrates with GitHub's deployment system, including status updates and environment tracking. + +:nuxt-img{src="/images/changelog/nuxthub-github-action-deployment.png" alt="NuxtHub GitHub Action deployments" width="926" height="521"} + +This includes GitHub Deployments support in pull requests. + +:nuxt-img{src="/images/changelog/nuxthub-github-action-deployment-pr.png" alt="NuxtHub GitHub Action deployments" width="926" height="219"} + +And many more: +- **Deployment Protection**: Support for GitHub's deployment protection rules which enable approval workflows and environment restrictions ([learn more on GitHub's documentation](https://docs.github.com/en/actions/managing-workflow-runs-and-deployments/managing-deployments/managing-environments-for-deployment#deployment-protection-rules)) +- **Secure**: Our GitHub integration prevents the need for long-lived secrets as it uses OIDC under the hood +- **Customizable**: You can create tailored workflows to fit your DevOps requirements using our GitHub Action + +## Cloning a Template + +Thanks to the new GitHub App, you can now clone a template from NuxtHub Admin and deploy it with a single click. + +:nuxt-img{src="/images/changelog/nuxthub-github-app-clone-template.png" alt="NuxtHub GitHub App clone template" width="2596" height="1460"} + +::note +The repository will be created in your GitHub account with the GitHub Actions workflow already configured. +:: + +## Migrating to GitHub Actions + +Migrating from Cloudflare Pages CI or the legacy GitHub Action is simple and can be done from [NuxtHub Admin](https://admin.hub.nuxt.com/) → Project → Settings → Git. + + + +When migrating from Cloudflare Pages CI, please note: + +- Deployment quotas will shift from [Pages CI limits](https://developers.cloudflare.com/pages/platform/limits/#builds) to your [GitHub Actions usage](https://docs.github.com/en/billing/managing-billing-for-your-products/managing-billing-for-github-actions/about-billing-for-github-actions#included-storage-and-minutes) +- Environment variables and secrets needed at build time should be managed through [GitHub Environment settings](https://docs.github.com/en/actions/writing-workflows/choosing-what-your-workflow-does/store-information-in-variables#creating-configuration-variables-for-an-environment) (we are working on a way to synchronize them automatically) + +::callout{to="/docs/getting-started/deploy#github-action" icon="i-lucide-book"} +Learn more about deploying with GitHub Actions to NuxtHub. +:: + +P.S. Give our new [GitHub Action](https://github.com/nuxt-hub/action) a star 🌟💚 diff --git a/docs/public/images/changelog/github-action-deployment-2.png b/docs/public/images/changelog/github-action-deployment-2.png new file mode 100644 index 00000000..056008ce Binary files /dev/null and b/docs/public/images/changelog/github-action-deployment-2.png differ diff --git a/docs/public/images/changelog/nuxthub-github-action-deployment-pr.png b/docs/public/images/changelog/nuxthub-github-action-deployment-pr.png new file mode 100644 index 00000000..240b72e7 Binary files /dev/null and b/docs/public/images/changelog/nuxthub-github-action-deployment-pr.png differ diff --git a/docs/public/images/changelog/nuxthub-github-action-deployment.png b/docs/public/images/changelog/nuxthub-github-action-deployment.png new file mode 100644 index 00000000..d3697669 Binary files /dev/null and b/docs/public/images/changelog/nuxthub-github-action-deployment.png differ diff --git a/docs/public/images/changelog/nuxthub-github-app-action.png b/docs/public/images/changelog/nuxthub-github-app-action.png new file mode 100644 index 00000000..9afa4e7b Binary files /dev/null and b/docs/public/images/changelog/nuxthub-github-app-action.png differ diff --git a/docs/public/images/changelog/nuxthub-github-app-clone-template.png b/docs/public/images/changelog/nuxthub-github-app-clone-template.png new file mode 100644 index 00000000..1b9eed25 Binary files /dev/null and b/docs/public/images/changelog/nuxthub-github-app-clone-template.png differ diff --git a/docs/public/images/docs/nuxthub-github-app-pr-comment.png b/docs/public/images/docs/nuxthub-github-app-pr-comment.png new file mode 100644 index 00000000..9afa4e7b Binary files /dev/null and b/docs/public/images/docs/nuxthub-github-app-pr-comment.png differ