How-to Configure PyCharm Guide

doc/how_to/editor/index.md

@@ -12,6 +12,13 @@ One of the main design goals for Panel was to make it seamless to work across de
 How to configure VS Code to work efficiently with Panel
 :::
 
+:::{grid-item-card} {octicon}`gear;2.5em;sd-mr-1 sd-animate-grow50` Configure PyCharm
+:link: pycharm_configure
+:link-type: doc
+
+How to configure PyCharm to work efficiently with Panel
+:::
+
 :::{grid-item-card} {octicon}`markdown;2.5em;sd-mr-1 sd-animate-grow50` Write apps in Markdown
 :link: markdown
 :link-type: doc
@@ -27,5 +34,6 @@ How to write Panel applications inside Markdown files.
 :maxdepth: 2
 
 vscode_configure
+pycharm_configure
 markdown
 ```

doc/how_to/editor/pycharm_configure.md

@@ -0,0 +1,42 @@
+# Configure PyCharm
+
+This guide addresses how to configure PyCharm for an efficient Panel development workflow.
+
+We assume you have a basic understanding of [working with Python projects in PyCharm](https://www.jetbrains.com/help/pycharm/creating-and-running-your-first-python-project.html), including running and [debugging](https://www.jetbrains.com/help/pycharm/debugging-python-code.html) Python applications.
+
+:::{note}
+In the following, we assume you have already created a Python project, installed Panel, and other requirements, and created your Panel file.
+:::
+
+---
+
+## Serve from the Terminal
+
+You can use `panel serve` to serve apps from the PyCharm terminal, just as you would with in any other terminal.
+
+![Panel Serve in Terminal](../../_static/images/pycharm-serve-panel.png)
+
+## Run/Debug Configurations
+
+To learn how to configure PyCharm in general, check out [the official guide](https://www.jetbrains.com/help/pycharm/run-debug-configuration.html).
+
+To enable you to run and debug Panel apps in PyCharm, you should create a configuration as shown below:
+
+![Configure PyCharm for Panel](../../_static/images/pycharm-configure-panel.png)
+
+- Configuration Name: `panel serve`
+- Module Name: `panel`
+- Parameters: `serve $FilePath$`
+- Working Directory: The path to your *project root*
+
+### Run
+
+With the configuration in place, you can now easily `run` Panel apps via the `panel serve` configuration.
+
+![Run Panel App in PyCharm](../../_static/images/pycharm-run-panel.png)
+
+### Debug
+
+With the configuration in place, you can now easily `debug` Panel apps via the `panel serve` configuration. The picture below shows debugging in action, where a breakpoint is hit when the Button is clicked.
+
+![Debug Panel App in PyCharm](../../_static/images/pycharm-debug-panel.png)