Extract backend URLs into environment variables (#1772) (#1848)

.env

@@ -0,0 +1,4 @@
+REACT_APP_BACKEND_V1_GET_URL=https://json.excalidraw.com/api/v1/
+REACT_APP_BACKEND_V2_GET_URL=https://json.excalidraw.com/api/v2/
+REACT_APP_BACKEND_V2_POST_URL=https://json.excalidraw.com/api/v2/post/
+REACT_APP_SOCKET_SERVER_URL=https://excalidraw-socket.herokuapp.com

src/data/index.ts

@@ -24,12 +24,12 @@ export { loadFromBlob } from "./blob";
 export { saveAsJSON, loadFromJSON } from "./json";
 export { saveToLocalStorage } from "./localStorage";
 
-const BACKEND_GET = "https://json.excalidraw.com/api/v1/";
+const BACKEND_GET = process.env.REACT_APP_BACKEND_V1_GET_URL;
 
-const BACKEND_V2_POST = "https://json.excalidraw.com/api/v2/post/";
+const BACKEND_V2_POST = process.env.REACT_APP_BACKEND_V2_POST_URL;
-const BACKEND_V2_GET = "https://json.excalidraw.com/api/v2/";
+const BACKEND_V2_GET = process.env.REACT_APP_BACKEND_V2_GET_URL;
 
-export const SOCKET_SERVER = "https://excalidraw-socket.herokuapp.com";
+export const SOCKET_SERVER = process.env.REACT_APP_SOCKET_SERVER_URL;
 
 export type EncryptedData = {
   data: ArrayBuffer;

src/global.d.ts

@@ -13,6 +13,16 @@ interface Window {
   __EXCALIDRAW_SHA__: string;
 }
 
+// https://github.com/facebook/create-react-app/blob/ddcb7d5/packages/react-scripts/lib/react-app.d.ts
+declare namespace NodeJS {
+  interface ProcessEnv {
+    readonly REACT_APP_BACKEND_V1_GET_URL: string;
+    readonly REACT_APP_BACKEND_V2_GET_URL: string;
+    readonly REACT_APP_BACKEND_V2_POST_URL: string;
+    readonly REACT_APP_SOCKET_SERVER_URL: string;
+  }
+}
+
 interface Clipboard extends EventTarget {
   write(data: any[]): Promise<void>;
 }