Use CDN (#419)

.env

@@ -9,3 +9,4 @@ REACT_APP_FIREBASE_STORAGE_BUCKET=
 REACT_APP_FIREBASE_MESSAGING_SENDER_ID=
 REACT_APP_FIREBASE_APP_ID=
 REACT_APP_FIREBASE_MEASUREMENT_ID=
+REACT_APP_CDN_URL=

DEVELOPMENT.md

@@ -57,5 +57,5 @@ gcloud auth login
 Set up CORS:
 
 ```bash
-gsutil cors set cors.json gs://<YOUR-BUCKET>
+gsutil cors set firebase/cors.json gs://<YOUR-BUCKET>
 ```

src/hooks/useServerStorage.ts

@@ -12,15 +12,26 @@ import {
 const PUBLIC_PATH = 'public';
 const USERS_PATH = `${PUBLIC_PATH}/users`;
 const INI_PATH = `${PUBLIC_PATH}/ini`;
+const CDN_URL = process.env.REACT_APP_CDN_URL;
 
 const storage = getStorage();
 
 const genericError = (error: Error) => notification.error({ message: 'Storage Error', description: error.message });
 
+const fetchFromServer = async (path: string): Promise<ArrayBuffer> => {
+  if (CDN_URL) {
+    const response = await fetch(`${CDN_URL}/${path}`);
+    return Promise.resolve(response.arrayBuffer());
+  }
+
+  return Promise.resolve(await getBytes(ref(storage, path)));
+};
+
 const useServerStorage = () => {
   const getFile = async (path: string) => {
+
     try {
-      return Promise.resolve(await getBytes(ref(storage, path)));
+      return fetchFromServer(path);
     } catch (error) {
       Sentry.captureException(error);
       console.error(error);
@@ -34,7 +45,7 @@ const useServerStorage = () => {
     const { version, baseVersion } = /.+?(?<version>(?<baseVersion>\d+)(-\w+)*)/.exec(signature)?.groups || { version: null, baseVersion: null };
 
     try {
-      return Promise.resolve(await getBytes(ref(storage, `${INI_PATH}/${version}.ini.gz`)));
+      return fetchFromServer(`${INI_PATH}/${version}.ini.gz`);
     } catch (error) {
       Sentry.captureException(error);
       console.error(error);
@@ -45,11 +56,10 @@ const useServerStorage = () => {
       });
 
       try {
-        return Promise.resolve(await getBytes(ref(storage, `${INI_PATH}/${baseVersion}.ini.gz`)));
-      // eslint-disable-next-line @typescript-eslint/no-shadow
-      } catch (error) {
-        Sentry.captureException(error);
-        console.error(error);
+        return fetchFromServer(`${INI_PATH}/${baseVersion}.ini.gz`);
+      } catch (err) {
+        Sentry.captureException(err);
+        console.error(err);
 
         notification.error({
           message: 'INI not found',

src/pages/Upload.tsx

@@ -91,7 +91,7 @@ const containerStyle = {
 const rowProps = { gutter: 10 };
 const colProps = { span: 24, sm: 12 };
 
-const maxFileSizeMB = 10;
+const maxFileSizeMB = 50;
 const descriptionEditorHeight = 260;
 const thisYear = (new Date()).getFullYear();
 const nanoidCustom = customAlphabet('0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz', 10);