PyCharm Professional 2021.3
- Create Project
New Project -> Pure Python I use the default values for the following parameters. If you change Virtual env or its location you will need to update some parts according to your changes. New encironment using "Virtualenv" Location: $PROJECT_DIR\venv Base interpreter: Python3.10
Uncheck "Create a main.py welcome script" Create
- Set environment
Go to Terminal tab Activate venv if it isn't already pip install nodeenv nodeenv --python-virtualenv --prebuilt --clean-src --node lts --prompt (nodejs) This will take some time. When it is finished it will look similar to the following output. Ignore privilage and link errors.
* Install prebuilt node (18.12.1) ..... done.
* Overwriting c:\users\<user>\pycharmprojects\pythonproject1\venv\Scripts\activate.bat with new content
* Overwriting c:\users\<user>\pycharmprojects\pythonproject1\venv\Scripts\deactivate.bat with new content
* Overwriting c:\users\<user>\pycharmprojects\pythonproject1\venv\Scripts\Activate.ps1 with new content
You do not have sufficient privilege to perform this operation.
You do not have sufficient privilege to perform this operation.
Error: Failed to create nodejs.exe link
Close the terminal and open another terminal. Now the terminal is ready.
- Create react app npm install create-react-app
unfortunately we cannot directly install react app into main folder. it will complain about /venv folder, and there is no option to ignore or force this. so we create it in a folder named /app for now npx create-react-app app
this will take some time. we are done
- Fix folder structure i don't like this folder structure and pycharm thinks some files are "library root" so lets start first let's remove the node_modules folders in project folder and app folder
Remove-Item -Recurse .\node_modules
Remove-Item -Recurse .\app\node_modules\
Then i move files from /app to main folder Move-Item .\app* . -Force
Let's remove the app folder bc we won't need it Remove-Item -Recurse .\app* -Force
Now that we deleted /app folder, Pycharm will complain about "Invalid VCS root mapping". Just click "Configure" on popup and delete
Edit the directory to Project.
Click ok.
Now we don't need to deal with /venv folder, and i don't want it to be seen in the project folder. However its set as "library root", so we cannot hide it, even if set it as "excluded". To fix that, i will delete the Python interpreter of the project as i will not need it anymore.
Click Python 3.10 on the bottom right corner of the Pycharm
Click interpreter settings
Click the cog icon
Show all Remove interpreter for this project
Now we will see that venv is already set as "excluded"
this part is also done.
now lets bring back node_modules npm install
i don't want to see node_modules folder too. let's just mark it as "excluded". if it's already exluded, redo it. then for the convinience let's mark src as "source root"
Fix nodejs path for configurations
ok we are almost there. we can type "npm start" to run the script, but why not add config to make it a one-click action?
just as you may thought about this, you will see that PyCharm cannot detect nodejs.
to fix it we change Project view into Poject Files view
then we go to /.idea/workspace.xml and open it and change the following line
<property name="nodejs_interpreter_path" value="node" />into
<property name="nodejs_interpreter_path" value="$PROJECT_DIR$/venv/Scripts/node.exe" />save it. close the file change into project view.
now to hide all excluded folders altogether. click the cog on project tree -> tree appearance -> untick "Show excluded files"
we are almost there
go to run/debug configurations. you will see node is recognised now.
select start script and click ok. we are done.
npm scripts
to see npm scripts window, right click package.json and select "show npm scripts"
Version control (git) just click Git tab above and set it up.
make your first commit. We are done.