make use of env variables in frontend

frontend/src/Documents/DocumentEdit.tsx

@@ -14,6 +14,7 @@ import { RouteComponentProps, withRouter } from "react-router";
 import { Dispatch } from "redux";
 import { IDocumentJSON } from "~../../src/entity/Document";
 import { showDeletionToast, showSharedToast } from "~AppToaster";
+import { webRoot } from "~env";
 import { LoadingStub } from "~LoadingStub";
 import { NotFound } from "~NotFound";
 import {
@@ -176,7 +177,7 @@ export class DocumentEditComponent extends React.PureComponent<
     public copyLink() {
         const doc = this.props.allDocs[this.state.id];
         navigator.clipboard.writeText(
-            `http://localhost:1234/shared/${this.props.username}/${doc.id}`,
+            `http://${webRoot}/shared/${this.props.username}/${doc.id}`,
         );
         showSharedToast();
     }

frontend/src/env.ts

@@ -0,0 +1,2 @@
+export const apiRoot = process.env.API_ROOT || "http://localhost:3000";
+export const webRoot = process.env.WEB_ROOT || "http://localhost:1234";

frontend/src/redux/api/utils.ts

@@ -1,3 +1,5 @@
+import { apiRoot } from "~env";
+
 let token: string | null;
 
 export function setToken(_token: string) {
@@ -12,8 +14,6 @@ export function deleteToken(_token: string) {
     token = null;
 }
 
-const root = "http://localhost:3000";
-
 export async function fetchJSON(
     path: string,
     method: string,
@@ -23,7 +23,7 @@ export async function fetchJSON(
     if (typeof body === "object") {
         body = JSON.stringify(body);
     }
-    const response = await fetch(root + path, {
+    const response = await fetch(apiRoot + path, {
         method,
         body,
         headers: {