{"id":2222,"date":"2022-01-25T17:41:16","date_gmt":"2022-01-25T17:41:16","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=2222"},"modified":"2022-01-25T17:41:16","modified_gmt":"2022-01-25T17:41:16","slug":"webapp-boilerplate-with-react-js-and-flask-api","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=2222","title":{"rendered":"WebApp boilerplate with React JS and Flask API"},"content":{"rendered":"\n

Styles<\/h3>\n\n\n\n

You can update the styles\/index.scss<\/code> or create new .scss<\/code> files inside styles\/<\/code> and import them into your current scss or js files depending on your needs.<\/p>\n\n\n\n\n\n\n\n

Components<\/h3>\n\n\n\n

Add more files into your .\/src\/js\/components<\/code> or styles folder as you need them and import them into your current files as needed.<\/p>\n\n\n\n

?Note: There is an example using the Context API inside views\/demo.js<\/code>;<\/p>\n\n\n\n

Views (Components)<\/h3>\n\n\n\n

Add more files into your .\/src\/js\/views<\/code> and import them in .\/src\/js\/layout.jsx<\/code>.<\/p>\n\n\n\n

Context<\/h3>\n\n\n\n

This boilerplate comes with a centralized general Context API. The file .\/src\/js\/store\/flux.js<\/code> has a base structure for the store, we encourage you to change it and adapt it to your needs.<\/p>\n\n\n\n

React Context docs<\/a>
BreathCode Lesson view<\/a><\/p>\n\n\n\n

The Provider<\/code> is already set. You can consume from any component using the useContext hook to get the store<\/code> and actions<\/code> from the Context. Check \/views\/demo.js<\/code> to see a demo.<\/p>\n\n\n\n

import { Context } from \"..\/store\/appContext\";\nconst MyComponentSuper = () => {\n  \/\/here you use useContext to get store and actions\n  const { store, actions } = useContext(Context);\n  return <div>{\/* you can use your actions or store inside the html *\/}<\/div>\n}<\/pre>\n\n\n\n
Back-End Manual Installation:<\/h3>\n\n\n\n
It is recomended to install the backend first, make sure you have Python 3.8, Pipenv and a database engine (Posgress recomended)<\/p>\n\n\n\n
  1. Install the python packages: $ pipenv install<\/code><\/li>
  2. Create a .env file based on the .env.example: $ cp .env.example .env<\/code><\/li>
  3. Install your database engine and create your database, depending on your database you have to create a DATABASE_URL variable with one of the possible values, make sure yo replace the valudes with your database information:<\/li><\/ol>\n\n\n\n
    Engine<\/th>DATABASE_URL<\/th><\/tr><\/thead>
    SQLite<\/td>sqlite:\/\/\/\/test.db<\/td><\/tr>
    MySQL<\/td>mysql:\/\/username:password@localhost:port\/example<\/td><\/tr>
    Postgress<\/td>postgres:\/\/username:password@localhost:5432\/example<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    1. Migrate the migrations: $ pipenv run migrate<\/code> (skip if you have not made changes to the models on the .\/src\/api\/models.py<\/code>)<\/li>
    2. Run the migrations: $ pipenv run upgrade<\/code><\/li>
    3. Run the application: $ pipenv run start<\/code><\/li><\/ol>\n\n\n\n
      Front-End Manual Installation:<\/h3>\n\n\n\n