feat: configures webpack build for docker image

This commit is contained in:
Mark Mankarious 2024-04-06 12:49:05 +01:00
parent 56621f3a27
commit 1a647062d1
5 changed files with 32 additions and 7 deletions

View file

@ -14,7 +14,7 @@ RUN npm install
COPY . .
# Build the React app for production
RUN npm run standalone
RUN npm run docker:build
# Use Nginx as the production server
FROM nginx:alpine

View file

@ -1,6 +1,6 @@
{
"name": "isoflow",
"version": "1.0.11",
"version": "1.1.0",
"private": false,
"description": "An open-source React component for drawing network diagrams.",
"license": "MIT",
@ -20,7 +20,7 @@
"docs:dev": "cd ./docs && npm run dev",
"docs:build": "cd ./docs && npm run build",
"docs:start": "cd ./docs && npm run start",
"standalone": "webpack --config ./webpack/standalone.config.js"
"docker:build": "webpack --config ./webpack/docker.config.js"
},
"devDependencies": {
"@isoflow/isopacks": "^0.0.10",

26
src/index-docker.tsx Normal file
View file

@ -0,0 +1,26 @@
// This is an entry point for the Docker image build.
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Box } from '@mui/material';
import GlobalStyles from '@mui/material/GlobalStyles';
import Isoflow, { INITIAL_DATA } from 'src/Isoflow';
import { icons, colors } from './examples/initialData';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<GlobalStyles
styles={{
body: {
margin: 0
}
}}
/>
<Box sx={{ width: '100vw', height: '100vh' }}>
<Isoflow initialData={{ ...INITIAL_DATA, icons, colors }} />
</Box>
</React.StrictMode>
);

View file

@ -1,5 +1,4 @@
// This is a development entry point for the app.
// It is not used in production or included in the build.
// This is an entry point for running the app in dev mode.
import React from 'react';
import ReactDOM from 'react-dom/client';
import GlobalStyles from '@mui/material/GlobalStyles';

View file

@ -5,11 +5,11 @@ const webpack = require('webpack');
module.exports = {
mode: 'production',
entry: './src/index.tsx',
entry: './src/index-docker.tsx',
target: 'web',
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name].js',
filename: 'main.js',
},
module: {
rules: [