Merge pull request #165 from golemfactory/update-react-templates-to-v…

…ersion-3.0 Update react templates: remove autogenerated .env files
golemfactory · Feb 15, 2024 · efbdcfd · efbdcfd
2 parents 305e204 + a29499b
commit efbdcfd
Show file tree

Hide file tree

Showing 12 changed files with 179 additions and 80 deletions.
diff --git a/data/project-templates/react-js/src/App.css b/data/project-templates/react-js/src/App.css
@@ -27,8 +27,15 @@
 }
 
 .installation-instructions {
-  max-width: 32em;
+  max-width: 48em;
   text-align: left;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+}
+
+.connect-button {
+  align-self: flex-end;
 }
 
 .node-version-check-wrapper {

diff --git a/data/project-templates/react-js/src/App.jsx b/data/project-templates/react-js/src/App.jsx
@@ -4,40 +4,27 @@ import viteLogo from "./assets/vite.svg";
 import "./App.css";
 import { useYagna } from "@golem-sdk/react";
 import { NodeVersionCheck } from "./components/NodeVersionCheck.jsx";
+import { ConnectToYagna } from "./components/ConnectToYagna.jsx";
 
 function App() {
   const { isConnected } = useYagna();
 
   return (
     <>
       <div>
-        <a href="https://docs.golem.network" target="_blank">
+        <a href="https://docs.golem.network" target="_blank" rel="noreferrer">
           <img src={golemLogo} className="logo" alt="Golem logo" />
         </a>
-        <a href="https://vitejs.dev" target="_blank">
+        <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
           <img src={viteLogo} className="logo" alt="Vite logo" />
         </a>
-        <a href="https://react.dev" target="_blank">
+        <a href="https://react.dev" target="_blank" rel="noreferrer">
           <img src={reactLogo} className="logo react" alt="React logo" />
         </a>
       </div>
       <h1>Golem + Vite + React</h1>
       <h2>Yagna is {isConnected ? "connected" : "not connected"}</h2>
-      {!isConnected && (
-        <p className="installation-instructions">
-          Looks like yagna is not running on your local machine. Please follow the instructions in the{" "}
-          <a
-            className="link"
-            target="_blank"
-            href="https://docs.golem.network/docs/creators/javascript/examples/tools/yagna-installation-for-requestors"
-          >
-            quickstart
-          </a>
-          . Make sure to start the process with the <code>--api-allow-origin</code> flag:
-          <br />
-          <code>{`yagna service run --api-allow-origin='${window.location.origin}'`}</code>
-        </p>
-      )}
+      {!isConnected && <ConnectToYagna />}
       <div className="card">{isConnected && <NodeVersionCheck />}</div>
       <div className="card">
         <p>

diff --git a/data/project-templates/react-js/src/components/ConnectToYagna.jsx b/data/project-templates/react-js/src/components/ConnectToYagna.jsx
@@ -0,0 +1,50 @@
+import { useYagna } from "@golem-sdk/react";
+import { useRef } from "react";
+
+export function ConnectToYagna() {
+  const { setYagnaOptions } = useYagna();
+  const appKeyInputRef = useRef(null);
+  const urlInputRef = useRef(null);
+
+  return (
+    <div className="installation-instructions">
+      <p>
+        Make sure yagna is running on your local machine. Please follow the instructions in this{" "}
+        <a
+          className="link"
+          target="_blank"
+          href="https://docs.golem.network/docs/creators/javascript/examples/tools/yagna-installation-for-requestors"
+          rel="noreferrer"
+        >
+          quickstart
+        </a>{" "}
+        to learn more about how to install and run yagna.
+      </p>
+      <p>
+        Make sure to start the process with the <i> --api-allow-origin</i> flag:
+        <code>{`yagna service run --api-allow-origin='${window.location.origin}'`}</code>
+      </p>
+      <label>
+        Yagna app-key:
+        <input type="text" placeholder="Enter your app-key" ref={appKeyInputRef} />
+      </label>
+      <label>
+        Yagna url:
+        <input type="text" placeholder="Enter your url" ref={urlInputRef} defaultValue="http://127.0.0.1:7465" />
+      </label>
+      <button
+        className="connect-button"
+        onClick={() => {
+          if (appKeyInputRef.current && urlInputRef.current) {
+            setYagnaOptions({
+              apiKey: appKeyInputRef.current.value,
+              basePath: urlInputRef.current.value,
+            });
+          }
+        }}
+      >
+        Connect to Yagna
+      </button>
+    </div>
+  );
+}
diff --git a/data/project-templates/react-js/src/index.css b/data/project-templates/react-js/src/index.css
@@ -47,12 +47,32 @@ button {
   cursor: pointer;
   transition: border-color 0.25s;
 }
-
 button:hover {
   border-color: #646cff;
 }
-
 button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
+
+code {
+  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+  font-size: 14px;
+  color: #f8f8f8;
+  background-color: #2b3440;
+  padding: 4px;
+  border-radius: 4px;
+  display: inline-block;
+}
+
+input {
+  border-radius: 8px;
+  border: 1px solid #d1d1d1;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #f8f8f8;
+  transition: border-color 0.25s;
+  color: #213547;
+}
diff --git a/data/project-templates/react-js/src/main.jsx b/data/project-templates/react-js/src/main.jsx
@@ -4,17 +4,9 @@ import App from "./App.jsx";
 import "./index.css";
 import { YagnaProvider } from "@golem-sdk/react";
 
-if (!import.meta.env.VITE_YAGNA_APPKEY) {
-  throw new Error("VITE_YAGNA_APPKEY env variable is not set. Please add it to the .env file.");
-}
-
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
-    <YagnaProvider
-      config={{
-        yagnaAppKey: import.meta.env.VITE_YAGNA_APPKEY,
-      }}
-    >
+    <YagnaProvider>
       <App />
     </YagnaProvider>
   </React.StrictMode>,

diff --git a/data/project-templates/react-ts/src/App.css b/data/project-templates/react-ts/src/App.css
@@ -27,8 +27,15 @@
 }
 
 .installation-instructions {
-  max-width: 32em;
+  max-width: 48em;
   text-align: left;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+}
+
+.connect-button {
+  align-self: flex-end;
 }
 
 .node-version-check-wrapper {

diff --git a/data/project-templates/react-ts/src/App.tsx b/data/project-templates/react-ts/src/App.tsx
@@ -4,40 +4,27 @@ import viteLogo from "./assets/vite.svg";
 import "./App.css";
 import { useYagna } from "@golem-sdk/react";
 import { NodeVersionCheck } from "./components/NodeVersionCheck";
+import { ConnectToYagna } from "./components/ConnectToYagna";
 
 function App() {
   const { isConnected } = useYagna();
 
   return (
     <>
       <div>
-        <a href="https://docs.golem.network" target="_blank">
+        <a href="https://docs.golem.network" target="_blank" rel="noreferrer">
           <img src={golemLogo} className="logo" alt="Golem logo" />
         </a>
-        <a href="https://vitejs.dev" target="_blank">
+        <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
           <img src={viteLogo} className="logo" alt="Vite logo" />
         </a>
-        <a href="https://react.dev" target="_blank">
+        <a href="https://react.dev" target="_blank" rel="noreferrer">
           <img src={reactLogo} className="logo react" alt="React logo" />
         </a>
       </div>
       <h1>Golem + Vite + React</h1>
       <h2>Yagna is {isConnected ? "connected" : "not connected"}</h2>
-      {!isConnected && (
-        <p className="installation-instructions">
-          Looks like yagna is not running on your local machine. Please follow the instructions in the{" "}
-          <a
-            className="link"
-            target="_blank"
-            href="https://docs.golem.network/docs/creators/javascript/examples/tools/yagna-installation-for-requestors"
-          >
-            quickstart
-          </a>
-          . Make sure to start the process with the <code>--api-allow-origin</code> flag:
-          <br />
-          <code>{`yagna service run --api-allow-origin='${window.location.origin}'`}</code>
-        </p>
-      )}
+      {!isConnected && <ConnectToYagna />}
       <div className="card">{isConnected && <NodeVersionCheck />}</div>
       <div className="card">
         <p>

diff --git a/data/project-templates/react-ts/src/components/ConnectToYagna.tsx b/data/project-templates/react-ts/src/components/ConnectToYagna.tsx
@@ -0,0 +1,50 @@
+import { useYagna } from "@golem-sdk/react";
+import { useRef } from "react";
+
+export function ConnectToYagna() {
+  const { setYagnaOptions } = useYagna();
+  const appKeyInputRef = useRef<HTMLInputElement>(null);
+  const urlInputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <div className="installation-instructions">
+      <p>
+        Make sure yagna is running on your local machine. Please follow the instructions in this{" "}
+        <a
+          className="link"
+          target="_blank"
+          href="https://docs.golem.network/docs/creators/javascript/examples/tools/yagna-installation-for-requestors"
+          rel="noreferrer"
+        >
+          quickstart
+        </a>{" "}
+        to learn more about how to install and run yagna.
+      </p>
+      <p>
+        Make sure to start the process with the <i> --api-allow-origin</i> flag:
+        <code>{`yagna service run --api-allow-origin='${window.location.origin}'`}</code>
+      </p>
+      <label>
+        Yagna app-key:
+        <input type="text" placeholder="Enter your app-key" ref={appKeyInputRef} />
+      </label>
+      <label>
+        Yagna url:
+        <input type="text" placeholder="Enter your url" ref={urlInputRef} defaultValue="http://127.0.0.1:7465" />
+      </label>
+      <button
+        className="connect-button"
+        onClick={() => {
+          if (appKeyInputRef.current && urlInputRef.current) {
+            setYagnaOptions({
+              apiKey: appKeyInputRef.current.value,
+              basePath: urlInputRef.current.value,
+            });
+          }
+        }}
+      >
+        Connect to Yagna
+      </button>
+    </div>
+  );
+}
diff --git a/data/project-templates/react-ts/src/components/NodeVersionCheckTask.tsx b/data/project-templates/react-ts/src/components/NodeVersionCheckTask.tsx
@@ -3,7 +3,7 @@ import { TaskExecutor, useTask, Worker } from "@golem-sdk/react";
 export function NodeVersionCheckTask({ executor }: { executor: TaskExecutor }) {
   const { isRunning, result, run, error } = useTask<string>(executor);
 
-  const getNodeVersionTask: Worker<unknown, string> = async (ctx) => {
+  const getNodeVersionTask: Worker<string> = async (ctx) => {
     return (await ctx.run("node -v")).stdout?.toString() ?? "No version information";
   };
 

diff --git a/data/project-templates/react-ts/src/index.css b/data/project-templates/react-ts/src/index.css
@@ -54,3 +54,25 @@ button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
+
+code {
+  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+  font-size: 14px;
+  color: #f8f8f8;
+  background-color: #2b3440;
+  padding: 4px;
+  border-radius: 4px;
+  display: inline-block;
+}
+
+input {
+  border-radius: 8px;
+  border: 1px solid #d1d1d1;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #f8f8f8;
+  transition: border-color 0.25s;
+  color: #213547;
+}
diff --git a/data/project-templates/react-ts/src/main.tsx b/data/project-templates/react-ts/src/main.tsx
@@ -4,17 +4,9 @@ import App from "./App.tsx";
 import "./index.css";
 import { YagnaProvider } from "@golem-sdk/react";
 
-if (!import.meta.env.VITE_YAGNA_APPKEY) {
-  throw new Error("VITE_YAGNA_APPKEY env variable is not set. Please add it to the .env file.");
-}
-
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <YagnaProvider
-      config={{
-        yagnaAppKey: import.meta.env.VITE_YAGNA_APPKEY,
-      }}
-    >
+    <YagnaProvider>
       <App />
     </YagnaProvider>
   </React.StrictMode>,

diff --git a/src/new/new.action.ts b/src/new/new.action.ts
@@ -189,29 +189,14 @@ export async function newAction(providedName: string, options: NewOptions) {
 
   installDependencies(options, projectPath);
 
-  const isReactProject = template.startsWith("react");
-  if (isReactProject) {
-    const envFile = join(projectPath, ".env");
-    try {
-      await writeFile(envFile, `VITE_YAGNA_APPKEY=${process.env.YAGNA_APPKEY || ""}`);
-    } catch (e) {
-      console.error(`Error: Failed to write ${envFile}: ${e}`);
-      process.exit(1);
-    }
-  }
-
   console.log(`Project created successfully in ${projectPath}.`);
 
-  if (!process.env.YAGNA_APPKEY) {
-    if (isReactProject) {
-      console.log(
-        "NOTE: You do not seem to have YAGNA_APPKEY environment variable defined. To successfully run your new React application, you will need to define the VITE_YAGNA_APPKEY environment variable in your .env file.",
-      );
-    } else {
-      console.log(
-        "NOTE: You do not seem to have YAGNA_APPKEY environment variable defined. You will need to define it or provide a .env file with it to run your new application.",
-      );
-    }
+  // react templates don't read the app key from env
+  const isReactProject = template.startsWith("react");
+  if (!process.env.YAGNA_APPKEY && !isReactProject) {
+    console.log(
+      "NOTE: You do not seem to have YAGNA_APPKEY environment variable defined. You will need to define it or provide a .env file with it to run your new application.",
+    );
   }
 
   // TODO: Show some next steps, or pull it from template directory.