✨ Set up deployment #7 (#12)

* 🎨 more ops

* 🐛 fix code and more devops

* :art add variables

* 🐛 fix naming

* 🐛 fix branch

* 🐛 fix error

* 🎨 eslint workaround

* 🎨 missing project id secret

* 🐛 fix

* 🐛 fix typo

* 🎨 check

* 🎨 fix

* 🎨 trying something

* 🎨 enable corepack

* 🎨 tweak

* 🐛 fix

* 🎨 tweak

* 🎨 yupdate

* 🎨 cleanup

.github/workflows/DEV-web.yaml

@@ -24,6 +24,7 @@ jobs:
         with:
           imageName: ghcr.io/equinor/brandwalls/web-development
           datasetName: development
+          projectId: ${{ secrets.SANITY_PROJECT_ID }}
           githubToken: ${{ secrets.GITHUB_TOKEN }}
-          sanityApiToken: ${{ secrets.SANITY_API_TOKEN }}
-          environment: ${{ secrets.ENV }}
+          sanityApiReadToken: ${{ secrets.SANITY_API_READ_TOKEN }}
+          environment: development

.github/workflows/deploy-website/action.yaml

@@ -16,11 +16,11 @@ inputs:
   githubToken:
     description: 'GitHub token'
     required: true
-  sanityApiToken:
-    description: 'Sanity API token'
+  sanityApiReadToken:
+    description: 'Sanity API read token'
     required: true
   environment:
-    description: 'dev, preprod or prod'
+    description: 'development or production'
     required: true
 
 runs:
@@ -63,10 +63,10 @@ runs:
       id: build
       run: |
         docker build . \
-          --cache-from ${{ inputs.imageName }}:${{ env.IMAGE_TAG}} \
+          --cache-from ${{ inputs.imageName }}:${{ env.IMAGE_TAG }} \
           --build-arg ARG_SANITY_PROJECT_ID=${{ inputs.projectId }} \
           --build-arg ARG_SANITY_DATASET=${{ inputs.datasetName }} \
-          --build-arg ARG_SANITY_API_TOKEN=${{ inputs.sanityApiToken }} \
+          --build-arg ARG_SANITY_API_READ_TOKEN=${{ inputs.sanityApiReadToken }} \
           --build-arg ARG_ENV=${{ inputs.environment }} \
           --file web/Dockerfile \
           --tag ${{ inputs.imageName }}:${{ env.IMAGE_TAG }} \
@@ -92,7 +92,7 @@ runs:
           deploy
           --token-environment
           --component brandwalls-web
-          --image-tag-name brandwalls-web=${{ env.IMAGE_TAG}}
+          --image-tag-name brandwalls-web=${{ env.IMAGE_TAG }}
           --context playground
           -a brandwalls
           -e ${{ inputs.environment }}

.gitignore

@@ -18,6 +18,10 @@ coverage
 out/
 videos
 
+# studio
+.sanity/
+
+
 # production
 build
 dist

README.md

@@ -11,40 +11,3 @@ This is the main repository for Equinor Brandwalls. This version of the website
 The project is licensed under the [MIT license](https://github.com/equinor/energyvision/blob/main/LICENSE) following [the open source strategy of Equinor](https://opensource.equinor.com) and integrates elements from the [Equinor Design System](https://eds.equinor.com).
 
 This project uses [pnpm](https://pnpm.io) as main package manager. You can install pnpm using npm as shown below, or use one of the [alternative installation methods](https://pnpm.io/installation).
-
-```bash
-# Install pnpm
-npm i -g pnpm
-
-# Install all project dependencies
-pnpm setup-project
-```
-
-## Project overview
-
-This monorepo is organized into several folder. Please refer to README files inside each folder for more information.
-
-- `studio` - [Sanity](https://www.sanity.io/) powered content platform.
-- `web` - Web application using [Next.js](https://nextjs.org/) and React components.
-
-## Package managers
-
-This project uses the pnpm package manager. All commands should be run from root. There are filter aliases in the root `package.json` file that can be used to run commands in specific directories. For example:
-
-```bash
-# Install dependencies
-pnpm web install
-
-# Start the web in dev mode
-pnpm web dev
-
-# Add some package to the web folder
-pnpm web add <some-package>
-
-# Build Next.js
-pnpm web build
-```
-
-## Contributing
-
-If you want to report a bug, please create an issue in GitHub unless it is a security issue. If it is a security issue, please follow our Security Reporting Policy in SECURITY.md file.

package.json

@@ -21,5 +21,6 @@
     "lint-staged": "^15.3.0",
     "prettier-plugin-tailwindcss": "^0.6.9",
     "typescript": "5.7.2"
-  }
+  },
+  "packageManager": "[email protected]"
 }

web/.eslintrc.cjs

@@ -0,0 +1,27 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+    es2021: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/strict-type-checked',
+    'plugin:@typescript-eslint/stylistic-type-checked',
+    'next/core-web-vitals',
+    'prettier',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 12,
+    sourceType: 'module',
+  },
+  plugins: [],
+  rules: {
+    '@typescript-eslint/ban-ts-comment': ['error', { 'ts-ignore': 'allow-with-description' }],
+  },
+}

web/Dockerfile

@@ -8,16 +8,12 @@ FROM base AS deps
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
 
-ENV NODE_ENV production
-
 # Install dependencies based on the preferred package manager
 COPY package.json package-lock.json* pnpm-lock.yaml* .npmrc* ./
 COPY web/package.json web/pnpm-lock.yaml web/
 
 RUN \
-  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
-  elif [ -f package-lock.json ]; then npm ci; \
-  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
+  if [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm m i --frozen-lockfile; \
   else echo "Lockfile not found." && exit 1; \
   fi
 
@@ -29,43 +25,62 @@ COPY --from=deps /app/node_modules ./node_modules
 COPY --from=deps /app/web/node_modules ./web/node_modules
 COPY . .
 
+ARG ARG_SANITY_DATASET
+ARG ARG_SANITY_API_READ_TOKEN
+ARG ARG_SANITY_PROJECT_ID
+
+ENV SANITY_API_READ_TOKEN ${ARG_SANITY_API_READ_TOKEN}
+ENV NEXT_PUBLIC_SANITY_DATASET ${ARG_SANITY_DATASET}
+ENV NEXT_PUBLIC_SANITY_PROJECT_ID ${ARG_SANITY_PROJECT_ID}
+
 # Next.js collects completely anonymous telemetry data about general usage.
 # Learn more here: https://nextjs.org/telemetry
 # Uncomment the following line in case you want to disable telemetry during the build.
 ENV NEXT_TELEMETRY_DISABLED=1
 
-RUN \
-  if [ -f yarn.lock ]; then cd web && yarn run build; \
-  elif [ -f package-lock.json ]; then cd web && npm run build; \
-  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && cd web && pnpm run build; \
-  else echo "Lockfile not found." && exit 1; \
-  fi
+RUN corepack enable pnpm && cd web && pnpm build
 
 # Production image, copy all the files and run next
 FROM base AS runner
 WORKDIR /app
 
 ENV NODE_ENV=production
+
+ARG ARG_SANITY_DATASET
+ARG ARG_SANITY_API_READ_TOKEN
+ARG ARG_SANITY_PROJECT_ID
+
+ENV SANITY_API_READ_TOKEN ${ARG_SANITY_API_READ_TOKEN}
+ENV NEXT_PUBLIC_SANITY_DATASET ${ARG_SANITY_DATASET}
+ENV NEXT_PUBLIC_SANITY_PROJECT_ID ${ARG_SANITY_PROJECT_ID}
+
 # Uncomment the following line in case you want to disable telemetry during runtime.
 ENV NEXT_TELEMETRY_DISABLED=1
 
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 nextjs
+ENV USER nextjs
+ENV UID 1001
 
-COPY --from=builder /app/web/public ./public
+RUN addgroup -S "$USER"
+RUN adduser -S --uid "$UID" "$USER"
+RUN apk add --no-cache tini
+
+# Do we need this in next 15, everything is in app?
+# COPY --from=builder /app/web/public ./public
 
 # Automatically leverage output traces to reduce image size
 # https://nextjs.org/docs/advanced-features/output-file-tracing
-COPY --from=builder --chown=nextjs:nodejs /app/web/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/web/.next/standalone .
 COPY --from=builder --chown=nextjs:nodejs /app/web/.next/static ./.next/static
 
-USER nextjs
+USER "$UID"
 
 EXPOSE 3000
 
 ENV PORT=3000
 
 # server.js is created by next build from the standalone output
 # https://nextjs.org/docs/pages/api-reference/config/next-config-js/output
-ENV HOSTNAME="0.0.0.0"
+# ENV HOSTNAME="0.0.0.0"
+ENTRYPOINT ["/sbin/tini", "--"]
+
 CMD ["node", "server.js"]

web/components/slides/FullscreenImage.tsx

@@ -13,10 +13,14 @@ interface FullscreenImageProps {
 export default function FullscreenImage(props: FullscreenImageProps) {
   const { image, credit, text, contentXAlignment = 'left', contentYAlignment = 'center' } = props
 
+  const textOptions = {
+    contentXAlignment,
+    contentYAlignment,
+  }
   return (
     <div className="relative h-full w-full">
       <CoverImage image={image} />
-      {text && <TextBlock text={text} contentXAlignment={contentXAlignment} contentYAlignment={contentYAlignment} />}
+      {text && <TextBlock text={text} textOptions={textOptions} />}
       {credit && <p className={`absolute bottom-5 right-12 text-md font-medium`}>{credit}</p>}
     </div>
   )

web/components/slides/TextBlock.tsx

@@ -17,8 +17,6 @@ type TextBlockProps = {
 }
 
 export default function TextBlock({ text, textOptions }: TextBlockProps) {
-  const { textAlignment = 'left', contentXAlignment = 'left', contentYAlignment = 'center' } = textOptions!
-
   const xAlignment = {
     center: 'justify-center',
     right: 'justify-end',
@@ -36,12 +34,9 @@ export default function TextBlock({ text, textOptions }: TextBlockProps) {
     left: 'text-start',
   }
 
-  const x = xAlignment[contentXAlignment]
-  const y = yAlignment[contentYAlignment]
-
   return (
-    <div className={`flex h-full w-full max-w-prose text-balance p-12 ${contentXAlignment} ${contentYAlignment}`}>
-      {text && <Blocks value={text} className={`${textX[textAlignment]}`} />}
+    <div className={`justify-left flex h-full w-full max-w-prose items-center text-balance p-12`}>
+      {text && <Blocks value={text} className={`text-left`} />}
     </div>
   )
 }

web/next.config.ts

@@ -1,12 +1,12 @@
 import type { NextConfig } from 'next'
 
 const nextConfig: NextConfig = {
+  output: 'standalone',
   env: {
     // Matches the behavior of `sanity dev` which sets styled-components
     // to use the fastest way of inserting CSS rules in both dev and production.
     // It's default behavior is to disable it in dev mode.
     SC_DISABLE_SPEEDY: 'false',
-    output: 'standalone',
   },
 }
 

web/package.json

@@ -42,5 +42,6 @@
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
     "typescript": "5.7.2"
-  }
+  },
+  "packageManager": "[email protected]"
 }