migrated to snowpack from create-react-app

Author: anselm94

web/package.json

@@ -10,18 +10,18 @@
     "axios-hooks": "^1.9.0",
     "graphql": "^14.6.0",
     "graphql-tag": "^2.10.3",
+    "http-proxy": "^1.18.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-helmet": "latest",
-    "react-scripts": "latest",
+    "react-helmet": "^6.1.0",
+    "snowpack": "^3.3.3",
     "subscriptions-transport-ws": "^0.9.16",
     "urql": "^1.9.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "snowpack dev",
+    "build": "snowpack build",
+    "test": "echo \"No tests to run :(\" && exit 1"
   },
   "eslintConfig": {
     "extends": "react-app"

web/public/index.html

@@ -38,6 +38,7 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script type="module" src="/dist/index.js"></script>
 </body>
 
 </html>

web/snowpack.config.js

@@ -0,0 +1,43 @@
+/** @type {import("snowpack").SnowpackUserConfig } */
+
+const httpProxy = require("http-proxy");
+const proxy = httpProxy.createServer({ target: "http://localhost:3000" });
+
+module.exports = {
+  env: {
+    REACT_APP_WEBSOCKET_ENDPOINT: "ws://localhost:8080/query",
+  },
+  mount: {
+    public: "/",
+    src: "/dist",
+  },
+  plugins: [
+    /* ... */
+  ],
+  routes: [
+    {
+      src: "/query.*",
+      dest: (req, res) => {
+        proxy.web(req, res);
+      },
+      upgrade: (req, socket, head) => {
+        proxy.ws(req, socket);
+      },
+    },
+    /* Enable an SPA Fallback in development: */
+    { match: "routes", src: ".*", dest: "/index.html" },
+  ],
+  optimize: {
+    /* Example: Bundle your final build: */
+    // "bundle": true,
+  },
+  packageOptions: {
+    /* ... */
+  },
+  devOptions: {
+    /* ... */
+  },
+  buildOptions: {
+    /* ... */
+  },
+};

web/src/index.jsx

@@ -5,7 +5,7 @@ import { Provider as UrqlProvider, createClient, defaultExchanges, subscriptionE
 import { SubscriptionClient } from 'subscriptions-transport-ws';
 
 const subscriptionClient = new SubscriptionClient(
-  process.env.REACT_APP_WEBSOCKET_ENDPOINT,
+  import.meta.env.REACT_APP_WEBSOCKET_ENDPOINT,
   {}
 );
 const gqlclient = createClient({