React front-end + python FastAPI backend

[bram-vermeulen]

Select Topic Area

Question

Body

I have created an application that uses react for the front-end and a fastAPI in python for the backend. Now I need to deploy this to be used by 3 coworkers within the company. I was maybe thinking to upgrade to github Pro and deploy the front-end on github pages and deploy the backend somewhere else but have no idea where to start with this. What could be the best practice to deploy such an application so that it is private and can be used by three people. Thanks for the help!

[bram-vermeulen]

So then the front-end would be for example on Github Pro because it will allow it to stay private, and the backend fastAPI i could deploy on Heroku and i just then need to let the frontend call the deployed backend-links?

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬

[mrkarannn03]

For deploying your private React (frontend) and FastAPI (backend) application for your three coworkers:

Prioritize Backend Authentication: Implement strong authentication (e.g., JWTs) in your FastAPI backend. This is your primary security layer for who can use the app.

Choose a Unified PaaS Platform: Services like Render or Google Cloud Run are ideal.

Render: Lets you deploy both your React frontend (as a static site) and FastAPI backend (as a web service) on one platform. It supports private backend services and internal networking between them for enhanced security and ease of management.

Google Cloud Run: Excellent for FastAPI (serverless, scales to zero for cost-effectiveness). You can secure it with IAM for private access. Pair it with Firebase Hosting for your React app.

Avoid GitHub Pages: It's generally not suitable for a private frontend that needs to communicate with a private backend due to its public-by-default nature.

[Ayeshaarian2]

If you're still looking for quality cannabis with worldwide delivery, check out a legit Colorado dispensary shipping worldwide. These dispensaries offer top-tier products with secure, discreet shipping to anywhere across the globe, ensuring you get the best cannabis wherever you are.

[HarshitViskrma]

Combining a React frontend with a Python FastAPI backend is a popular and effective approach for building modern web applications. This setup leverages the strengths of both technologies:
React Frontend:
User Interface (UI):
React, a JavaScript library, is used to build the interactive and dynamic user interface of the web application. It handles rendering components, managing state, and responding to user interactions.
Component-Based Architecture:
React's component-based nature promotes modularity and reusability, making it easier to develop and maintain complex UIs.
Single-Page Application (SPA) Capabilities:
React is well-suited for building SPAs, where the entire application loads once and subsequent interactions only involve updating specific parts of the page, leading to a smoother user experience.
Python FastAPI Backend:
API Endpoints:
FastAPI, a modern Python web framework, is used to create the backend API endpoints that the React frontend will interact with. These endpoints handle data storage, retrieval, and business logic.
Performance and Efficiency:
FastAPI is known for its high performance due to its asynchronous capabilities and built-in support for data validation and serialization.
Automatic Documentation:
FastAPI automatically generates interactive API documentation (Swagger UI and ReDoc) based on the code, which is highly beneficial for development and collaboration.
Data Validation and Security:
FastAPI integrates with Pydantic for data validation, ensuring that incoming data conforms to expected schemas, and provides features for authentication and authorization.
Integration:
The React frontend makes API calls (e.g., using fetch or axios) to the FastAPI backend to send and receive data.
FastAPI processes these requests, interacts with databases or other services as needed, and returns data in a format like JSON to the React frontend.
The React frontend then uses this data to update the UI and display information to the user.
This architecture offers a clear separation of concerns, allowing for independent development and deployment of the frontend and backend, which can lead to increased flexibility and scalability.

[SShirot]

I did a project like this !
In the start periods, my boss want me to show a MVP for him to preview. I then use Vercel for FE, Render for BE ( I use docker to encapsulate it for easy command ), DB PostgreSQL -> also Render. If you don't want to deploy DB on render for private, you can use EC2 AWS for deploying any type of DB

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬