feat: add pull request preview with graphql (#42)

On this PR;
- Create a docker-compose inside `.preview` that builds and runs a
environment.
- Add `pullpreview` CI action to deploy PR previews to AWS Lightsail. 
- Add rewrites inside the next configuration to enable the project to
contain a single entry point. This is going to be used only on the
preview envs.
- Add a start action on turbo that runs the start on the `graphql` and
`app` packages.

### About PullPreview service

The PR preview uses Lightsail from AWS in combination with
https://github.com/pullpreview/action does all the work of creating the
instance, pulling the code there, and running the
`.preview/docker-compose.yaml` They also assign a pretty URL using their
domain using [sslip](https://github.com/pullpreview/docker-sslip).

This `pullpreview` solution is going to be tested for the next couple of
days to evaluate if we are going to keep it or not. Leveraging the 30
days trial, they offer on the license.

.dockerignore

@@ -0,0 +1,5 @@
+node_modules
+.next
+.vercel
+.turbo
+dist

.github/workflows/pr-preview.yml

@@ -0,0 +1,35 @@
+name: Deploy preview
+
+on:
+  pull_request:
+    branches: [main]
+    types: [labeled, unlabeled, synchronize, closed, reopened]
+
+jobs:
+  deploy:
+    permissions:
+      contents: read
+      deployments: write
+      pull-requests: write
+      statuses: write
+    name: deploy
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Add pullpreview label
+        if: ${{ github.event.action == 'opened' || github.event.action == 'synchronize' }}
+        uses: KeisukeYamashita/attach-labels@v1
+        with:
+          labels: pullpreview
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: pullpreview/[email protected]
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          compose_files: .preview/docker-compose.yml
+        env:
+          AWS_ACCESS_KEY_ID: "${{ secrets.AWS_ACCESS_KEY_ID }}"
+          AWS_SECRET_ACCESS_KEY: "${{ secrets.AWS_SECRET_ACCESS_KEY }}"
+          AWS_REGION: "us-east-1"

.github/workflows/pr.yaml

@@ -2,7 +2,7 @@ name: "PR Checks"
 
 on:
   pull_request:
-    types: [opened, synchronize, edited, closed]
+    types: [opened, synchronize, edited]
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}

.preview/Dockerfile

@@ -0,0 +1,27 @@
+FROM node:20-slim AS base
+
+# Receive envs on build time
+ARG IS_PREVIEW
+ARG GRAPHQL_API
+ARG FUEL_PROVIDER_URL
+
+# Expose the args to the env of the container
+ENV IS_PREVIEW="${IS_PREVIEW}"
+ENV GRAPHQL_API="${GRAPHQL_API}"
+ENV FUEL_PROVIDER_URL="${FUEL_PROVIDER_URL}"
+
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+
+RUN corepack enable
+
+COPY . /preview
+
+WORKDIR /preview
+
+RUN pnpm install --frozen-lockfile
+RUN pnpm build:preview
+
+EXPOSE 3000
+
+CMD ["pnpm", "start"]

.preview/docker-compose.yml

@@ -0,0 +1,16 @@
+version: '3.9'
+
+services:
+  fuel-explorer:
+    platform: linux/amd64
+    container_name: fuel-explorer
+    build:
+      context: ../
+      dockerfile: ./.preview/Dockerfile
+      args:
+        IS_PREVIEW: true
+        GRAPHQL_API: http://localhost:4444/graphql
+        FUEL_PROVIDER_URL: http://beta-4.fuel.network/graphql
+    ports:
+      - '80:3000'
+      - '4000:4444'

package.json

@@ -26,10 +26,11 @@
     "clean:indexer": "pnpm --filter=indexer clean",
     "deploy:indexer": "pnpm --filter=indexer run deploy",
     "deps:update": "updates -gu && pnpm -r exec updates -gu",
-    "dev": "pnpm turbo:run dev --filter=!indexer",
+    "dev": "pnpm turbo:run --filter=!indexer dev",
     "dev:app": "pnpm --filter=app dev",
     "dev:graphql": "pnpm --filter=graphql dev",
     "dev:indexer": "pnpm --filter=indexer dev:indexer",
+    "start": "pnpm turbo:run --filter=!indexer start",
     "lint": "run-s lint:check prettier:check",
     "lint:check": "pnpm turbo:run lint",
     "node:clean": "make -C ./docker clean",

packages/app/next.config.mjs

@@ -12,6 +12,19 @@ const config = {
   eslint: {
     ignoreDuringBuilds: !!process.env.CI,
   },
+  rewrites: async () => {
+    // This is as proxy route to enable next.js
+    // to proxy requests to the graphql server on
+    // preview environment.
+    return process.env.IS_PREVIEW
+      ? [
+          {
+            source: '/graphql',
+            destination: process.env.GRAPHQL_API,
+          },
+        ]
+      : [];
+  },
   redirects: async () => {
     return [
       {

turbo.json

@@ -1,4 +1,6 @@
 {
+  "$schema": "https://turbo.build/schema.json",
+  "globalEnv": ["NODE_ENV", "IS_PREVIEW", "FUEL_PROVIDER_URL", "GRAPHQL_API"],
   "pipeline": {
     "build": {
       "outputs": ["dist/**", "build/**", ".next/**"],
@@ -25,6 +27,9 @@
     },
     "lint": {
       "cache": true
+    },
+    "start": {
+      "cache": false
     }
   }
 }