upgrade development to vite (Doenet#2008)

.devcontainer/devcontainer.json

@@ -27,25 +27,28 @@
 
   // Uncomment the next line to run commands after the container is created - for example installing curl.
   "initializeCommand": "docker compose -f docker-compose.yml -f .devcontainer/docker-compose.extend.yml down",
-  "postCreateCommand": "npm install --omit=optional",
-  "postStartCommand": "npx snowpack dev",
+  "postCreateCommand": "npm install && npx vite optimize",
+  // "postStartCommand": "",
 
   // Uncomment to connect as a non-root user if you've added one. See https://aka.ms/vscode-remote/containers/non-root.
   "remoteUser": "root",
   "customizations": {
     "vscode": {
       "extensions": [
-        "dbaeumer.vscode-eslint",
-        "ms-azuretools.vscode-docker",
-        "esbenp.prettier-vscode",
-        "styled-components.vscode-styled-components",
-        "meganrogge.template-string-converter",
-        "GitHub.vscode-pull-request-github",
-        "eamodio.gitlens",
-        "DotJoshJohnson.xml"
-      ],
+		"dbaeumer.vscode-eslint",
+		"ms-azuretools.vscode-docker",
+		"esbenp.prettier-vscode",
+		"styled-components.vscode-styled-components",
+		"meganrogge.template-string-converter",
+		"GitHub.vscode-pull-request-github",
+		"eamodio.gitlens",
+		"DotJoshJohnson.xml",
+		"wix.vscode-import-cost",
+		"bmewburn.vscode-intelephense-client"
+	],
       "settings": {
         "editor.formatOnSave": true,
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
         "extensions.verifySignature": false
       }
     }

.devcontainer/docker-compose.extend.yml

@@ -18,20 +18,20 @@ services:
     # build:
     #   context: .
     #   dockerfile: .devcontainer/Dockerfile
-    image: lyanthropos/doenet_test:snowpack-dev
-    ports:
-      - 80:80
+    image: lyanthropos/doenet_dev
     volumes:
       # Uncomment the next line to use Docker from inside the container. See https://aka.ms/vscode-remote/samples/docker-from-docker-compose for details.
       - /var/run/docker.sock:/var/run/docker.sock
+      - /run/host-services/ssh-auth.sock:/run/host-services/ssh-auth.sock
       # mount local files
       - ./:/home/node/workspace
       - node_modules:/home/node/workspace/node_modules
-      - ~/.ssh:/home/node/.ssh
+      - ~/.ssh:/.ssh
     networks:
       - dev_net
     environment:
       - CYPRESS_CACHE_FOLDER=/home/node/workspace/.cache/Cypress
+      - SSH_AUTH_SOCK=/run/host-services/ssh-auth.sock
     # Uncomment the next four lines if you will use a ptrace-based debugger like C++, Go, and Rust.
     cap_add:
       - SYS_PTRACE
@@ -42,17 +42,21 @@ services:
     command: /bin/sh -c "while sleep 1000; do :; done"
   php:
     volumes:
-      - ./src/Api:/usr/local/apache2/htdocs/api
+      - ./public/api:/usr/local/apache2/htdocs/api
       - ./src/Media:/usr/local/apache2/htdocs/media
       - ./cypress_php/api:/usr/local/apache2/htdocs/cyapi
       - vendor:/usr/local/apache2/htdocs/api/vendor
     restart: on-failure
   apache:
+    ports:
+      - 8080:80
+    build:
+      context: ./
+      dockerfile: ./doenet_docker/apache/Dockerfile
+      args:
+        - BUILD_MODE=development
     volumes:
-      - ./dist:/usr/local/apache2/htdocs/
-      - ./src/Api:/usr/local/apache2/htdocs/api
       - ./src/Media:/usr/local/apache2/htdocs/media
-      - ./cypress_php/api:/usr/local/apache2/htdocs/cyapi
       - ./doenet_docker/apache/apache.conf:/usr/local/apache2/conf/httpd.conf
   mysql:
     ports:

.dockerignore

@@ -1,8 +1,9 @@
+./.devcontainer/
+.env
 ./.git/
-./node_modeules/
-./.snowpack/
-./dist_local/
-./dist/
+./.github/
 ./cypress/
 ./cypress_php/
-./.devcontainer/
+./dist/
+./dist_local/
+./node_modules/

docker-compose.yml

@@ -2,9 +2,7 @@ version: '3.9'
 
 services:
   apache:
-    image: lyanthropos/doenet_test:apache-dev
-    ports:
-      - 8080:80
+    image: lyanthropos/doenet_apache:dev
     networks:
       - dev_net
     depends_on:
@@ -13,13 +11,13 @@ services:
     restart: always
 
   php:
-    image: lyanthropos/doenet_test:php-dev
+    image: lyanthropos/doenet_php:dev
     networks:
       - dev_net
     restart: always
 
   mysql:
-    image: lyanthropos/doenet_test:mysql-dev
+    image: lyanthropos/doenet_mysql:dev
     networks:
       - dev_net
     restart: always

doenet_docker/apache/Dockerfile

@@ -1,6 +1,18 @@
+FROM node:19.8-bullseye AS build
+WORKDIR /build
+COPY package*.json ./
+RUN npm ci
+COPY index.html vite.config.js ./
+COPY src ./src
+COPY public ./public
+ARG BUILD_MODE
+RUN npm run build -- --outDir site --mode ${BUILD_MODE}
+
 FROM httpd:2.4.41-alpine
 RUN apk update; \
     apk upgrade;
-COPY ./doenet_docker/apache/apache.conf /usr/local/apache2/conf/httpd.conf
+WORKDIR /usr/local/apache2
+COPY ./doenet_docker/apache/apache.conf ./conf/httpd.conf
+COPY --from=build /build/site ./htdocs
 EXPOSE 80
 EXPOSE 443

doenet_docker/apache/apache.conf

@@ -572,6 +572,8 @@ SSLRandomSeed connect builtin
         RewriteCond %{REQUEST_URI} !^/api [NC]
         # or anything in media
         RewriteCond %{REQUEST_URI} !^/media [NC]
+        # or anything in src
+        RewriteCond %{REQUEST_URI} !^/src [NC]
         # Rewrite everything else to index.html to allow html5 state links
         RewriteRule ^ index.html [L]
     </Directory>

doenet_docker/dev/Dockerfile

@@ -0,0 +1,35 @@
+FROM node:19.8-bullseye
+
+RUN echo "deb http://deb.debian.org/debian bullseye-backports main" >/etc/apt/sources.list.d/bullseye-backports.list
+
+RUN apt-get update && \
+    apt-get -y install \
+    # for docker from source
+    apt-transport-https \
+    ca-certificates \
+    curl \
+    gnupg \
+    lsb-release \
+    #update git to support ssh signing
+    git/bullseye-backports
+
+WORKDIR /
+RUN curl -fsSL https://download.docker.com/linux/debian/gpg | gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
+
+RUN echo \
+  "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/debian \
+  $(lsb_release -cs) stable" | tee /etc/apt/sources.list.d/docker.list > /dev/null
+
+RUN apt-get update && \
+    apt-get -y install docker-ce docker-ce-cli containerd.io
+
+RUN rm -rf /var/lib/apt/lists/* &&\
+    apt-get -y autoremove && \
+    apt-get clean
+
+RUN mkdir -p /home/node/workspace/node_modules && chown -R node:node /home/node/workspace
+WORKDIR /home/node/workspace
+COPY --chown=node:node package*.json vite.config.js ./
+USER node
+
+CMD ["npm", "run", "dev"]

doenet_docker/mysql/Dockerfile

@@ -1,3 +1,3 @@
-FROM mysql:5.7.29
+FROM mysql:8.0.32
 ENV MYSQL_DATABASE doenet_local
 ENV MYSQL_ROOT_PASSWORD helloworld

doenet_docker/php/Dockerfile

@@ -3,7 +3,7 @@ WORKDIR /build
 COPY ./doenet_docker/php/composer.json .
 RUN composer install --ignore-platform-reqs
 
-FROM php:5.4-fpm
+FROM php:7.4-fpm
 RUN  apt-get update -y && \
      apt-get dist-upgrade -y
 RUN apt-get install -y p7zip \

doenet_docker/snowpack/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:17-stretch
+FROM node:19.8-bullseye
 RUN apt-get update && \
     apt-get -y install \
     apt-transport-https \
@@ -22,7 +22,7 @@ RUN rm -rf /var/lib/apt/lists/* &&\
 
 RUN mkdir -p /home/node/workspace/node_modules && chown -R node:node /home/node/workspace
 WORKDIR /home/node/workspace
-COPY --chown=node:node package*.json snowpack.config.js ./
+COPY --chown=node:node package*.json vite.config.js ./
 USER node
 
-CMD ["npm", "run", "start:dev"]
+CMD ["npm", "run", "dev"]

src/Tools/singlepage/index.html → index.html

@@ -5,12 +5,22 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Doenet</title>
     <link rel="shortcut icon" href="/favicon.ico" />
-<script type="text/javascript" charset="UTF-8"
- src="https://cdn.jsdelivr.net/npm/[email protected]/distrib/jsxgraphcore.js"></script>
-<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/distrib/jsxgraph.css" />
-<script src="https://www.youtube.com/iframe_api"></script>
-<script type="text/javascript" src="/media/geogebra/scripts/deployggb.js"></script>
-<!-- <link rel="stylesheet" type="text/css" href="/src/css/handsontable.full.css" /> -->
+    <script
+      type="text/javascript"
+      charset="UTF-8"
+      src="https://cdn.jsdelivr.net/npm/[email protected]/distrib/jsxgraphcore.js"
+    ></script>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/distrib/jsxgraph.css"
+    />
+    <script src="https://www.youtube.com/iframe_api"></script>
+    <script
+      type="module"
+      src="./src/Media/geogebra/scripts/deployggb.js"
+    ></script>
+    <!-- <link rel="stylesheet" type="text/css" href="/src/css/handsontable.full.css" /> -->
 
     <!-- <link
   rel="stylesheet"
@@ -22,58 +32,55 @@
         font-family: 'Open Sans';
         font-style: normal;
         font-weight: 300;
-        src:
-          url('../../media/fonts/files/open-sans-v18-latin-light.woff2') format('woff2'),
-          url('../../media/fonts/files/open-sans-v18-latin-light.woff') format('woff');
+        src: url('/fonts/files/open-sans-v18-latin-light.woff2') format('woff2'),
+          url('/fonts/files/open-sans-v18-latin-light.woff') format('woff');
       }
 
       @font-face {
         font-family: 'Open Sans';
         font-style: italic;
         font-weight: 300;
-        src:
-          url('../../media/fonts/files/open-sans-v18-latin-light-italic.woff2') format('woff2'),
-          url('../../media/fonts/files/open-sans-v18-latin-light-italic.woff') format('woff');
+        src: url('/fonts/files/open-sans-v18-latin-light-italic.woff2')
+            format('woff2'),
+          url('/fonts/files/open-sans-v18-latin-light-italic.woff')
+            format('woff');
       }
 
       /* Regular fonts */
       @font-face {
         font-family: 'Open Sans';
         font-style: normal;
         font-weight: normal;
-        src:
-          url('../../media/fonts/files/open-sans-v18-latin-regular.woff2') format('woff2'),
-          url('../../media/fonts/files/open-sans-v18-latin-regular.woff') format('woff');
+        src: url('/fonts/files/open-sans-v18-latin-regular.woff2')
+            format('woff2'),
+          url('/fonts/files/open-sans-v18-latin-regular.woff') format('woff');
       }
-    
+
       @font-face {
         font-family: 'Open Sans';
         font-style: italic;
         font-weight: normal;
-        src:
-          url('../../media/fonts/files/open-sans-v18-latin-italic.woff2') format('woff2'),
-          url('../../media/fonts/files/open-sans-v18-latin-italic.woff') format('woff');
+        src: url('/fonts/files/open-sans-v18-latin-italic.woff2')
+            format('woff2'),
+          url('/fonts/files/open-sans-v18-latin-italic.woff') format('woff');
       }
 
       /* Bold fonts */
       @font-face {
         font-family: 'Open Sans';
         font-style: normal;
         font-weight: 700;
-        src: url('../../media/fonts/files/open-sans-v18-latin-700.woff2')
-            format('woff2'),
-          url('../../media/fonts/files/open-sans-v18-latin-700.woff')
-            format('woff');
+        src: url('/fonts/files/open-sans-v18-latin-700.woff2') format('woff2'),
+          url('/fonts/files/open-sans-v18-latin-700.woff') format('woff');
       }
 
       @font-face {
         font-family: 'Open Sans';
         font-style: italic;
         font-weight: 700;
-        src: url('../../media/fonts/files/open-sans-v18-latin-700italic.woff2')
+        src: url('/fonts/files/open-sans-v18-latin-700italic.woff2')
             format('woff2'),
-          url('../../media/fonts/files/open-sans-v18-latin-700italic.woff')
-            format('woff');
+          url('/fonts/files/open-sans-v18-latin-700italic.woff') format('woff');
       }
       html {
         font-family: 'Open Sans' !important;
@@ -94,15 +101,15 @@
         --lightGreen: #a6f19f;
         --lightYellow: #f5ed85;
         --whiteBlankLink: #6d4445;
-        --mainYellow: #94610A;
+        --mainYellow: #94610a;
         --mainPurple: #4a03d9;
       }
 
       [data-theme='dark'] {
         font-family: 'Open Sans' !important;
         --menuWidth: 220px;
         --mainBlue: #1a5a99;
-        --lightBlue: hsl(209,54%,82%);
+        --lightBlue: hsl(209, 54%, 82%);
         --solidLightBlue: #1a5a99;
         --mainGray: #a9a9a9;
         --donutBody: #eea177;
@@ -116,14 +123,21 @@
         --canvastext: white;
         --lightGreen: #a6f19f;
         --lightYellow: #f5ed85;
-        --whiteBlankLink: #A9ABE5;
+        --whiteBlankLink: #a9abe5;
         --mainYellow: #efab34;
         --mainPurple: #4a03d9;
       }
     </style>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/index.js"></script>
+    <script>
+      /**
+       * this is a hack for react-mathqill
+       * error: global is not defined
+       */
+      var global = global || window;
+    </script>
+    <script type="module" src="./src/index.jsx"></script>
   </body>
 </html>