Skip to content

Commit 1a081f0

Browse files
pjuaristi-ikerlanpjuaristi-ikerlan
authored
First Dockerfile version for frontend (#114)
* fix: errors in build fixed * fix: dropdown button icon removed * chore: custom palette variables included * feat: first version of Dockerfile * fix: theme reestructurated to reduce build problems * fix: chip colors overriding to fix all build problems * chore: backend api data commented for now in nginx configuration * feat: Dynamic env variable injection * fix: fixes after PR sonar review * fix: useless env variable removed * fix: nginx configuration comments removed * fix: usage of npm as package manager * fix --ignore-scripts added to avoid sonar security hotspot * fix: omit dev flag removed * chore: version included to nginx image * fix: environment variable injection modified
1 parent c5922f2 commit 1a081f0

File tree

15 files changed

+738
-366
lines changed

15 files changed

+738
-366
lines changed

‎ichub-frontend/.dockerignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.chart
2+
.git
3+
.github
4+
.gitignore
5+
.husky
6+
Dockerfile

‎ichub-frontend/Dockerfile‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
#################################################################################
2+
# Eclipse Tractus-X - Industry Core Hub Frontend
3+
#
4+
# Copyright (c) 2025 Contributors to the Eclipse Foundation
5+
#
6+
# See the NOTICE file(s) distributed with this work for additional
7+
# information regarding copyright ownership.
8+
#
9+
# This program and the accompanying materials are made available under the
10+
# terms of the Apache License, Version 2.0 which is available at
11+
# https://www.apache.org/licenses/LICENSE-2.0.
12+
#
13+
# Unless required by applicable law or agreed to in writing, software
14+
# distributed under the License is distributed on an "AS IS" BASIS
15+
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
16+
# either express or implied. See the
17+
# License for the specific language govern in permissions and limitations
18+
# under the License.
19+
#
20+
# SPDX-License-Identifier: Apache-2.0
21+
#################################################################################
22+
23+
# Stage 1: Build the React app
24+
FROM node:23-alpine AS builder
25+
26+
# Copy package files and install dependencies
27+
COPY package.json package-lock.json ./
28+
RUN npm ci --ignore-scripts
29+
30+
# Copy the rest of the source code
31+
COPY . /app
32+
33+
# Set the working directory
34+
WORKDIR /app
35+
36+
# Build the application
37+
RUN npm run build
38+
39+
40+
# Stage 2: Serve the app with Nginx
41+
FROM nginxinc/nginx-unprivileged:alpine3.21
42+
43+
# Copy custom Nginx configuration
44+
COPY nginx.conf /etc/nginx/conf.d/default.conf
45+
46+
# Copy built files from the builder stage
47+
COPY --from=builder /app/dist /usr/share/nginx/html
48+
49+
# Change to root user
50+
USER root
51+
52+
# Rename index.html to index.html.reference, to be used by env variables inject script
53+
# Create symlink for tmp for index.html to enable readOnlyRootFilesystem
54+
RUN mv /usr/share/nginx/html/index.html /usr/share/nginx/html/index.html.reference \
55+
&& ln -s /tmp/index.html /usr/share/nginx/html/index.html
56+
57+
# Add env variables inject script and mark as executable
58+
# Make nginx owner of /usr/share/nginx/html/ and change to nginx user
59+
COPY ./scripts/inject-dynamic-env.sh /docker-entrypoint.d/00-inject-dynamic-env.sh
60+
RUN chmod +x /docker-entrypoint.d/00-inject-dynamic-env.sh \
61+
&& chown -R 101:101 /usr/share/nginx/html/
62+
63+
# Change to nginx user
64+
USER 101
65+
66+
# Expose port 80
67+
EXPOSE 80
68+
69+
# Healthcheck to verify Nginx is running
70+
HEALTHCHECK --interval=30s --timeout=10s --start-period=10s --retries=3 \
71+
CMD wget --spider -q http://localhost || exit 1
72+
73+
# Start Nginx
74+
CMD ["nginx", "-g", "daemon off;"]

‎ichub-frontend/index.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,13 @@
3434
</head>
3535
<body>
3636
<div id="root"></div>
37+
<script>
38+
// Do NOT change ENV attributes without changing them in scripts/inject-dynamic-env.sh as well
39+
const ENV = {
40+
REQUIRE_HTTPS_URL_PATTERN: "true",
41+
ICHUB_BACKEND_URL: "https://portal-backend.example.org"
42+
}
43+
</script>
3744
<script type="module" src="/src/main.tsx"></script>
3845
</body>
3946
</html>

‎ichub-frontend/nginx.conf‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
#################################################################################
2+
# Eclipse Tractus-X - Industry Core Hub Frontend
3+
#
4+
# Copyright (c) 2025 Contributors to the Eclipse Foundation
5+
#
6+
# See the NOTICE file(s) distributed with this work for additional
7+
# information regarding copyright ownership.
8+
#
9+
# This program and the accompanying materials are made available under the
10+
# terms of the Apache License, Version 2.0 which is available at
11+
# https://www.apache.org/licenses/LICENSE-2.0.
12+
#
13+
# Unless required by applicable law or agreed to in writing, software
14+
# distributed under the License is distributed on an "AS IS" BASIS
15+
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
16+
# either express or implied. See the
17+
# License for the specific language govern in permissions and limitations
18+
# under the License.
19+
#
20+
# SPDX-License-Identifier: Apache-2.0
21+
#################################################################################
22+
23+
server {
24+
listen 80;
25+
server_name localhost;
26+
27+
location / {
28+
root /usr/share/nginx/html;
29+
index index.html;
30+
try_files $uri $uri/index.html /index.html;
31+
}
32+
33+
error_page 404 /index.html;
34+
}

‎ichub-frontend/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@
77
"dev": "vite",
88
"build": "tsc -b && vite build",
99
"lint": "eslint .",
10-
"preview": "vite preview"
10+
"preview": "vite preview",
11+
"build:docker": "IMAGE=ichub-frontend && docker build -t $IMAGE -f Dockerfile .",
12+
"start:docker": "IMAGE=ichub-frontend && docker run --rm -d -p 8080:80 --name ichub-frontend $IMAGE"
1113
},
1214
"dependencies": {
1315
"@catena-x/portal-shared-components": "^3.7.6",

‎ichub-frontend/scripts/inject-dynamic-env.sh‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
#!/bin/sh
2+
3+
#################################################################################
4+
# Eclipse Tractus-X - Industry Core Hub Frontend
5+
#
6+
# Copyright (c) 2025 Contributors to the Eclipse Foundation
7+
#
8+
# See the NOTICE file(s) distributed with this work for additional
9+
# information regarding copyright ownership.
10+
#
11+
# This program and the accompanying materials are made available under the
12+
# terms of the Apache License, Version 2.0 which is available at
13+
# https://www.apache.org/licenses/LICENSE-2.0.
14+
#
15+
# Unless required by applicable law or agreed to in writing, software
16+
# distributed under the License is distributed on an "AS IS" BASIS
17+
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
18+
# either express or implied. See the
19+
# License for the specific language govern in permissions and limitations
20+
# under the License.
21+
#
22+
# SPDX-License-Identifier: Apache-2.0
23+
#################################################################################
24+
25+
source_file=/usr/share/nginx/html/index.html.reference
26+
target_file=/tmp/index.html
27+
28+
# List of environment variables to be replaced
29+
# (They should be set and match the ones in index.html)
30+
# Sequence is irrelevant
31+
vars=" \
32+
REQUIRE_HTTPS_URL_PATTERN \
33+
ICHUB_BACKEND_URL \
34+
"
35+
36+
# base sed command: output source file and remove javascript comments
37+
sed_command="cat ${source_file} | sed -e \"s@^\\\s*//.*@@g\""
38+
39+
set -- $vars
40+
while [ -n "$1" ]; do
41+
var=$1
42+
# add a replace expression for each variable
43+
sed_command="${sed_command} -e \"s@${var}:\s*\\\".*\\\"@${var}: \\\"\${${var}}\\\"@g\""
44+
shift
45+
done
46+
47+
# execute the built replace command and write to target file
48+
echo ${sed_command} | sh > ${target_file}
49+
50+
echo "Variables injected correctly in $target_file"

‎ichub-frontend/src/components/general/CardChip.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export const CardChip = ({ status, statusText }: CardChipProps) => {
8282
border: theme.palette.chip[border],
8383
height: '28px',
8484
}}
85-
icon={statusKey==StatusVariants.shared?<PersonIcon sx={{color: '#000000', fontSize: '18px'}}/>:null}
85+
icon={statusKey==StatusVariants.shared?<PersonIcon sx={{color: '#000000', fontSize: '18px'}}/>:undefined}
8686
/>
8787
)
8888
}

‎ichub-frontend/src/components/general/JsonViewerDialog.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ import { JsonViewerDialogProps } from '../../types/jsonViewer';
2727

2828
const JsonViewerDialog = ({ open, onClose, carJsonData }: JsonViewerDialogProps) => {
2929
const [copied, setCopied] = useState(false);
30-
const title = carJsonData?.Name ? `${carJsonData.Name} JSON data` : "DCM JSON Data";
31-
const description = carJsonData?.Description ? `${carJsonData.Description}` : "";
30+
const title = carJsonData?.name ? `${carJsonData.name} JSON data` : "DCM JSON Data";
31+
const description = carJsonData?.description ? `${carJsonData.description}` : "";
3232

3333
const handleCopy = () => {
3434
const json_string = JSON.stringify(carJsonData, null, 2);

‎ichub-frontend/src/components/product-detail/ShareDropdown.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@ const ShareDropdown = ({ handleCopy, handleDownload, handleShare }: ShareDropdow
3939
'font-size': '14px',
4040
}}
4141
buttonText="Share"
42-
startIcon={<Icon fontSize="16" iconName="IosShare" />}
4342
>
4443
<Grid2 container direction="column">
4544
<Button className="dropdown-button share-dropdown-btn" color="secondary" size="small" onClick={handleCopy} startIcon={<Icon fontSize="16" iconName="ContentCopy" />}>

‎ichub-frontend/src/main.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
import { StrictMode } from 'react'
2424
import { createRoot } from 'react-dom/client'
2525
import { SharedThemeProvider } from '@catena-x/portal-shared-components'
26-
import { theme } from './theme'
26+
import { theme } from './theme/theme.ts'
2727
import { ThemeProvider } from '@mui/material/styles';
2828

2929
import App from './App.tsx'

0 commit comments

Comments
 (0)