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:
- I cannot create a new project without defining whether I want react or fastApi (I can't create an "undefined" parent project folder")
- 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?
Please sign in to leave a comment.
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
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.