trying to keep a seperate config file thats loaded at runtime

towards #21 but seems to be a particale challenge using webpack

web-app/build-utils/webpack.common.js

@@ -1,6 +1,7 @@
 const commonPaths = require('./common-paths');
 
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyPlugin = require("copy-webpack-plugin");
 
 const config = {
  entry: {
@@ -41,8 +42,16 @@ const config = {
  new HtmlWebpackPlugin({
  template: `public/index.html`,
  favicon: `public/favicon.ico`
- })
- ]
+ }),
+ new CopyPlugin({
+ patterns: [
+ { from: "config.json" }
+ ],
+ }),
+ ],
+ externals: {
+ './config.json': '/config.json'
+ }
 };
 
 module.exports = config;

web-app/config.json

@@ -0,0 +1,7 @@
+{
+ "server_url": "https://example.com/api/",
+ "theme_colors": {
+ "primary": "#007bff",
+ "secondary": "black"
+ }
+}

web-app/package.json

@@ -16,6 +16,7 @@
  "coverage": "yarn test --coverage"
  },
  "dependencies": {
+ "json-loader": "^0.5.7",
  "prop-types": "^15.7.2",
  "react": "^16.8.6",
  "react-async": "^10.0.1",
@@ -40,6 +41,7 @@
  "babel-jest": "^26.1.0",
  "babel-loader": "^8.0.6",
  "chalk": "^4.1.0",
+ "copy-webpack-plugin": "6.4.0",
  "cross-env": "^7.0.2",
  "crypto-js": "^4.0.0",
  "css-loader": "^3.6.0",

web-app/src/components/Layout.js

@@ -3,6 +3,7 @@ import Clock from 'react-live-clock'
 import { Header, Container, Divider, Icon, Grid } from 'semantic-ui-react'
 
 import { pullRight, h1 } from './layout.css'
+import { theme_colors } from './config.json'
 
 const Layout = ({ children }) => {
  return (
@@ -23,7 +24,7 @@ const Layout = ({ children }) => {
  </Header>
  {children}
  <Divider />
- <p className={pullRight}>
+ <p className={pullRight} style={{color: theme_colors.secondary}}>
  Made with <Icon name="heart" color="red" /> by Chris Mc
  </p>
  </Container>