Fix for breaking production editor

.dockerignore

@@ -0,0 +1,4 @@
+node_modules
+plop-templates
+plopfile.cjs
+.github

.gitignore

@@ -32,4 +32,7 @@ dist
 .DS_Store
 
 analyse.html
-stats.html
+stats.html
+
+*.pem
+

Dockerfile

@@ -0,0 +1,34 @@
+# pull the Node.js Docker image as dependencies
+# ---- Dependencies Node ----
+FROM node:16-alpine AS build
+# copy the package.json files from local machine to the workdir in container
+COPY package.json .
+# install node packages
+RUN npm set progress=false && npm config set depth 0
+RUN npm install 
+
+# #
+# # ---- Test ----
+# # run linters, setup and tests
+# FROM dependencies AS test
+# COPY . .
+# RUN  npm run lint && npm run test
+# copy app sources
+COPY ./src ./src
+COPY tsconfig.json vite.config.ts analyticsrc.json index.html /
+RUN echo $(ls)
+RUN npm run build
+
+FROM node:16-alpine
+# copy the generated modules and all other files to the container
+WORKDIR /usr/src/app
+RUN npm install -g serve
+COPY cert.pem /etc/ssl/certificates/cert.pem
+COPY chain.pem /etc/ssl/certificates/chain.pem
+COPY fullchain.pem /etc/ssl/certificates/fullchain.pem
+COPY privkey.pem /etc/ssl/certificates/privkey.pem
+COPY --from=build build .
+# our app is running on port 3000 within the container, so need to expose it
+EXPOSE 3000
+# the command that starts our app
+CMD ["serve", "-s", "."]

src/app/components/Editor/Editor.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react"
+import { ReactNode, useEffect, useState } from "react"
 import { useLocation } from "react-router-dom"
 import { createPortal } from "react-dom"
 import { Alert, Toggle } from ".."
@@ -66,6 +66,7 @@ const Editor = (): JSX.Element | string => {
   const [selectedComponentDefinition, setSelectedComponentDefinition] =
     useState<FrameContentDefinition | null>(null)
   const [theme, setTheme] = useState<string>("th-light-1")
+  const [portal, setPortal] = useState<ReactNode>()
   const location = useLocation()
 
   useEffect(() => {
@@ -180,6 +181,19 @@ const Editor = (): JSX.Element | string => {
 
   const mountNode = contentRef?.contentWindow?.document?.body
 
+  useEffect(() => {
+    mountNode &&
+      setPortal(
+        createPortal(
+          <FrameContent
+            contentDefinition={selectedComponentDefinition}
+            notificationProps={notificationProps}
+          />,
+          mountNode,
+        ),
+      )
+  }, [selectedComponentDefinition])
+
   return (
     <div className="ar-Editor w-100 h-100 d-flex flex-column">
       <div className="ar-Editor__tools px-3 py-2">
@@ -198,14 +212,7 @@ const Editor = (): JSX.Element | string => {
         ref={setContentRef}
         title="Armco form-componentComponent Viewer"
       >
-        {mountNode &&
-          createPortal(
-            <FrameContent
-              contentDefinition={selectedComponentDefinition}
-              notificationProps={notificationProps}
-            />,
-            mountNode,
-          )}
+        {portal}
         {/* <div className="ar-Editor__props-container d-inline-block h-100"></div> */}
       </iframe>
     </div>

tsconfig.json

@@ -24,5 +24,5 @@
   "include": [
     "src"
   ],
-  "exclude": ["node_modules", "src/**/*.test.*", "src/**/*.spec.*"]
+  "exclude": ["node_modules", "src/**/*.test.*", "src/**/*.spec.*", "src/stories"]
 }