7 |
Missing BACKEND_URL env variable
8 |
Here's a video tutorial on how to update your backend URL environment variable.
9 |
There's a file called .env that contains the environmental variables for your project.
10 |
There's one variable called BACKEND_URL that needs to be manually set by yourself.
11 |
12 | - Make sure you backend is running on port 3001.
13 | - Open your API and copy the API host.
14 | - Open the .env file (do not open the .env.example)
15 | - Add a new variable BACKEND_URL=your api host
16 | - Replace your api host with the public API URL of your flask backend sever running at port 3001
17 |
18 |

19 |
Note: If you are publishing your website to Heroku, Render.com or any other hosting you probably need to follow other steps.
20 |
21 | );
22 |
--------------------------------------------------------------------------------
/requirements.txt:
--------------------------------------------------------------------------------
1 | -i https://pypi.org/simple
2 | alembic==1.5.4; python_version >= '2.7' and python_version not in '3.0, 3.1, 3.2, 3.3, 3.4, 3.5'
3 | certifi==2020.12.5
4 | click==7.1.2; python_version >= '2.7' and python_version not in '3.0, 3.1, 3.2, 3.3, 3.4'
5 | cloudinary==1.24.0
6 | flask==1.1.2
7 | flask-admin==1.5.7
8 | flask-cors==3.0.10
9 | flask-migrate==2.6.0
10 | flask-sqlalchemy==2.4.4
11 | flask-swagger==0.2.14
12 | gunicorn==20.0.4
13 | itsdangerous==1.1.0; python_version >= '2.7' and python_version not in '3.0, 3.1, 3.2, 3.3'
14 | jinja2==2.11.3; python_version >= '2.7' and python_version not in '3.0, 3.1, 3.2, 3.3, 3.4'
15 | mako==1.1.4; python_version >= '2.7' and python_version not in '3.0, 3.1, 3.2, 3.3'
16 | markupsafe==1.1.1; python_version >= '2.7' and python_version not in '3.0, 3.1, 3.2, 3.3'
17 | psycopg2-binary==2.8.6
18 | python-dateutil==2.8.1; python_version >= '2.7' and python_version not in '3.0, 3.1, 3.2, 3.3'
19 | python-dotenv==0.15.0
20 | python-editor==1.0.4
21 | pyyaml==5.4.1; python_version >= '2.7' and python_version not in '3.0, 3.1, 3.2, 3.3, 3.4, 3.5'
22 | six==1.15.0; python_version >= '2.7' and python_version not in '3.0, 3.1, 3.2, 3.3'
23 | sqlalchemy==1.3.23
24 | urllib3==1.26.3; python_version >= '2.7' and python_version not in '3.0, 3.1, 3.2, 3.3, 3.4' and python_version < '4'
25 | werkzeug==1.0.1; python_version >= '2.7' and python_version not in '3.0, 3.1, 3.2, 3.3, 3.4'
26 | wtforms==2.3.3
27 |
--------------------------------------------------------------------------------
/webpack.common.js:
--------------------------------------------------------------------------------
1 | const webpack = require('webpack');
2 | const path = require('path');
3 | const HtmlWebpackPlugin = require('html-webpack-plugin');
4 | const Dotenv = require('dotenv-webpack');
5 |
6 | module.exports = {
7 | entry: [
8 | './src/front/js/index.js'
9 | ],
10 | output: {
11 | filename: 'bundle.js',
12 | path: path.resolve(__dirname, 'public'),
13 | publicPath: '/'
14 | },
15 | module: {
16 | rules: [
17 | {
18 | test: /\.(js|jsx)$/,
19 | exclude: /node_modules/,
20 | use: ['babel-loader']
21 | },
22 | {
23 | test: /\.(css|scss)$/, use: [{
24 | loader: "style-loader" // creates style nodes from JS strings
25 | }, {
26 | loader: "css-loader" // translates CSS into CommonJS
27 | }]
28 | }, //css only files
29 | {
30 | test: /\.(png|svg|jpg|gif|jpeg|webp)$/, use: {
31 | loader: 'file-loader',
32 | options: { name: '[name].[ext]' }
33 | }
34 | }, //for images
35 | { test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/, use: ['file-loader'] } //for fonts
36 | ]
37 | },
38 | resolve: {
39 | extensions: ['*', '.js']
40 | },
41 | plugins: [
42 | new HtmlWebpackPlugin({
43 | favicon: '4geeks.ico',
44 | template: 'template.html'
45 | }),
46 | new Dotenv({ safe: true, systemvars: true })
47 | ]
48 | };
--------------------------------------------------------------------------------
/render.yaml:
--------------------------------------------------------------------------------
1 | # This file was generated by Render's heroku-import Heroku CLI plugin
2 | # https://www.npmjs.com/package/@renderinc/heroku-import
3 | # Schema documented at https://render.com/docs/yaml-spec
4 | services:
5 | - type: web # valid values: https://render.com/docs/yaml-spec#type
6 | region: ohio
7 | name: sample-service-name
8 | env: python # valid values: https://render.com/docs/yaml-spec#environment
9 | buildCommand: "./render_build.sh"
10 | startCommand: "gunicorn wsgi --chdir ./src/"
11 | plan: free # optional; defaults to starter
12 | numInstances: 1
13 | envVars:
14 | - key: BASENAME # Imported from Heroku app
15 | value: /
16 | - key: FLASK_APP # Imported from Heroku app
17 | value: src/app.py
18 | - key: FLASK_DEBUG # Imported from Heroku app
19 | value: 0
20 | - key: FLASK_APP_KEY # Imported from Heroku app
21 | value: "any key works"
22 | - key: PYTHON_VERSION
23 | value: 3.10.6
24 | - key: DATABASE_URL # Render PostgreSQL database
25 | fromDatabase:
26 | name: postgresql-trapezoidal-42170
27 | property: connectionString
28 |
29 | databases: # Render PostgreSQL database
30 | - name: postgresql-trapezoidal-42170
31 | region: ohio
32 | ipAllowList: [] # only allow internal connections
33 | plan: free # optional; defaults to starter
34 |
--------------------------------------------------------------------------------
/public/bundle.js.LICENSE.txt:
--------------------------------------------------------------------------------
1 | /*
2 | object-assign
3 | (c) Sindre Sorhus
4 | @license MIT
5 | */
6 |
7 | /**
8 | * React Router DOM v6.3.0
9 | *
10 | * Copyright (c) Remix Software Inc.
11 | *
12 | * This source code is licensed under the MIT license found in the
13 | * LICENSE.md file in the root directory of this source tree.
14 | *
15 | * @license MIT
16 | */
17 |
18 | /**
19 | * React Router v6.3.0
20 | *
21 | * Copyright (c) Remix Software Inc.
22 | *
23 | * This source code is licensed under the MIT license found in the
24 | * LICENSE.md file in the root directory of this source tree.
25 | *
26 | * @license MIT
27 | */
28 |
29 | /** @license React v0.19.1
30 | * scheduler.production.min.js
31 | *
32 | * Copyright (c) Facebook, Inc. and its affiliates.
33 | *
34 | * This source code is licensed under the MIT license found in the
35 | * LICENSE file in the root directory of this source tree.
36 | */
37 |
38 | /** @license React v16.14.0
39 | * react-dom.production.min.js
40 | *
41 | * Copyright (c) Facebook, Inc. and its affiliates.
42 | *
43 | * This source code is licensed under the MIT license found in the
44 | * LICENSE file in the root directory of this source tree.
45 | */
46 |
47 | /** @license React v16.14.0
48 | * react.production.min.js
49 | *
50 | * Copyright (c) Facebook, Inc. and its affiliates.
51 | *
52 | * This source code is licensed under the MIT license found in the
53 | * LICENSE file in the root directory of this source tree.
54 | */
55 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # ignore all files starting with .
2 | .*
3 |
4 | # track this file .gitignore (i.e. do NOT ignore it)
5 | !.gitignore
6 | !.github
7 | php_errorlog
8 | .log
9 |
10 | # do not ignore gitpod and render files
11 | !.gitpod.Dockerfile
12 | !.welcome
13 | !.devcontainer
14 | !.devcontainer/*
15 | !Dockerfile.render
16 | !.gitpod.yml
17 | !render.yml
18 | !.render-buildpacks.json
19 |
20 | # track webpack configs (i.e. do NOT ignore it)
21 | !composer.json
22 | !webpack.config.js
23 | !package.json
24 | !webpack.production.js
25 | !webpack.development.js
26 |
27 | # track readme.md in the root (i.e. do NOT ignore it)
28 | !README.md
29 |
30 | # ignore OS generated files
31 | ehthumbs.db
32 | Thumbs.db
33 |
34 | # ignore Editor files
35 | *.sublime-project
36 | *.sublime-workspace
37 | *.komodoproject
38 |
39 | # ignore log files and databases
40 | *.log
41 | *.sql
42 | *.sqlite
43 |
44 | # ignore compiled files
45 | *.com
46 | *.class
47 | *.dll
48 | *.exe
49 | *.o
50 | *.so
51 |
52 | # ignore packaged files
53 | *.7z
54 | *.dmg
55 | *.gz
56 | *.iso
57 | *.jar
58 | *.rar
59 | *.tar
60 | *.zip
61 |
62 | # ignore node/grunt dependency directories
63 | node_modules/
64 |
65 | # webpack output
66 | dist/*
67 | !public/
68 | !public/*
69 |
70 | # ignore the dist directory were our bundle files are going to be
71 | !.gitkeep
72 | !.htaccess
73 | !.eslintrc
74 | !.env.example
75 | .now
76 |
77 | # backend stuff
78 | .venv
79 | database.database
80 | database.db
81 | diagram.png
82 | __pycache__/
83 |
--------------------------------------------------------------------------------
/src/front/js/store/flux.js:
--------------------------------------------------------------------------------
1 | const getState = ({ getStore, getActions, setStore }) => {
2 | return {
3 | store: {
4 | message: null,
5 | demo: [
6 | {
7 | title: "FIRST",
8 | background: "white",
9 | initial: "white"
10 | },
11 | {
12 | title: "SECOND",
13 | background: "white",
14 | initial: "white"
15 | }
16 | ]
17 | },
18 | actions: {
19 | // Use getActions to call a function within a fuction
20 | exampleFunction: () => {
21 | getActions().changeColor(0, "green");
22 | },
23 |
24 | getMessage: async () => {
25 | try{
26 | // fetching data from the backend
27 | const resp = await fetch(process.env.BACKEND_URL + "/api/hello")
28 | const data = await resp.json()
29 | setStore({ message: data.message })
30 | // don't forget to return something, that is how the async resolves
31 | return data;
32 | }catch(error){
33 | console.log("Error loading message from backend", error)
34 | }
35 | },
36 | changeColor: (index, color) => {
37 | //get the store
38 | const store = getStore();
39 |
40 | //we have to loop the entire demo array to look for the respective index
41 | //and change its color
42 | const demo = store.demo.map((elm, i) => {
43 | if (i === index) elm.background = color;
44 | return elm;
45 | });
46 |
47 | //reset the global store
48 | setStore({ demo: demo });
49 | }
50 | }
51 | };
52 | };
53 |
54 | export default getState;
55 |
--------------------------------------------------------------------------------
/.devcontainer/devcontainer.json:
--------------------------------------------------------------------------------
1 | // For format details, see https://aka.ms/devcontainer.json. For config options, see the
2 | // README at: https://github.com/devcontainers/templates/tree/main/src/postgres
3 | {
4 | "name": "Python 3 & PostgreSQL",
5 | "dockerComposeFile": "docker-compose.yml",
6 | "service": "app",
7 | "workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}",
8 | "features": {
9 | "ghcr.io/devcontainers/features/github-cli:1": {
10 | "installDirectlyFromGitHubRelease": true,
11 | "version": "latest"
12 | },
13 | "ghcr.io/devcontainers/features/node:1": {
14 | "nodeGypDependencies": true,
15 | "version": "lts"
16 | }
17 | },
18 |
19 | // Features to add to the dev container. More info: https://containers.dev/features.
20 | // "features": {},
21 |
22 | // Use 'forwardPorts' to make a list of ports inside the container available locally.
23 | // This can be used to network with other containers or the host.
24 | "forwardPorts": [3000, 3001],
25 |
26 | "onCreateCommand": "(cp .env.example .env || echo \".env creation failed\"); (pipenv install || echo \"pipenv install failed\"); (bash database.sh || echo \"database.sh failed\");",
27 | // Use 'postCreateCommand' to run commands after the container is created.
28 | "postCreateCommand": "python docs/assets/greeting.py both > /workspaces/.codespaces/shared/first-run-notice.txt && npm install",
29 |
30 | // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
31 | // "remoteUser": "root"
32 | }
33 |
--------------------------------------------------------------------------------
/src/front/js/layout.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { BrowserRouter, Route, Routes } from "react-router-dom";
3 | import ScrollToTop from "./component/scrollToTop";
4 | import { BackendURL } from "./component/backendURL";
5 |
6 | import { Home } from "./pages/home";
7 | import { Demo } from "./pages/demo";
8 | import { Single } from "./pages/single";
9 | import injectContext from "./store/appContext";
10 |
11 | import { Navbar } from "./component/navbar";
12 | import { Footer } from "./component/footer";
13 |
14 | //create your first component
15 | const Layout = () => {
16 | //the basename is used when your project is published in a subdirectory and not in the root of the domain
17 | // you can set the basename on the .env file located at the root of this project, E.g: BASENAME=/react-hello-webapp/
18 | const basename = process.env.BASENAME || "";
19 |
20 | if(!process.env.BACKEND_URL || process.env.BACKEND_URL == "") return