文件列表:

.env.example (487, 2023-01-20)
.eslintrc (695, 2023-01-20)
.vscode (0, 2023-01-20)
.vscode\settings.json (93, 2023-01-20)
4geeks.ico (19814, 2023-01-20)
Dockerfile.render (290, 2023-01-20)
Pipfile (738, 2023-01-20)
Pipfile.lock (75339, 2023-01-20)
Procfile (62, 2023-01-20)
database.sh (330, 2023-01-20)
dist (0, 2023-01-20)
dist\index.html (862, 2023-01-20)
docs (0, 2023-01-20)
docs\CHANGE_LOG.md (845, 2023-01-20)
docs\HELP.md (123, 2023-01-20)
docs\assets (0, 2023-01-20)
docs\assets\db_config.gif (2110872, 2023-01-20)
docs\assets\debugging.gif (1632350, 2023-01-20)
docs\assets\debugging_icon.png (1926, 2023-01-20)
docs\assets\diagram.png (50380, 2023-01-20)
docs\assets\env_variables.gif (892615, 2023-01-20)
docs\assets\greeting.py (493, 2023-01-20)
docs\assets\logo.png (13183, 2023-01-20)
docs\assets\reset_migrations.bash (247, 2023-01-20)
docs\assets\rigo-baby.jpg (31327, 2023-01-20)
migrations (0, 2023-01-20)
migrations\alembic.ini (857, 2023-01-20)
migrations\env.py (2767, 2023-01-20)
migrations\script.py.mako (494, 2023-01-20)
migrations\versions (0, 2023-01-20)
migrations\versions\fd1c07e7075e_.py (878, 2023-01-20)
package-lock.json (372241, 2023-01-20)
... ...

# WebApp boilerplate with React JS and Flask API [](https://gitpod.io#https://github.com/4GeeksAcademy/react-flask-hello.git) > Documentation: https://start.4geeksacademy.com/

- React.js front end and python/flask backend for your web application. - Extensive documentation [here](https://start.4geeksacademy.com/). - Integrated with Pipenv for package managing. - Fast deloyment to heroku [in just a few steps here](https://start.4geeksacademy.com/backend/deploy-heroku-posgres). - Use of .env file. - SQLAlchemy integration for database abstraction. ### Styles You can update the `styles/index.scss` or create new `.scss` files inside `styles/` and import them into your current scss or js files depending on your needs. ### Components Add more files into your `./src/js/components` or styles folder as you need them and import them into your current files as needed. ’Note: There is an example using the Context API inside `views/demo.js`; ### Views (Components) Add more files into your `./src/js/views` and import them in `./src/js/layout.jsx`. ### Context This boilerplate comes with a centralized general Context API. The file `./src/js/store/flux.js` has a base structure for the store, we encourage you to change it and adapt it to your needs. React Context [docs](https://reactjs.org/docs/context.html) BreathCode Lesson [view](https://content.breatheco.de/lesson/react-hooks-explained) The `Provider` is already set. You can consume from any component using the useContext hook to get the `store` and `actions` from the Context. Check `/views/demo.js` to see a demo. ```jsx import { Context } from "../store/appContext"; const MyComponentSuper = () => { //here you use useContext to get store and actions const { store, actions } = useContext(Context); return ; }; ``` ### Back-End Manual Installation: It is recomended to install the backend first, make sure you have Python 3.8, Pipenv and a database engine (Posgress recomended) 1. Install the python packages: `$ pipenv install` 2. Create a .env file based on the .env.example: `$ cp .env.example .env` 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: | Engine | DATABASE_URL | | --------- | --------------------------------------------------- | | SQLite | sqlite:////test.db | | MySQL | mysql://username:password@localhost:port/example | | Postgress | postgres://username:password@localhost:5432/example | 4. Migrate the migrations: `$ pipenv run migrate` (skip if you have not made changes to the models on the `./src/api/models.py`) 5. Run the migrations: `$ pipenv run upgrade` 6. Run the application: `$ pipenv run start` ### Backend Populate Table Users To insert test users in the database execute the following command: ```sh $ flask insert-test-users 5 ``` And you will see the following message: ``` Creating test users test_user1@test.com created. test_user2@test.com created. test_user3@test.com created. test_user4@test.com created. test_user5@test.com created. Users created successfully! ``` To update with all yours tables you can edit the file app.py and go to the line 80 to insert the code to populate others tables ### Front-End Manual Installation: - Make sure you are using node version 14+ and that you have already successfully installed and runned the backend. 1. Install the packages: `$ npm install` 2. Start coding! start the webpack dev server `$ npm run start` ## Publish your website! This boilerplate it's 100% read to deploy with Render.com and Herkou in a matter of minutes. Please read the [official documentation about it](https://start.4geeksacademy.com/deploy).

近期下载者：

相关文件：

评论：[我要评论] [举报此文件]

收藏者：