36 | 
37 |
"
42 |
--------------------------------------------------------------------------------
/src/app.py:
--------------------------------------------------------------------------------
1 | """
2 | This module takes care of starting the API Server, Loading the DB and Adding the endpoints
3 | """
4 | import os
5 | from flask import Flask, request, jsonify, url_for, send_from_directory
6 | from flask_migrate import Migrate
7 | from flask_swagger import swagger
8 | from api.utils import APIException, generate_sitemap
9 | from api.models import db
10 | from api.routes import api
11 | from api.admin import setup_admin
12 | from api.commands import setup_commands
13 |
14 | # from models import Person
15 |
16 | ENV = "development" if os.getenv("FLASK_DEBUG") == "1" else "production"
17 | static_file_dir = os.path.join(os.path.dirname(
18 | os.path.realpath(__file__)), '../public/')
19 | app = Flask(__name__)
20 | app.url_map.strict_slashes = False
21 |
22 | # database condiguration
23 | db_url = os.getenv("DATABASE_URL")
24 | if db_url is not None:
25 | app.config['SQLALCHEMY_DATABASE_URI'] = db_url.replace(
26 | "postgres://", "postgresql://")
27 | else:
28 | app.config['SQLALCHEMY_DATABASE_URI'] = "sqlite:////tmp/test.db"
29 |
30 | app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
31 | MIGRATE = Migrate(app, db, compare_type=True)
32 | db.init_app(app)
33 |
34 | # add the admin
35 | setup_admin(app)
36 |
37 | # add the admin
38 | setup_commands(app)
39 |
40 | # Add all endpoints form the API with a "api" prefix
41 | app.register_blueprint(api, url_prefix='/api')
42 |
43 | # Handle/serialize errors like a JSON object
44 |
45 |
46 | @app.errorhandler(APIException)
47 | def handle_invalid_usage(error):
48 | return jsonify(error.to_dict()), error.status_code
49 |
50 | # generate sitemap with all your endpoints
51 |
52 |
53 | @app.route('/')
54 | def sitemap():
55 | if ENV == "development":
56 | return generate_sitemap(app)
57 | return send_from_directory(static_file_dir, 'index.html')
58 |
59 | # any other endpoint will try to serve it like a static file
60 | @app.route('/
37 | Rigo welcomes you to your API!!
38 |API HOST:
39 |Start working on your project by following the Quick Start
40 |Remember to specify a real endpoint path like:
41 |- """+links_html+"
7 | 
19 |
21 | );
22 |
--------------------------------------------------------------------------------
/src/front/js/component/footer.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 |
3 | export const Footer = () => (
4 |
10 | );
11 |
--------------------------------------------------------------------------------
/src/front/js/component/navbar.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Link } from "react-router-dom";
3 |
4 | export const Navbar = () => {
5 | return (
6 |
18 | );
19 | };
20 |
--------------------------------------------------------------------------------
/src/front/js/component/scrollToTop.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 |
4 | class ScrollToTop extends React.Component {
5 | componentDidUpdate(prevProps) {
6 | if (this.props.location !== prevProps.location) {
7 | window.scrollTo(0, 0);
8 | }
9 | }
10 |
11 | render() {
12 | return this.props.children;
13 | }
14 | }
15 |
16 | export default ScrollToTop;
17 | ScrollToTop.propTypes = {
18 | location: PropTypes.object,
19 | children: PropTypes.any
20 | };
21 |
--------------------------------------------------------------------------------
/src/front/js/index.js:
--------------------------------------------------------------------------------
1 | //import react into the bundle
2 | import React from "react";
3 | import ReactDOM from "react-dom";
4 |
5 | //include your index.scss file into the bundle
6 | import "../styles/index.css";
7 |
8 | //import your own components
9 | import Layout from "./layout";
10 |
11 | //render your react application
12 | ReactDOM.render(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
There's one variable called
-
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 |
Note: If you are publishing your website to Heroku, Render.com or any other hosting you probably need to follow other steps.
20 |
24 |
25 |
26 |
28 | Not found!} />
32 |
33 |
34 |
35 |
36 |
37 | );
38 | };
39 |
40 | export default injectContext(Layout);
41 |
--------------------------------------------------------------------------------
/src/front/js/pages/demo.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useContext } from "react";
2 | import { Link } from "react-router-dom";
3 |
4 | import { Context } from "../store/appContext";
5 |
6 | export const Demo = () => {
7 | const { store, actions } = useContext(Context);
8 |
9 | return (
10 |
11 |
36 | 37 | 38 | 39 |
40 | );
41 | };
42 |
--------------------------------------------------------------------------------
/src/front/js/pages/home.js:
--------------------------------------------------------------------------------
1 | import React, { useContext } from "react";
2 | import { Context } from "../store/appContext";
3 | import rigoImageUrl from "../../img/rigo-baby.jpg";
4 | import "../../styles/home.css";
5 |
6 | export const Home = () => {
7 | const { store, actions } = useContext(Context);
8 |
9 | return (
10 | -
12 | {store.demo.map((item, index) => {
13 | return (
14 |
-
18 |
19 | Link to: {item.title}
20 |
21 | {// Conditional render example
22 | // Check to see if the background is orange, if so, display the message
23 | item.background === "orange" ? (
24 |
25 | Check store/flux.js scroll to the actions to see the code 26 |
27 | ) : null} 28 | 31 |
32 | );
33 | })}
34 |
36 | 37 | 38 | 39 |
11 |
25 | );
26 | };
27 |
--------------------------------------------------------------------------------
/src/front/js/pages/single.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useContext } from "react";
2 | import PropTypes from "prop-types";
3 | import { Link, useParams } from "react-router-dom";
4 | import { Context } from "../store/appContext";
5 | import rigoImageUrl from "../../img/rigo-baby.jpg";
6 |
7 | export const Single = props => {
8 | const { store, actions } = useContext(Context);
9 | const params = useParams();
10 |
11 | return (
12 | Hello Rigo!!
12 |
13 |
14 |
16 | {store.message || "Loading message from the backend (make sure your python backend is running)..."}
17 |
18 | 19 | This boilerplate comes with lots of documentation:{" "} 20 | 21 | Read documentation 22 | 23 |
24 |
13 | 
15 |
16 | 17 | 18 | 19 | Back home 20 | 21 | 22 |
23 | );
24 | };
25 |
26 | Single.propTypes = {
27 | match: PropTypes.object
28 | };
29 |
--------------------------------------------------------------------------------
/src/front/js/store/appContext.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import getState from "./flux.js";
3 |
4 | // Don't change, here is where we initialize our context, by default it's just going to be null.
5 | export const Context = React.createContext(null);
6 |
7 | // This function injects the global store to any view/component where you want to use it, we will inject the context to layout.js, you can see it here:
8 | // https://github.com/4GeeksAcademy/react-hello-webapp/blob/master/src/js/layout.js#L35
9 | const injectContext = PassedComponent => {
10 | const StoreWrapper = props => {
11 | //this will be passed as the contenxt value
12 | const [state, setState] = useState(
13 | getState({
14 | getStore: () => state.store,
15 | getActions: () => state.actions,
16 | setStore: updatedStore =>
17 | setState({
18 | store: Object.assign(state.store, updatedStore),
19 | actions: { ...state.actions }
20 | })
21 | })
22 | );
23 |
24 | useEffect(() => {
25 | /**
26 | * EDIT THIS!
27 | * This function is the equivalent to "window.onLoad", it only runs once on the entire application lifetime
28 | * you should do your ajax requests or fetch api requests here. Do not use setState() to save data in the
29 | * store, instead use actions, like this:
30 | **/
31 | state.actions.getMessage(); // <---- calling this function from the flux.js actions
32 | }, []);
33 |
34 | // The initial value for the context is not null anymore, but the current state of this component,
35 | // the context will now have a getStore, getActions and setStore functions available, because they were declared
36 | // on the state of this component
37 | return (
38 | This will show the demo element: {store.demo[params.theid].title}
14 |16 | 17 | 18 | 19 | Back home 20 | 21 | 22 |