refactor: use fastify vite for the dev server (#284)

* refactor: use fastify vite for the server

by doing this we do not need to have local hacks for the routes. No local proxy needed. Everything just works.

* fix: update the dockerfile build path

* fix: update package.json

* fix: fonts path

.gitignore

@@ -122,4 +122,5 @@ prisma_test.js
 database/
 data/
 .vscode
-hemmelig.backup.db
+hemmelig.backup.db
+client/build/

Dockerfile

@@ -25,8 +25,7 @@ FROM node:20-alpine
 
 WORKDIR /home/node/hemmelig
 
-RUN mkdir build
-COPY --from=0 /usr/src/app/build build/
+COPY --from=0 /usr/src/app/client/build client/build
 
 COPY package*.json ./
 

cli.js

@@ -3,7 +3,7 @@
 import meow from 'meow';
 import fetch from 'node-fetch';
 import YAML from 'yaml';
-import { generateKey, encrypt } from './src/shared/helpers/crypto.js';
+import { encrypt, generateKey } from './shared/helpers/crypto.js';
 
 // Adding this hack to make it work for pkg
 // https://github.com/vercel/pkg/issues/1291#issuecomment-1360586986

src/i18n.js → client/i18n.js

@@ -3,7 +3,7 @@ import LanguageDetector from 'i18next-browser-languagedetector';
 import HttpApi from 'i18next-http-backend';
 import { initReactI18next } from 'react-i18next';
 
-import config from './client/config';
+import config from './config';
 
 function getLanguage() {
     const language = config.get('settings.forcedLanguage');

src/client/index.css → client/index.css

@@ -3,134 +3,134 @@
     font-style: normal;
     font-weight: 100;
     font-display: swap;
-    src: url('/fonts/Inter-Thin.woff2') format('woff2');
+    src: url('/static/fonts/Inter-Thin.woff2') format('woff2');
 }
 @font-face {
     font-family: 'Inter';
     font-style: italic;
     font-weight: 100;
     font-display: swap;
-    src: url('/fonts/Inter-ThinItalic.woff2') format('woff2');
+    src: url('/static/fonts/Inter-ThinItalic.woff2') format('woff2');
 }
 
 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 200;
     font-display: swap;
-    src: url('/fonts/Inter-ExtraLight.woff2') format('woff2');
+    src: url('/static/fonts/Inter-ExtraLight.woff2') format('woff2');
 }
 @font-face {
     font-family: 'Inter';
     font-style: italic;
     font-weight: 200;
     font-display: swap;
-    src: url('/fonts/Inter-ExtraLightItalic.woff2') format('woff2');
+    src: url('/static/fonts/Inter-ExtraLightItalic.woff2') format('woff2');
 }
 
 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 300;
     font-display: swap;
-    src: url('/fonts/Inter-Light.woff2') format('woff2');
+    src: url('/static/fonts/Inter-Light.woff2') format('woff2');
 }
 @font-face {
     font-family: 'Inter';
     font-style: italic;
     font-weight: 300;
     font-display: swap;
-    src: url('/fonts/Inter-LightItalic.woff2') format('woff2');
+    src: url('/static/fonts/Inter-LightItalic.woff2') format('woff2');
 }
 
 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 400;
     font-display: swap;
-    src: url('/fonts/Inter-Regular.woff2') format('woff2');
+    src: url('/static/fonts/Inter-Regular.woff2') format('woff2');
 }
 @font-face {
     font-family: 'Inter';
     font-style: italic;
     font-weight: 400;
     font-display: swap;
-    src: url('/fonts/Inter-Italic.woff2') format('woff2');
+    src: url('/static/fonts/Inter-Italic.woff2') format('woff2');
 }
 
 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 500;
     font-display: swap;
-    src: url('/fonts/Inter-Medium.woff2') format('woff2');
+    src: url('/static/fonts/Inter-Medium.woff2') format('woff2');
 }
 @font-face {
     font-family: 'Inter';
     font-style: italic;
     font-weight: 500;
     font-display: swap;
-    src: url('/fonts/Inter-MediumItalic.woff2') format('woff2');
+    src: url('/static/fonts/Inter-MediumItalic.woff2') format('woff2');
 }
 
 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 600;
     font-display: swap;
-    src: url('/fonts/Inter-SemiBold.woff2') format('woff2');
+    src: url('/static/fonts/Inter-SemiBold.woff2') format('woff2');
 }
 @font-face {
     font-family: 'Inter';
     font-style: italic;
     font-weight: 600;
     font-display: swap;
-    src: url('/fonts/Inter-SemiBoldItalic.woff2') format('woff2');
+    src: url('/static/fonts/Inter-SemiBoldItalic.woff2') format('woff2');
 }
 
 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 700;
     font-display: swap;
-    src: url('/fonts/Inter-Bold.woff2') format('woff2');
+    src: url('/static/fonts/Inter-Bold.woff2') format('woff2');
 }
 @font-face {
     font-family: 'Inter';
     font-style: italic;
     font-weight: 700;
     font-display: swap;
-    src: url('/fonts/Inter-BoldItalic.woff2') format('woff2');
+    src: url('/static/fonts/Inter-BoldItalic.woff2') format('woff2');
 }
 
 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 800;
     font-display: swap;
-    src: url('/fonts/Inter-ExtraBold.woff2') format('woff2');
+    src: url('/static/fonts/Inter-ExtraBold.woff2') format('woff2');
 }
 @font-face {
     font-family: 'Inter';
     font-style: italic;
     font-weight: 800;
     font-display: swap;
-    src: url('/fonts/Inter-ExtraBoldItalic.woff2') format('woff2');
+    src: url('/static/fonts/Inter-ExtraBoldItalic.woff2') format('woff2');
 }
 
 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 900;
     font-display: swap;
-    src: url('/fonts/Inter-Black.woff2') format('woff2');
+    src: url('/static/fonts/Inter-Black.woff2') format('woff2');
 }
 @font-face {
     font-family: 'Inter';
     font-style: italic;
     font-weight: 900;
     font-display: swap;
-    src: url('/fonts/Inter-BlackItalic.woff2') format('woff2');
+    src: url('/static/fonts/Inter-BlackItalic.woff2') format('woff2');
 }
 
 html {

src/index.jsx → client/index.jsx

@@ -5,9 +5,9 @@ import { Provider } from 'react-redux';
 import { LoadingOverlay } from '@mantine/core';
 import './i18n';
 
-import HemmeligApplication from './client/app';
-import configureStore from './client/helpers/configureStore';
-import './client/index.css';
+import HemmeligApplication from './app';
+import configureStore from './helpers/configureStore';
+import './index.css';
 
 const store = configureStore();
 

src/client/routes/signout/index.jsx → client/routes/signout/index.jsx

@@ -40,7 +40,7 @@ const SignOut = () => {
                         <Image
                             maw={240}
                             radius="md"
-                            src="./secret_cat.png"
+                            src="./static/secret_cat.png"
                             alt="Secret Cat"
                             className={styles.image}
                         />

html.js

@@ -5,10 +5,10 @@ export default `<!DOCTYPE html>
         <meta charset="utf-8" />
         <title>Hemmelig.app - Paste a password, confidential message, or private data.</title>
 
-        <link rel="icon" href="/favicon.ico" />
-        <link rel="shortcut icon" href="/favicon.ico" />
+        <link rel="icon" href="/static/favicon.ico" />
+        <link rel="shortcut icon" href="/static/favicon.ico" />
 
-        <link rel="manifest" href="/manifest.json" />
+        <link rel="manifest" href="/static/manifest.json" />
         <!-- Primary Meta Tags -->
         <meta name="title" content="Paste a password, confidential message, or private data." />
         <meta
@@ -27,10 +27,10 @@ export default `<!DOCTYPE html>
             property="og:description"
             content="Ensure your sensitive data remains encrypted, secure, and confidential."
         />
-        <meta property="og:image" content="/icons/icon-512x512.png" />
+        <meta property="og:image" content="/static/icons/icon-512x512.png" />
 
         <!-- Twitter -->
-        <meta property="twitter:card" content="summary_large_image" />
+        <meta property="twitter:card" content="/static/summary_large_image" />
         <meta property="twitter:url" content="https://www.hemmelig.app/" />
         <meta
             property="twitter:title"
@@ -40,14 +40,14 @@ export default `<!DOCTYPE html>
             property="twitter:description"
             content="Ensure your sensitive data remains encrypted, secure, and confidential."
         />
-        <meta property="twitter:image" content="/icons/icon-512x512.png" />
+        <meta property="twitter:image" content="/static/icons/icon-512x512.png" />
 
         <meta name="theme-color" content="#231e23" />
 
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <meta name="mobile-web-app-capable" content="yes" />
         <meta name="apple-mobile-web-app-capable" content="yes" />
-        <link rel="apple-touch-icon" href="/icons/maskable-icon-192x192.png" />
+        <link rel="apple-touch-icon" href="/static/icons/maskable-icon-192x192.png" />
         <script id="__secret_config">
             try {
                 window.__SECRET_CONFIG = {{config}}
@@ -61,7 +61,7 @@ export default `<!DOCTYPE html>
         <noscript>You need to enable JavaScript to run this app.</noscript>
         <div id="root"></div>
 
-        <script type="module" src="/src/index.jsx"></script>
+        <script type="module" src="/index.jsx"></script>
     </body>
 </html>
 `;