feat: add explorer ui docker

.github/workflows/docker-ui-publish.yml

@@ -0,0 +1,50 @@
+name: Build and publish Docker UI image
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types: [opened, synchronize]
+  release:
+    types: [published]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  build-and-publish-ui-image:
+    runs-on: buildjet-4vcpu-ubuntu-2204
+    if: |
+      (github.event_name == 'release' && github.event.action == 'published') ||
+      github.ref == 'refs/heads/main' ||
+      (github.event_name == 'pull_request' &&
+      github.event.pull_request.head.repo.full_name == github.repository)
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Create .env file graphql
+        run: cp packages/graphql/.env.example packages/graphql/.env
+
+      - name: Create .env file explorer
+        run: cp packages/app-explorer/.env.example packages/app-explorer/.env
+
+      - name: Setup Node
+        uses: FuelLabs/github-actions/setups/node@master
+        with:
+          node-version: 20.11.0
+          pnpm-version: 8.9.2
+
+      - name: Build production UI
+        run: pnpm build:prod
+
+      - name: Build and push Fuel Explorer Graphql image of Explorer UI
+        uses: ./.github/actions/docker-publish
+        id: publish
+        with:
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+          image: ghcr.io/fuellabs/fuel-ui-explorer
+          dockerfile: deployment/ui/Dockerfile
+          context: ./

deployment/ui/Dockerfile

@@ -0,0 +1,30 @@
+# This image contains the graphql server
+# built for the fuel-explorer
+FROM node:20-slim AS base
+
+# Expose the ENVs to the env of the container
+ENV PORT=3000
+ENV FUEL_PROVIDER="${FUEL_PROVIDER:-https://testnet.fuel.network/v1/graphql}"
+ENV SERVER_BUILD=true
+ENV NEXT_PUBLIC_ETH_CHAIN_NAME="sepolia"
+ENV NEXT_PUBLIC_FUEL_CHAIN_NAME="fuelLocal"
+ENV NEXT_PUBLIC_FUEL_VERSION="0.26.0"
+ENV NEXT_PUBLIC_IS_PUBLIC_PREVIEW=false
+ENV NEXT_PUBLIC_WALLET_INSTALL="https://chrome.google.com/webstore/detail/fuel-wallet/dldjpboieedgcmpkchcjcbijingjcgok"
+ENV NEXT_PUBLIC_WALLET_INSTALL_NEXT="https://next-wallet.fuel.network/docs/install/#install-from-source-code"
+
+# Install dependencies for the entire monorepo
+COPY ./packages/app-explorer/.next /app/.next
+COPY ./packages/app-explorer/public /app/public
+COPY ./deployment/ui/package.json /app/package.json
+WORKDIR /app
+
+# Install dependencies for the entire monorepo
+RUN npm install
+
+# Expose the specified port
+EXPOSE ${PORT}
+
+# Start GraphQL server
+WORKDIR /app
+CMD ["npm", "run", "start"]

deployment/ui/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "14.2.3"
+  }
+}

package.json

@@ -22,6 +22,7 @@
     "docker/erc20-deployer/deployer"
   ],
   "scripts": {
+    "build:prod": "pnpm turbo:run build:prod",
     "build:preview": "pnpm turbo:run build:preview",
     "build:lib": "pnpm turbo:run build:lib",
     "deps:update": "updates -gu && pnpm -r exec updates -gu",

packages/app-commons/src/chains/fuel.ts

@@ -13,7 +13,7 @@ const fuelLocal: FuelChain = {
   network: 'fuel_local',
   name: 'Fuel Local',
   testnet: true,
-  providerUrl: 'http://localhost:4000/v1/graphql',
+  providerUrl: process.env.FUEL_PROVIDER || 'http://localhost:4000/v1/graphql',
 };
 
 const fuelTestnet: FuelChain = {

packages/app-explorer/package.json

@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "build": "next build",
+    "build:prod": "next build",
     "build:storybook": "./scripts/build-storybook.sh",
-    "build:preview": "run-s build:storybook build",
+    "build:preview": "run-s build:storybook build:prod",
     "dev": "next dev -p 3001",
     "dev:storybook": "storybook dev -p 6007",
     "start": "next start",

packages/app-explorer/src/systems/Core/utils/sdk.ts

@@ -2,7 +2,7 @@ import { resolve } from 'node:url';
 import { getSdk } from '@fuel-explorer/graphql/src/sdk';
 import { GraphQLClient } from 'graphql-request';
 
-const { FUEL_EXPLORER_API, FUEL_EXPLORER_API_KEY } = process.env;
+const { FUEL_EXPLORER_API, FUEL_EXPLORER_API_KEY, PORT } = process.env;
 const VERCEL_URL = process.env.VERCEL_URL || process.env.NEXT_PUBLIC_VERCEL_URL;
 const VERCEL_ENV =
   process.env.VERCEL_ENV || process.env.NEXT_PUBLIC_VERCEL_ENV || 'development';
@@ -11,7 +11,7 @@ const getBaseUrl = () => {
   if (FUEL_EXPLORER_API && FUEL_EXPLORER_API_KEY) return FUEL_EXPLORER_API;
   if (VERCEL_ENV !== 'development')
     return resolve(`https://${VERCEL_URL}`, '/api/graphql');
-  return 'http://localhost:3001/api/graphql';
+  return `http://localhost:${PORT}/api/graphql`;
 };
 const getHeaders = () => {
   if (FUEL_EXPLORER_API_KEY) {

turbo.json

@@ -21,6 +21,11 @@
       "dependsOn": ["^build:lib", "^ts:check"],
       "cache": false
     },
+    "build:prod": {
+      "outputs": [".next/**"],
+      "dependsOn": ["^build:lib", "^ts:check"],
+      "cache": false
+    },
     "test": {
       "outputs": ["**/**/report.json", "coverage/**"],
       "dependsOn": [],