feat web dockerfile ci cd

.github/workflows/publish-prod-web.yml

@@ -0,0 +1,59 @@
+name: Publish Web app to Production
+
+on:
+  push:
+    tags:
+      - '**@impler/web@**'
+  workflow_dispatch:
+
+jobs:
+  publish_prod_widget:
+    if: "!contains(github.event.head_commit.message, 'ci skip')"
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+    timeout-minutes: 80
+    environment: Production
+    permissions:
+      contents: read
+      packages: write
+      deployments: write
+    steps:
+      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+      - uses: actions/checkout@v2
+      - name: Setup kernel for react native, increase watchers
+        run: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
+
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '18.13.0'
+
+      - name: Cache pnpm modules
+        uses: actions/cache@v2
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-
+
+      - uses: pnpm/[email protected]
+        with:
+          version: 7.9.4
+          run_install: true
+
+      - name: Build, tag, and push image to Github container registry
+        id: build-image
+        env:
+          REGISTERY_OWNER: knovator
+          DOCKER_NAME: impler/web
+          IMAGE_TAG: ${{ github.sha }}
+          GH_ACTOR: knovator
+          GH_PASSWORD: ${{ secrets.GH_PACKAGES }}
+        run: |
+          echo $GH_PASSWORD | docker login ghcr.io -u $GH_ACTOR --password-stdin 
+          docker build -t ghcr.io/$REGISTERY_OWNER/$DOCKER_NAME:$IMAGE_TAG -f apps/web/Dockerfile .
+          docker tag ghcr.io/$REGISTERY_OWNER/$DOCKER_NAME:$IMAGE_TAG ghcr.io/$REGISTERY_OWNER/$DOCKER_NAME:prod
+          docker tag ghcr.io/$REGISTERY_OWNER/$DOCKER_NAME:$IMAGE_TAG ghcr.io/$REGISTERY_OWNER/$DOCKER_NAME:latest
+          docker push ghcr.io/$REGISTERY_OWNER/$DOCKER_NAME:prod
+          docker push ghcr.io/$REGISTERY_OWNER/$DOCKER_NAME:latest
+          docker push ghcr.io/$REGISTERY_OWNER/$DOCKER_NAME:$IMAGE_TAG
+          echo "::set-output name=IMAGE::ghcr.io/$REGISTERY_OWNER/$DOCKER_NAME:$IMAGE_TAG"

.github/workflows/tag-images.yml

@@ -81,3 +81,14 @@ jobs:
           docker tag ghcr.io/$REGISTERY_OWNER/$DOCKER_NAME:prod ghcr.io/$REGISTERY_OWNER/$DOCKER_NAME:$DOCKER_VERSION
           docker push ghcr.io/$REGISTERY_OWNER/$DOCKER_NAME:$DOCKER_VERSION
           echo "::set-output name=IMAGE::ghcr.io/$REGISTERY_OWNER/$DOCKER_NAME:$DOCKER_VERSION"
+
+      - name: Tag Web
+        env:
+          REGISTERY_OWNER: knovator
+          DOCKER_NAME: impler/web
+          DOCKER_VERSION: ${{ inputs.version }}
+        run: |
+          docker pull ghcr.io/$REGISTERY_OWNER/$DOCKER_NAME:prod
+          docker tag ghcr.io/$REGISTERY_OWNER/$DOCKER_NAME:prod ghcr.io/$REGISTERY_OWNER/$DOCKER_NAME:$DOCKER_VERSION
+          docker push ghcr.io/$REGISTERY_OWNER/$DOCKER_NAME:$DOCKER_VERSION
+          echo "::set-output name=IMAGE::ghcr.io/$REGISTERY_OWNER/$DOCKER_NAME:$DOCKER_VERSION"

apps/web/.example.env

@@ -1,4 +1,3 @@
 NEXT_PUBLIC_API_BASE_URL=http://localhost:3000
-DOCUMENTATION_REACT_PROPS_URL=https://docs.impler.io/widget/react-component#props
 NEXT_PUBLIC_EMBED_URL=http://localhost:4701/embed.umd.min.js
 NEXT_PUBLIC_AMPLITUDE_ID=

apps/web/Dockerfile

@@ -0,0 +1,29 @@
+FROM node:18.13.0-slim
+
+WORKDIR /usr/src/app
+
+RUN npm install -g [email protected]
+
+COPY .npmrc .
+COPY package.json .
+
+COPY apps/web ./apps/web
+COPY apps/web/.example.env ./apps/web/.env
+COPY libs/shared ./libs/shared
+
+COPY tsconfig.json .
+COPY tsconfig.base.json .
+
+COPY .eslintrc.js .
+COPY .prettierrc .
+COPY .prettierignore .
+COPY nx.json .
+COPY pnpm-workspace.yaml .
+COPY pnpm-lock.yaml .
+
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN pnpm install
+RUN pnpm build
+
+CMD [ "pnpm", "start:static:web" ]

apps/web/components/imports/Snippet.tsx

@@ -38,7 +38,7 @@ export function Snippet({ projectId, templateId }: SnippetProps) {
         \n<Button projectId="${projectId}" templateId="${templateId}">\nImport\n</Button>`}</Prism>
         <Text style={{ lineHeight: '1.5rem', color: colors.TXTSecondaryDark }}>
           You can get to know about props on{' '}
-          <a href={process.env.DOCUMENTATION_REACT_PROPS_URL} target="_blank" rel="noreferrer">
+          <a href={CONSTANTS.REACT_DOCUMENTATION_URL} target="_blank" rel="noreferrer">
             documentation
           </a>
           .

apps/web/config/constants.config.ts

@@ -4,6 +4,7 @@ export const CONSTANTS = {
   AUTHENTICATION_ERROR_CODE: 'AuthenticationError',
   PROFILE_STORAGE_NAME: 'profile',
   EMBED_URL: 'https://embed.impler.io/embed.umd.min.js',
+  REACT_DOCUMENTATION_URL: 'https://docs.impler.io/widget/react-component#props',
 };
 
 export const VARIABLES = {

apps/web/env.sh

@@ -0,0 +1,25 @@
+#!/bin/bash
+
+# Recreate config file
+rm -rf ./.env.production
+touch ./.env.production
+
+# Read each line in .env file
+# Each line represents key=value pairs
+while read -r line || [[ -n "$line" ]];
+do
+  # Split env variables by character `=`
+  if printf '%s\n' "$line" | grep -q -e '='; then
+    varname=$(printf '%s\n' "$line" | sed -e 's/=.*//')
+    varvalue=$(printf '%s\n' "$line" | sed -e 's/^[^=]*=//')
+  fi
+
+  # Read value of current variable if exists as Environment variable
+  value=$(printf '%s\n' "${!varname}")
+  # Otherwise use value from .env file
+  [[ -z $value ]] && value=${varvalue}
+
+  # Append configuration property to JS file
+  echo "$varname=$value" >> ./.env.production
+done < .env
+

apps/web/package.json

@@ -8,17 +8,17 @@
     "start": "next dev -p 4200",
     "dev": "next dev -p 4200",
     "build": "next build",
-    "start:static:build": " next start -p 4200",
     "lint": "next lint",
     "prebuild": "rimraf .next",
     "storybook": "start-storybook -p 6006",
+    "start:static:build": "pnpm envsetup:docker && next start -p 4200",
+    "envsetup:docker": "chmod +x ./env.sh && ./env.sh",
     "build-storybook": "build-storybook"
   },
   "dependencies": {
     "@amplitude/analytics-browser": "^1.10.3",
     "@emotion/react": "^11.10.5",
     "@emotion/server": "^11.10.0",
-    "@impler/client": "workspace:^0.1.15",
     "@impler/shared": "workspace:^0.1.15",
     "@mantine/carousel": "6.0.6",
     "@mantine/core": "6.0.6",

apps/web/types/global.d.ts

@@ -4,7 +4,6 @@
 namespace NodeJS {
   interface ProcessEnv {
     NEXT_PUBLIC_API_BASE_URL: string;
-    DOCUMENTATION_REACT_PROPS_URL: string;
     NEXT_PUBLIC_EMBED_URL: string;
     NEXT_PUBLIC_AMPLITUDE_ID: string;
   }

docker/.env.example

@@ -23,4 +23,5 @@ WIDGET_EMBED_PATH=http://localhost:4701/embed.umd.min.js
 
 # Analytics
 SENTRY_DSN=
-AMPLITUDE_ID=
+WIDGET_AMPLITUDE_ID=
+WEB_AMPLITUDE_ID=

docker/docker-compose.yml

@@ -67,9 +67,18 @@ services:
     image: "ghcr.io/knovator/impler/embed:0.1.15"
     container_name: embed
     environment:
-      WIDGET_URL: ${WIDGET_URL}
+      WIDGET_URL: ${WIDGET_AMPLITUDE_ID}
     ports:
       - 4701:4701
+  web:
+    depends_on:
+      - api
+    image: "ghcr.io/knovator/impler/web:0.1.15"
+    container_name: web
+    environment:
+      NEXT_PUBLIC_API_BASE_URL: ${API_ROOT_URL}
+      NEXT_PUBLIC_EMBED_URL: ${WIDGET_EMBED_PATH}
+      NEXT_PUBLIC_AMPLITUDE_ID: ${WEB_AMPLITUDE_ID}
   rabbitmq:
     image: rabbitmq:3-alpine
     container_name: 'rabbitmq'

package.json

@@ -34,6 +34,7 @@
     "docker:build:widget": "docker build -t widget -f apps/widget/Dockerfile .",
     "docker:build:queue-manager": "docker build -t queue-manager -f apps/queue-manager/Dockerfile .",
     "docker:build:demo": "docker build -t demo -f apps/demo/Dockerfile .",
+    "docker:build:web": "docker build -t web -f apps/web/Dockerfile .",
     "start:static:widget": "cross-env nx start:static:build @impler/widget",
     "start:static:demo": "cross-env nx start:static:build @impler/demo",
     "start:static:web": "cross-env nx start:static:build @impler/web",