Full stack pycharm project with Fastapi and react

I am working on a web app. Naturally this webapp has a frontend and a backend. The frontend would be written in react and the backend in fastapi with postgresql. I have pycharm professional and I've been trying for an hour to explain it that it is one project folder with a frontend and a backend but I can't seem to make it understand this. I always have to choose: or it's a fastapi project or it's a react project but it seems like it can't be both.

I've read some older intelliJ forum posts and it seems like in the past this was possible through modules.

However I don't know if this is still supported because in the documentation it says you should go to new|add module. However I have two problems with this:

  1. I cannot create a new project without defining whether I want react or fastApi (I can't create an "undefined" parent project folder")
  2. Even if I choose for example fastApi for a new project and then in that project I try to add a new module then it doesn't let me. "module" is simply not an option.

My ideal project configuration would be the one below:

/myproject/
│
├── frontend/                  # React frontend
│   ├── public/                # Static assets like HTML files, icons
│   ├── src/                   # React source files
│   │   ├── components/        # React components
│   │   ├── App.js             # Main React application file
│   │   └── index.js           # Entry point for React application
│   ├── tests/                 # Frontend tests
│   │   ├── componentTests/    # Tests for individual components
│   │   └── integrationTests/  # Tests for component integrations
│   ├── package.json           # npm package configuration
│   └── .env                   # Environment variables for frontend
│
├── backend/                   # FastAPI backend
│   ├── .venv/                 # Python virtual environment folder
│   ├── app/                   # Python application files
│   │   ├── __init__.py
│   │   ├── main.py            # Entry point for FastAPI application
│   │   ├── dependencies/      # Dependency files for API (e.g., database session)
│   │   ├── models/            # Database models
│   │   ├── schemas/           # Pydantic schemas for data validation
│   │   └── routes/            # API routes
│   ├── tests/                 # Backend tests
│   ├── Pipfile                # Pipenv environment and dependency file
│   └── Pipfile.lock           # Lock file for exact pipenv dependencies
│
├── e2e-tests/                 # End-to-end tests that involve both frontend and backend
│
├── nginx/                     # Nginx configuration files for routing and proxying
│   └── nginx.conf
│
├── docker-compose.yml         # Docker Compose file to orchestrate containers (React, FastAPI, PostgreSQL)
│
├── .git/                      # Git repository metadata folder
├── .gitignore                 # Specifies untracked files to ignore (e.g., .env, node_modules)
└── README.md                  # Project documentation and setup instructions

Is it true that this is not possible? And if this is not possible how do you handle a full stack application with pycharm?

0
2 comments

Are you working in PyCharm or IntelliJ IDEA?

In PyCharm, this should be possible using by attaching several projects together https://www.jetbrains.com/help/pycharm/open-projects.html#multiple

0

Hi, I'm working in Pycharm. I could attach it but that wouldn't resolve the issue. This because I would need two git repositories and for example the docker-compose file wouldn't fit in any of the two folders as it should be in the parent folder as you can see in the structure. I need a project with as root the parent folder and that has a venv for python in the backend. I have the feeling that this is not possible today.

0

Please sign in to leave a comment.