Configure CI/CD to deploy and preview app and pull requests

[andrepg]

First things first: we need an environment to deploy and display EruptionJS website, as noted by @raisiqueira here.

The first choice seems to be already made: using GitHub Pages to host a production website. We could use a GitHub Actions workflow - and I think that after we call build an environment directly from pull requests.

# Sample workflow for building and deploying an Astro site to GitHub Pages
#
# To get started with Astro see: https://docs.astro.build/en/getting-started/
#
name: Deploy Astro site to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

env:
  BUILD_PATH: "." # default value when not using subfolders
  # BUILD_PATH: subfolder

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Detect package manager
        id: detect-package-manager
        run: |
          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
            echo "manager=yarn" >> $GITHUB_OUTPUT
            echo "command=install" >> $GITHUB_OUTPUT
            echo "runner=yarn" >> $GITHUB_OUTPUT
            exit 0
          elif [ -f "${{ github.workspace }}/package.json" ]; then
            echo "manager=npm" >> $GITHUB_OUTPUT
            echo "command=ci" >> $GITHUB_OUTPUT
            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
            exit 0
          else
            echo "Unable to determine package manager"
            exit 1
          fi
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: "16"
          cache: ${{ steps.detect-package-manager.outputs.manager }}
          cache-dependency-path: ${{ env.BUILD_PATH }}/package-lock.json
      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v3
      - name: Install dependencies
        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
        working-directory: ${{ env.BUILD_PATH }}
      - name: Build with Astro
        run: |
          ${{ steps.detect-package-manager.outputs.runner }} astro build \
            --site "${{ steps.pages.outputs.origin }}" \
            --base "${{ steps.pages.outputs.base_path }}"
        working-directory: ${{ env.BUILD_PATH }}
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v2
        with:
          path: ${{ env.BUILD_PATH }}/dist

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    needs: build
    runs-on: ubuntu-latest
    name: Deploy
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

After that, we should be able to test if pull requests enable alternative workflows to that, or we can start to think another ways to publish tests environments.

[luigieai]

Please do not close this issue yet, as I will troubleshoot and properly test the pipeline that just been merged :)

[devmozao]

@luigieai yesterday @raisiqueira and I found something called github "act", which is a lib to test and emulate the github actions on your local development without relying on push/actions to see if things works as expected. Maybe that's a good start to test this out. What you think?

[luigieai]

For testing is a cool idea, we can try it out, but actually this will not resolve our actual issue, the real problem here is that we need to configure github pages for our website :)

about act, we can discuss and test it at our contributors chat at discord before implementing at our CONTRIBUING.md

[devmozao]

good point! also, we need to create a separate discort to EruptionJS itself. As it grows out and people want to contribute and see further discussions and pair programming, it's a better approach than concentrating all of that in my personal server. Will do ASAP.

[andrepg]

Well, that's sure a must-have link to put in our Homepage, maybe in top bar.

But once we have GH Pages online and Discord server configured, I can open the issue and make the change to the website.

I'm following this issue closely.

[luigieai]

Hey @andrepg I don't know if you know, but we have now a discord server, feel free to join if you wanna: https://discord.gg/DUdSABtY

@devmozao I totally forgot, we already setup ghub actions or still a TODO items for us?

[devmozao]

@luigieai not for this one. we do have for core.