add GATSBY_API_URL param

README.md

@@ -8,3 +8,24 @@ Once the setup guide is complete you will be running:
 
 - `siad` configured as a Skynet Portal
 - an nginx webserver serving webportal
+
+## Web application
+
+### Development
+
+Use `yarn start` to start the development server.
+
+### Production build
+
+Use `yarn build` to compile the application to `/public` directory.
+
+### Build parameters
+
+You can use the below build parameters to customize your application. You can use them both on development and production builds.
+
+- development example `GATSBY_API_URL=https://siasky.dev yarn start`
+- production example `GATSBY_API_URL=https://siasky.net yarn build`
+
+#### List of available parameters
+
+- `GATSBY_API_URL`: you can override the api url if it is different than the location origin

src/components/CodeExamples/CodeExamples.js

@@ -5,7 +5,7 @@ import { javascript, go, python, bash } from "react-syntax-highlighter/dist/esm/
 import Colors from "./Colors";
 import * as snippets from "./Code";
 import "./CodeExamples.scss";
-import LocationContext from "../../LocationContext";
+import AppContext from "../../AppContext";
 
 SyntaxHighlighter.registerLanguage("javascript", javascript);
 SyntaxHighlighter.registerLanguage("go", go);
@@ -14,9 +14,9 @@ SyntaxHighlighter.registerLanguage("bash", bash);
 
 export default function CodeExamples() {
   const [active, setActive] = useState(1);
-  const location = useContext(LocationContext);
+  const { apiUrl } = useContext(AppContext);
   const interpolateRegExp = new RegExp("https://siasky.net", "g");
-  const interpolateSnippet = snippet => snippet.replace(interpolateRegExp, location.origin);
+  const interpolateSnippet = snippet => snippet.replace(interpolateRegExp, apiUrl);
 
   return (
     <div className="code-examples">

src/components/HomeUpload/HomeUpload.js

@@ -6,11 +6,11 @@ import shortid from "shortid";
 import { Button, UploadFile } from "../";
 import { Deco3, Deco4, Deco5, Folder, DownArrow } from "../../svg";
 import "./HomeUpload.scss";
-import LocationContext from "../../LocationContext";
+import AppContext from "../../AppContext";
 
 export default function HomeUpload() {
   const [files, setFiles] = useState([]);
-  const location = useContext(LocationContext);
+  const { apiUrl } = useContext(AppContext);
 
   const handleDrop = async acceptedFiles => {
     setFiles(previousFiles => [...acceptedFiles.map(file => ({ file, status: "uploading" })), ...previousFiles]);
@@ -24,7 +24,7 @@ export default function HomeUpload() {
           {
             ...previousFiles[index],
             status,
-            url: `${location.origin}/${skylink}`
+            url: `${apiUrl}/${skylink}`
           },
           ...previousFiles.slice(index + 1)
         ];
@@ -37,7 +37,7 @@ export default function HomeUpload() {
         fd.append("file", file);
 
         const uuid = shortid.generate();
-        const response = await fetch(`${location.origin}/skynet/skyfile/${uuid}`, { method: "POST", body: fd });
+        const response = await fetch(`${apiUrl}/skynet/skyfile/${uuid}`, { method: "POST", body: fd });
         const { skylink } = await response.json();
 
         onComplete(file, "complete", skylink);

src/pages/index.js

@@ -1,16 +1,23 @@
-import React from "react";
+import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import SEO from "../components/seo";
 import { App } from "../components";
 import "../global.scss";
-import LocationContext from "../LocationContext";
+import AppContext from "../AppContext";
 
 export default function IndexPage({ location }) {
+  const context = useMemo(
+    () => ({
+      apiUrl: process.env.GATSBY_API_URL ?? location.origin
+    }),
+    [location.origin]
+  );
+
   return (
-    <LocationContext.Provider value={location}>
+    <AppContext.Provider value={context}>
       <SEO />
       <App />
-    </LocationContext.Provider>
+    </AppContext.Provider>
   );
 }