Merge pull request #3 from monkeyjp/main

feat: add BackendURL component and improve env variable handling

Author: rosinni

.env.example

@@ -1,5 +1,5 @@
 # This file includes global variables that will be available inside your project
-# 1. In the front end code you can access this variables like this: console.log(process.env.VARIABLE_NAME)
+# 1. In the front end code you can access this variables like this: console.log(import.meta.env.VARIABLE_NAME)
 # 1. In the back end code you access the variable by importing os and then typing print(os.getenv('VARIABLE_NAME'))
 
 # Back-End Variables
@@ -10,5 +10,5 @@ FLASK_DEBUG=1
 DEBUG=TRUE
 
 # Front-End Variables
-BASENAME=/
-#BACKEND_URL=
+VITE_BASENAME=/
+#VITE_BACKEND_URL=

render.yaml

@@ -11,7 +11,7 @@ services:
       plan: free # optional; defaults to starter
       numInstances: 1
       envVars:
-          - key: BASENAME # Imported from Heroku app
+          - key: VITE_BASENAME # Imported from Heroku app
             value: /
           - key: FLASK_APP # Imported from Heroku app
             value: src/app.py

src/front/components/BackendURL.jsx

@@ -0,0 +1,21 @@
+import React, { Component } from "react";
+import envFile from "../../../docs/assets/env-file.png"
+
+const Dark = ({children}) => <span className="bg-dark text-white px-1 rounded">{children}</span>;
+export const BackendURL = () => (
+	<div className="mt-5 pt-5 w-50 mx-auto">
+		<h2>Missing BACKEND_URL env variable</h2>
+		<p>Here's a video tutorial on <a target="_blank" href="https://www.awesomescreenshot.com/video/16498567?key=72dbf905fe4fa6d3224783d02a8b1b9c">how to update your backend URL environment variable.</a></p>
+		<p>There's a file called <Dark>.env</Dark> that contains the environmental variables for your project.</p>
+		<p>There's one variable called <Dark>BACKEND_URL</Dark> that needs to be manually set by yourself.</p>
+		<ol>
+			<li>Make sure you backend is running on port 3001.</li>
+			<li>Open your API and copy the API host.</li>
+			<li>Open the .env file (do not open the .env.example)</li>
+			<li>Add a new variable BACKEND_URL=<Dark>your api host</Dark></li>
+			<li>Replace <Dark>your api host</Dark> with the public API URL of your flask backend sever running at port 3001</li>
+		</ol>
+		<img src={envFile} />
+		<p>Note: If you are publishing your website to Heroku, Render.com or any other hosting you probably need to follow other steps.</p>
+	</div>
+);

src/front/main.jsx

@@ -4,8 +4,16 @@ import './index.css'  // Global styles for your application
 import { RouterProvider } from "react-router-dom";  // Import RouterProvider to use the router
 import { router } from "./routes";  // Import the router configuration
 import { StoreProvider } from './hooks/useGlobalReducer';  // Import the StoreProvider for global state management
+import { BackendURL } from './components/BackendURL';
 
 const Main = () => {
+    console.log(import.meta.env.VITE_BACKEND_URL);
+    
+    if(! import.meta.env.VITE_BACKEND_URL ||  import.meta.env.VITE_BACKEND_URL == "") return (
+        <React.StrictMode>
+              <BackendURL/ >
+        </React.StrictMode>
+        );
     return (
         <React.StrictMode>  
             {/* Provide global state to all components */}