Skip to content

Commit b8b5fac

Browse files
author
roshni73
committed
chore(web-app-serve):add docker configuration
1 parent 9a6c917 commit b8b5fac

7 files changed

Lines changed: 185 additions & 160 deletions

File tree

‎.github/workflows/publish-web-app-serve.yml‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
name: Publish web app serve
2+
3+
on:
4+
workflow_dispatch:
5+
push:
6+
branches:
7+
- develop
8+
- web-serve-session-1/roshni
9+
10+
permissions:
11+
packages: write
12+
13+
jobs:
14+
publish_image:
15+
name: Publish Docker Image
16+
runs-on: ubuntu-latest
17+
steps:
18+
- uses: actions/checkout@v4
19+
with:
20+
submodules: true
21+
22+
- name: Publish web-app-serve
23+
uses: toggle-corp/web-app-serve-action@v0.1.1
24+
with:
25+
github_token: ${{ secrets.GITHUB_TOKEN }}

‎.github/workflows/web-app-serve/docker-compose.yml‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# NOTE: The name should is mandatory and should be unique
2+
name: togglecorp-timur-test
3+
4+
services:
5+
web-app-serve:
6+
build:
7+
context: ../
8+
target: web-app-serve
9+
environment:
10+
# web-app-serve config
11+
APPLY_CONFIG__ENABLE_DEBUG: true
12+
# NOTE: See "Dockerfile" to get dynamic env variables for .env file
13+
env_file: .env
14+
ports:
15+
- '8050:80'

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.env
22
.vite/
33

4+
**.env
45
# Tooling
56
node_modules/
67
.eslintcache

‎Dockerfile‎

Lines changed: 51 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,53 @@
11
# -------------------------- Dev ---------------------------------------
22

3-
FROM node:18-bullseye AS dev
4-
5-
RUN apt-get update -y \
6-
&& apt-get install -y --no-install-recommends git \
7-
&& rm -rf /var/lib/apt/lists/* \
8-
# NOTE: yarn > 1.22.19 breaks yarn-install invoked by pnpm
9-
&& npm install -g pnpm@8.6.0 yarn@1.22.19 --force \
10-
&& git config --global --add safe.directory /code
11-
12-
WORKDIR /code
13-
14-
# -------------------------- Nginx - Builder --------------------------------
15-
FROM dev AS nginx-build
16-
17-
COPY ./package.json ./pnpm-lock.yaml /code/
18-
19-
RUN pnpm install
20-
21-
COPY . /code/
22-
23-
# Build variables (Requires backend pulled)
24-
ENV APP_GRAPHQL_CODEGEN_ENDPOINT=./backend/schema.graphql
25-
26-
RUN pnpm generate:type && pnpm build
3+
FROM node:18-bullseye AS dev
4+
5+
RUN apt-get update -y \
6+
&& apt-get install -y --no-install-recommends git \
7+
&& rm -rf /var/lib/apt/lists/* \
8+
# NOTE: yarn > 1.22.19 breaks yarn-install invoked by pnpm
9+
&& npm install -g pnpm@8.6.0 yarn@1.22.19 --force \
10+
&& git config --global --add safe.directory /code
11+
12+
WORKDIR /code
13+
14+
# -------------------------- Nginx - Builder --------------------------------
15+
FROM dev AS web-app-serve-build
16+
17+
COPY ./package.json ./pnpm-lock.yaml /code/
18+
19+
RUN pnpm install
20+
21+
COPY . /code/
22+
23+
# NOTE: Dynamic env variables
24+
# These env variables can be dynamically defined in web-app-serve container runtime.
25+
# These variables are not included in the build files but the values should still be valid.
26+
# See "schema" field in "./env.ts"
27+
ENV APP_TITLE=timur
28+
ENV APP_GRAPHQL_DOMAIN=http://localhost:8100/graphql
29+
ENV APP_ENVIRONMENT=production
30+
ENV APP_SENTRY_DSN=hello
31+
32+
# NOTE: WEB_APP_SERVE_ENABLED=true will skip defining the above dynamic env variables
33+
# See "overrideDefine" field in "./env.ts"
34+
ENV APP_UMAMI_SRC=WEB_APP_SERVE_PLACEHOLDER__APP_UMAMI_SRC
35+
ENV APP_UMAMI_ID=WEB_APP_SERVE_PLACEHOLDER__APP_UMAMI_ID
36+
37+
# NOTE: Static env variables:
38+
# These env variables are used during build
39+
ENV APP_GRAPHQL_CODEGEN_ENDPOINT=./backend/schema.graphql
40+
41+
RUN pnpm generate:type && WEB_APP_SERVE_ENABLED=true pnpm build
42+
43+
# ---------------------------------------------------------------------
44+
# Final image using web-app-serve
45+
FROM ghcr.io/toggle-corp/web-app-serve:v0.1.2 AS web-app-serve
46+
47+
LABEL org.opencontainers.image.source="https://github.com/toggle-corp/web-app-serve"
48+
LABEL org.opencontainers.image.authors="dev@togglecorp.com"
49+
50+
# Env for apply-config script
51+
ENV APPLY_CONFIG__SOURCE_DIRECTORY=/code/build/
52+
53+
COPY --from=web-app-serve-build /code/build "$APPLY_CONFIG__SOURCE_DIRECTORY"

‎env.ts‎

Lines changed: 34 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,38 @@
1-
import { defineConfig, Schema } from '@julr/vite-plugin-validate-env';
1+
import { defineConfig, Schema, overrideDefineForWebAppServe } from "@julr/vite-plugin-validate-env";
2+
3+
const webAppServeEnabled = process.env.WEB_APP_SERVE_ENABLED?.toLowerCase() === 'true';
4+
if (webAppServeEnabled) {
5+
// eslint-disable-next-line no-console
6+
console.warn('Building application for web-app-serve');
7+
}
8+
const overrideDefine = webAppServeEnabled
9+
? overrideDefineForWebAppServe
10+
: undefined;
211

312
export default defineConfig({
4-
APP_TITLE: Schema.string(),
5-
APP_ENVIRONMENT: (key, value) => {
6-
// NOTE: APP_ENVIRONMENT_PLACEHOLDER is meant to be used with image builds
7-
// The value will be later replaced with the actual value
8-
const regex = /^production|staging|testing|alpha-\d+|development|APP_ENVIRONMENT_PLACEHOLDER$/;
9-
const valid = !!value && (value.match(regex) !== null);
10-
if (!valid) {
11-
throw new Error(`Value for environment variable "${key}" must match regex "${regex}", instead received "${value}"`);
12-
}
13-
if (value === 'APP_ENVIRONMENT_PLACEHOLDER') {
14-
console.warn(`Using ${value} for app environment. Make sure to not use this for builds without nginx-serve`)
15-
}
16-
return value as ('production' | 'staging' | 'testing' | `alpha-${number}` | 'development' | 'APP_ENVIRONMENT_PLACEHOLDER');
13+
overrideDefine,
14+
validator: 'builtin',
15+
schema: {
16+
// NOTE: These are the dynamic env variables
17+
APP_TITLE: Schema.string(),
18+
APP_ENVIRONMENT: (key, value) => {
19+
// NOTE: APP_ENVIRONMENT_PLACEHOLDER is meant to be used with image builds
20+
// The value will be later replaced with the actual value
21+
const regex = /^production|staging|testing|alpha-\d+|development|APP_ENVIRONMENT_PLACEHOLDER$/;
22+
const valid = !!value && (value.match(regex) !== null);
23+
if (!valid) {
24+
throw new Error(`Value for environment variable "${key}" must match regex "${regex}", instead received "${value}"`);
25+
}
26+
if (value === 'APP_ENVIRONMENT_PLACEHOLDER') {
27+
console.warn(`Using ${value} for app environment. Make sure to not use this for builds without nginx-serve`)
28+
}
29+
return value as ('production' | 'staging' | 'testing' | `alpha-${number}` | 'development' | 'APP_ENVIRONMENT_PLACEHOLDER');
30+
},
31+
APP_GRAPHQL_CODEGEN_ENDPOINT: Schema.string(),
32+
APP_GRAPHQL_DOMAIN: Schema.string(),
33+
APP_UMAMI_SRC: Schema.string.optional(),
34+
APP_UMAMI_ID: Schema.string.optional(),
35+
APP_SENTRY_DSN: Schema.string.optional(),
36+
1737
},
18-
APP_GRAPHQL_CODEGEN_ENDPOINT: Schema.string(),
19-
APP_GRAPHQL_DOMAIN: Schema.string(),
20-
APP_UMAMI_SRC: Schema.string.optional(),
21-
APP_UMAMI_ID: Schema.string.optional(),
22-
APP_SENTRY_DSN: Schema.string.optional(),
2338
});

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"@codemirror/lang-markdown": "^6.2.5",
2424
"@dnd-kit/core": "^6.1.0",
2525
"@dnd-kit/sortable": "^8.0.0",
26+
"@julr/vite-plugin-validate-env": "github:toggle-corp/vite-plugin-validate-env#v2.2.0-tc.1",
2627
"@replit/codemirror-vim": "^6.2.1",
2728
"@sentry/react": "^8.26.0",
2829
"@togglecorp/fujs": "^2.2.0",
@@ -43,14 +44,12 @@
4344
"@graphql-codegen/cli": "^5.0.2",
4445
"@graphql-codegen/client-preset": "^4.3.3",
4546
"@graphql-typed-document-node/core": "^3.2.0",
46-
"@julr/vite-plugin-validate-env": "^2.2.0",
4747
"@types/node": "^20.11.6",
4848
"@types/react": "^18.0.28",
4949
"@types/react-dom": "^18.0.11",
5050
"@typescript-eslint/eslint-plugin": "^5.59.5",
5151
"@typescript-eslint/parser": "^5.59.5",
5252
"@vite-pwa/assets-generator": "^1.0.0",
53-
"sharp": "^0.33.5",
5453
"@vitejs/plugin-react-swc": "^3.5.0",
5554
"@vitest/coverage-v8": "^1.2.2",
5655
"autoprefixer": "^10.4.14",
@@ -74,6 +73,7 @@
7473
"postcss-normalize": "^10.0.1",
7574
"postcss-preset-env": "^8.3.2",
7675
"rollup-plugin-visualizer": "^5.9.0",
76+
"sharp": "^0.33.5",
7777
"stylelint": "^16.7.0",
7878
"stylelint-config-concentric": "^2.0.2",
7979
"stylelint-config-recommended": "^14.0.1",

0 commit comments

Comments
 (0)