finished version 0.1

.env.example

@@ -2,12 +2,11 @@
 # 1. In the front end code you can access this variables like this: console.log(process.env.VARIABLE_NAME)
 # 1. In the back end code you access the variable by importing os and then typing print(os.getEnv('VARIABLE_NAME'))
 
-# Front-End Variables
-BASENAME=/
-
-
 # Back-End Variables
 DB_CONNECTION_STRING=mysql+mysqlconnector://root@localhost/example
 FLASK_APP_KEY="any key works"
-FLASK_APP=src/main.py
-FLASK_ENV=development
+FLASK_APP=src/app.py
+FLASK_ENV=development
+
+# Front-End Variables
+BASENAME=/

.gitpod.yml

@@ -6,6 +6,7 @@ ports:
 tasks:
     - init: >
         cp .env.example .env;
+        echo "" >> .env && echo "BACKEND_URL=https://3001-${GITPOD_WORKSPACE_URL:8}" >> .env;
         pipenv install;
         mysql -u root -e "CREATE DATABASE example";
         pipenv run init;

Pipfile

@@ -22,7 +22,7 @@ mysqlclient = "*"
 python_version = "3.8"
 
 [scripts]
-start="flask run -p 3000 -h 0.0.0.0"
+start="flask run -p 3001 -h 0.0.0.0"
 init="flask db init"
 migrate="flask db migrate"
 upgrade="flask db upgrade"

src/api/routes.py

@@ -13,7 +13,7 @@
 def handle_hello():
 
     response_body = {
-        "hello": "world"
+        "message": "Hello! I'm a message that came from the backend"
     }
 
     return jsonify(response_body), 200

src/app.py

@@ -56,5 +56,5 @@ def serve_any_other_file(path):
 
 # this only runs if `$ python src/main.py` is executed
 if __name__ == '__main__':
-    PORT = int(os.environ.get('PORT', 3000))
+    PORT = int(os.environ.get('PORT', 3001))
     app.run(host='0.0.0.0', port=PORT, debug=DEBUG)

src/front/js/store/appContext.js

@@ -27,10 +27,8 @@ const injectContext = PassedComponent => {
 			 * This function is the equivalent to "window.onLoad", it only runs once on the entire application lifetime
 			 * you should do your ajax requests or fetch api requests here. Do not use setState() to save data in the
 			 * store, instead use actions, like this:
-			 *
-			 * state.actions.loadSomeData(); <---- calling this function from the flux.js actions
-			 *
 			 **/
+			state.actions.getMessage(); // <---- calling this function from the flux.js actions
 		}, []);
 
 		// The initial value for the context is not null anymore, but the current state of this component,

src/front/js/store/flux.js

@@ -1,6 +1,7 @@
 const getState = ({ getStore, getActions, setStore }) => {
 	return {
 		store: {
+			message: null,
 			demo: [
 				{
 					title: "FIRST",
@@ -19,10 +20,12 @@ const getState = ({ getStore, getActions, setStore }) => {
 			exampleFunction: () => {
 				getActions().changeColor(0, "green");
 			},
-			loadSomeData: () => {
-				/**
-					fetch().then().then(data => setStore({ "foo": data.bar }))
-				*/
+			getMessage: () => {
+				// fetching data from the backend
+				fetch(process.env.BACKEND_URL + "/api/hello")
+					.then(resp => resp.json())
+					.then(data => setStore({ message: data.message }))
+					.catch(error => console.log("Error loading message from backend", error));
 			},
 			changeColor: (index, color) => {
 				//get the store

src/front/js/views/home.js

@@ -1,15 +1,24 @@
-import React from "react";
+import React, { useContext } from "react";
+import { Context } from "../store/appContext";
 import rigoImage from "../../img/rigo-baby.jpg";
 import "../../styles/home.scss";
 
-export const Home = () => (
-	<div className="text-center mt-5">
-		<h1>Hello Rigo!</h1>
-		<p>
-			<img src={rigoImage} />
-		</p>
-		<a href="#" className="btn btn-success">
-			If you see this green button, bootstrap is working
-		</a>
-	</div>
-);
+export const Home = () => {
+	const { store, actions } = useContext(Context);
+
+	return (
+		<div className="text-center mt-5">
+			<h1>Hello Rigo!</h1>
+			<p>
+				<img src={rigoImage} />
+			</p>
+			<div className="alert alert-info">{store.message || "Loading message from the backend..."}</div>
+			<p>
+				This boilerplate comes with lots of documentation:{" "}
+				<a href="https://github.com/4GeeksAcademy/react-flask-hello/tree/95e0540bd1422249c3004f149825285118594325/docs">
+					Read documentation
+				</a>
+			</p>
+		</div>
+	);
+};