在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:Buuntu/fastapi-react开源软件地址:https://github.com/Buuntu/fastapi-react开源编程语言:Python 49.2%开源软件介绍:FastAPI + React ·A cookiecutter template for bootstrapping a FastAPI and React project using a modern stack. Features
Table of Contents
BackgroundIt is often laborsome to start a new project. 90% of the time you have to decide how to handle authentication, reverse proxies, docker containers, testing, server-side validation, linting, etc. before you can even get started. FastAPI-React serves to streamline and give you that functionality out of the box. It is meant as a lightweight/React alternative to FastAPI's official fullstack project. If you want a more comprehensive project in Vue, I would suggest you start there. A lot of the backend code is taken from that project or the FastAPI official docs. Quick StartFirst, install cookiecutter if you don't already have it: pip3 install cookiecutter Second, install docker-compose if you don't already have it: docker-compose installation official docs. Then, in the directory you want your project to live: cookiecutter gh:Buuntu/fastapi-react You will need to put in a few variables and it will create a project directory
(called whatever you set for Input Variables
DevelopChange into your project directory and run: chmod +x scripts/build.sh
./scripts/build.sh This will build and run the docker containers, run the alembic migrations, and load the initial data (a test user). It may take a while to build the first time it's run since it needs to fetch all the docker images. Once you've built the images once, you can simply use regular docker-compose up -d Once this finishes you can navigate to the port set during setup (default is
Note: If you see an Nginx error at first with a The backend docs will be at Admin DashboardThis project uses react-admin for a highly configurable admin dashboard. After starting the project, navigate to NOTE: regular users will not be able to access the admin dashboard You should now see a list of users which you can edit, add, and delete. The
table is configured with the REST endpoints to the FastAPI The admin dashboard is kept in the SecurityTo generate a secure key used for encrypting/decrypting the JSON Web Tokens, you can run this command: openssl rand -hex 32 The default is fine for development but you will want something more secure for production. You can either set this on project setup as TestingThis project comes with Pytest and a few Pytest fixtures for easier mocking. The
fixtures are all located in All tests are configured to run on a test database using SQLAlchemy transactions to reset the testing state on each function. This is to avoid a database call affecting the state of a different test. FixturesThese fixtures are included in test_dbThe def test_user(test_db):
assert test_db.query(models.User).all() test_userdef test_user_exists(test_user):
assert test_user.email == "[email protected]" test_superuserdef test_superuser(client, test_superuser):
assert test_superuser.is_superuser clientTo use an unauthenticated test client, use def test_get_users(client):
client.get("/api/v1/users")
assert response.status_code == 200 user_token_headersIf you need an authenticated client using OAuth2 and JWTs: def test_user_me(client, user_token_headers):
response = client.get(
"/api/v1/users/me",
headers=user_token_headers,
)
assert response.status_code == 200 Since OAuth2 expects the access token in the headers, you will need to pass in
superuser_token_headersdef test_user_me(client, superuser_token_headers):
response = client.get(
"/api/v1/users",
headers=superuser_token_headers,
)
assert response.status_code == 200 Background TasksThis template comes with Celery and Redis Docker containers pre-configured for you. For any long running processes, it's recommended that you handle these using a task queue like Celery to avoid making the client wait for a request to finish. Some examples of this might be sending emails, uploading large files, or any long running, resource intensive tasks. There is an example task in If you are not happy with Celery or Redis, it should be easy to swap these containers out with your favorite tools. Some suggested alternatives might be Huey as the task queue and RabbitMQ for the message broker. FlowerYou can monitor tasks using Flower by going to http://localhost:5555 Frontend UtilitiesThere are a few helper methods to handle authentication in Utility Functionslogin// in src/utils/auth.ts
/**
* Handles authentication with backend and stores in JWT in local storage
**/
const login = (email: string, password: string) => boolean; logout// in src/utils/auth.ts
// clears token from local storage
const logout = (email: string, password: string) => void; isAuthenticated// Checks authenticated state from JWT tokens
const isAuthenticated = () => boolean; RoutesSome basic routes are included (and handled in
Higher Order ComponentsPrivateRouteThis handles routes that require authentication. It will automatically check whether the correct token with the "user" permissions is present or redirect to the home page. // in src/Routes.tsx
import { Switch } from 'react-router-dom';
// Replace this with your component
import { ProtectedComponent } from 'components';
const Routes = () => (
<Switch>
<PrivateRoute path="/protected_route" component={ProtectedComponent} />
</Switch>
); DeploymentThis stack can be adjusted and used with several deployment options that are compatible with Docker Compose, but it may be easiest to use Docker in Swarm Mode with an Nginx main load balancer proxy handling automatic HTTPS certificates, using the ideas from DockerSwarm.rocks. Please refer to DockerSwarm.rocks to see how to deploy such a cluster easily. You will have to change the Traefik examples to Nginx or update your docker-compose file. ContributingContributing is more than welcome. Please read the Contributing doc to find out more. |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论