Migrate frontend to Vite (#409)

Bump frontend dependencies and migrate from CRA to Vite

Co-authored-by: Michał Jura <[email protected]>

.dockerignore

@@ -8,5 +8,5 @@ samples/
 index/
 e2e-state
 mquery.ini
-src/mqueryfront/build
+src/mqueryfront/dist
 src/mqueryfront/node_modules

.gitignore

@@ -11,3 +11,5 @@ mquery.egg-info/
 package-lock.json
 build/
 postgres/
+node_modules/
+dist/

MANIFEST.in

@@ -1 +1 @@
-graft src/mqueryfront/build
+graft src/mqueryfront/dist

deploy/docker/dev.frontend.Dockerfile

@@ -1,4 +1,4 @@
-FROM node:16 AS build
+FROM node:18 AS build
 
 RUN npm install -g serve
 COPY src/mqueryfront /app

deploy/docker/dev.web.Dockerfile

@@ -1,11 +1,20 @@
-FROM python:3.10
+FROM node:18 AS build
+
+RUN npm install -g serve
+COPY src/mqueryfront /app
+WORKDIR /app
+RUN npm install --legacy-peer-deps && npm run build
 
-WORKDIR /usr/src/app/src
+FROM python:3.10
 
 RUN apt update; apt install -y cmake
 
 # mquery and plugin requirements
 COPY requirements.txt src/plugins/requirements-*.txt /tmp/
 RUN ls /tmp/requirements*.txt | xargs -i,, pip --no-cache-dir install -r ,,
 
-CMD pip install -e /usr/src/app && uvicorn mquery.app:app --host 0.0.0.0 --port 5000 --reload
+COPY requirements.txt setup.py MANIFEST.in /usr/src/app/
+COPY src /usr/src/app/src/
+COPY --from=build "/app/dist" "/usr/src/app/src/mqueryfront/dist"
+RUN pip3 install /usr/src/app
+CMD uvicorn mquery.app:app --host 0.0.0.0 --port 5000 --reload

deploy/docker/web.Dockerfile

@@ -1,4 +1,4 @@
-FROM node:16 AS build
+FROM node:18 AS build
 
 RUN npm install -g serve
 COPY src/mqueryfront /app
@@ -15,6 +15,6 @@ RUN ls /tmp/requirements*.txt | xargs -i,, pip --no-cache-dir install -r ,,
 
 COPY requirements.txt setup.py MANIFEST.in /usr/src/app/
 COPY src /usr/src/app/src/
-COPY --from=build "/app/build" "/usr/src/app/src/mqueryfront/build"
+COPY --from=build "/app/dist" "/usr/src/app/src/mqueryfront/dist"
 RUN pip3 install /usr/src/app
 CMD ["uvicorn", "mquery.app:app", "--host", "0.0.0.0", "--port", "5000"]

src/app.py

@@ -575,7 +575,7 @@ def server() -> ServerSchema:
 
 @app.get("/query/{path}", include_in_schema=False)
 def serve_index(path: str) -> FileResponse:
-    return FileResponse(Path(__file__).parent / "mqueryfront/build/index.html")
+    return FileResponse(Path(__file__).parent / "mqueryfront/dist/index.html")
 
 
 @app.get("/recent", include_in_schema=False)
@@ -586,14 +586,14 @@ def serve_index(path: str) -> FileResponse:
 @app.get("/about", include_in_schema=False)
 def serve_index_sub() -> FileResponse:
     # Static routes are always publicly accessible without authorisation.
-    return FileResponse(Path(__file__).parent / "mqueryfront/build/index.html")
+    return FileResponse(Path(__file__).parent / "mqueryfront/dist/index.html")
 
 
 app.mount(
     "/",
     StaticFiles(
         directory=os.path.join(
-            os.path.dirname(__file__), "mqueryfront", "build"
+            os.path.dirname(__file__), "mqueryfront", "dist"
         ),
         html=True,
     ),

src/mqueryfront/public/index.html → src/mqueryfront/index.html

@@ -11,24 +11,16 @@
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-        <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-        <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
+        <link rel="manifest" href="/manifest.json" />
+        <link rel="shortcut icon" href="/favicon.ico" />
         <title>mquery | CERT.PL>_</title>
     </head>
     <body>
         <noscript>
             You need to enable JavaScript to run this app.
         </noscript>
         <div id="root"></div>
+        <script type="module" src="/src/index.js"></script>
         <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.