Skip to content

Commit

Permalink
update deployment
Browse files Browse the repository at this point in the history
  • Loading branch information
denisecase committed Feb 13, 2024
1 parent cfe7dfc commit cf7d304
Show file tree
Hide file tree
Showing 7 changed files with 137 additions and 136 deletions.
6 changes: 3 additions & 3 deletions .github/workflows/deploy.yml
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
name: Deploy to shinyapps.io with 3.10
name: Deploy to shinyapps.io with 3.11

on:
push:
Expand All @@ -12,10 +12,10 @@ jobs:
- name: Check out repository code
uses: actions/checkout@v3

- name: Set up Python 3.10
- name: Set up Python 3.11
uses: actions/setup-python@v4
with:
python-version: '3.10'
python-version: '3.11'

- name: Install dependencies
run: |
Expand Down
116 changes: 75 additions & 41 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,68 +4,102 @@
- Repository: [cintel-02-app](https://github.com/denisecase/cintel-02-app)
- Author: [Denise Case](https://github.com/denisecase)

In this module, we add another important tool: Python.
If you are new to Python, don't worry, it's relatively easy to learn and very powerful.
Purpose: Create an interactive analytics dashboard using Shiny for Python.

🚀 Rocket Tips are for learners who want to go beyond the basics.
They are not required but can improve workflow, increase productivity, and make things more enjoyable.
## Before

-----
1. Join GitHub
2. Install Git
3. Configure Git with user.name and user.email
4. Install current Python. Important: Add Python to PATH during installation
5. Install VS Code Editor
6. Install VS Code Extension: [Python](https://marketplace.visualstudio.com/items?itemName=ms-python.python)
7. Install VS Code Extension: [Shiny](https://marketplace.visualstudio.com/items?itemName=posit.shiny-python)

## Prerequisites
Add the following extension now - or just add the json file later and VS Code will prompt you to install.

1. Install VS Code Extension: [Pyright](https://marketplace.visualstudio.com/items?itemName=ms-pyright.pyright)

1. Sign up for a free account on shinyapps.io.
You can sign in via GitHub for convenience.
## Shiny Hosting

2 Copy this starter repository into your own GitHub account by clicking the 'Fork' button at the top of this page.
1. Sign up for a free account on shinyapps.io. You can sign in via GitHub for convenience.

3. Install Python 3 from the [official Python website](https://www.python.org/). Add Python to your PATH during installation.
## Browser: Start a new GitHub Project with Default Files

-----
1. Open browser and log in to GitHub
2. Create a new repo (e.g. cintel-02-app) with Default **README.md** and **.gitignore** (for Python).

## First: Modify Your README.md
## Local Machine: Clone repo to your Documents folder

You have a copy of this repository in your own GitHub account.
The README.md file is the first thing people see when they visit your repository.
Customize your README.md file to include your name and links to your GitHub account.
1. Open VS Code.
2. Clone GitHub repo into Documents folder.

### Step 1. Get the Code to your Machine

1. Open VS Code and from the menu, select **View** / **Command Palette**.
1. Type "Git: Clone" in the command palette and select it.
1. Enter the URL (web address) of your forked GitHub repository (make sure it contains your GitHub username - not denisecase).
1. Choose a directory on your machine (e.g., Documents folder) to store the project.
1. If prompted, sign in to GitHub from VS Code.
## Local Machine: Set Up Project Virtual Environment

### Step 2. Edit README.md in VS Code
Open your project folder in VS Code. Open a VS Code terminal (PowerShell or Bash or zsh) using Terminal / New Terminal.

With your repository folder open in VS Code:
1. Add file: pyrightconfig.json (see example in this repo).
2. Upgrade pip and install wheel.
3. Create local project virtual environment (just once at the beginning)
4. Activate the local project virtual environment (whenever you open a new terminal).
5. Install packages into active environment (once at the start and whenever you add new packages).
6. Freeze to requirements.txt (after adding or upgrading packages - see example in this repo).
7. Document your workflow and commands in your README.md.

1. Click on this README.md file for editing.
1. Update the README.md file by changing your name in the author link above.
1. Update the links in the README.md file to your username instead of denisecase.
Example Terminal Commands for Windows - record your process in your README.md:

### Step 3. Save Your Changes to GitHub
```shell
py -m pip install --upgrade pip wheel
py -m venv .venv
.\.venv\Scripts\Activate.ps1
py -m pip install --upgrade -r requirements.txt
```

1. After making changes, send them back up to GitHub.
1. In VS Code, find the "Source Control" icon and click it.
1. Important: Enter a brief commit message describing your changes.
1. Change the "Commit" button dropdown to "Commit and Push" to send your changes back to GitHub.
Example Terminal Commands for Mac/Linux - record your process in your README.nd:

Excellent work! Take a break and celebrate your progress.
There's a lot of useful skills involved in this process.
```bash
python3 -m pip install --upgrade pip wheel
python3 -m venv .venv
source .venv/bin/activate
python3 -m pip install --upgrade -r requirements.txt
```

## Create A Basic Shiny Express App

-----
1. In VS Code with your project folder open, create a new file app.py in the root project folder.
2. See the example in this repo.

## Second: Get Started with Shiny For Python
## Run the Shiny App

When you're ready, continue on to the next section to
set up your local Python environment and get started with Shiny for Python.
In the terminal window, run the app with the following command.
Note that the terminal will be busy running the app.
If you need to run any additional terminal commands, you'll have to open a new terminal window.

See [SHINY.md](SHINY.md).
Choose one of the following commands.
The first command will not open a browser window.
The second command will open a browser window and continuously refresh based on changes to the app.py file.

With Shiny for Python, we can create interactive apps using **Python**.
```shell
shiny run app.py
shiny run --reload --launch-browser ./app.py
```

![Interactive Web App Written in Python](./images/InteractiveApp.PNG)
You should see the following output:

```shell
INFO: Started server process [8112]
INFO: Waiting for application startup.
INFO: Application startup complete.
INFO: Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)
```

## Open the Shiny App in Your Browser

Open your browser and go to [http://127.0.0.1:8000](http://127.0.0.1:8000)

## References

- [Shiny Express](https://shiny.posit.co/blog/posts/shiny-express/)
- [Shiny for Python - main](https://shiny.posit.co/py/)
- [Verify all installed packages with Python Package Index](https://pypi.org/)
- [Font Awesome free icons](https://fontawesome.com/search?m=free&o=r)
33 changes: 16 additions & 17 deletions SHINYAPPS.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@

We'll deploy the app to [shinyapps.io](http://www.shinyapps.io/) by running a command in the VS Code Terminal.

- If a local app is already running, that terminal window is busy and can't be used for additional commands.
- In the VS Code Terminal, close/kill the terminal window running your local app.
- If a local app is already running, that terminal window is busy and can't be used for additional commands.
- In the VS Code Terminal, close/kill the terminal window running your local app.
- Use Terminal / New Terminal to open a new Terminal window.
- In the command below, the dot (.) means "this folder here".

Expand All @@ -13,21 +13,19 @@ TODO: Change this Markdown file to reflect your username instead of denisecase.
rsconnect deploy shiny . --name denisecase --title cintel-02-app
```

I run Python 3.11 on my machine - but shinyapps.io only supports 3.10, so I got the following **error** when trying to deploy with the command.

![Python Version Error Deploying to shinyapps.io](./images/Error-ShinyApps-Needs-Python-3-10-not-3-11.PNG)
Python versions matter. You might see something like the following **error** when trying to deploy with the command.

![Python Version Error Deploying to shinyapps.io](./images/Error-ShinyApps-Needs-Older-Python.PNG)

## Python Version Issues

Shinyapps.io currently supports Python 3.10 but not 3.11.
I don't want to install 3.10 on my machine and it's already available on shinyapps.io,
so I'm going to just configure the deployment to use 3.10.
I'm not using any Python 3.11 features, so this should work fine.
I don't want to install an older version of Python on my machine,
so I'm going to just configure the deployment to use the suggested version.
I'm not using any super new Python features, so this should work fine.

I created a file named [.github/workflows/deploy.yml](.github/workflows/deploy.yml) to
automatically deploy my app to shinyapps.io when I push changes to GitHub.
In the file, I specify the Python version to use for deployment,
I created a file named [.github/workflows/deploy.yml](.github/workflows/deploy.yml) to
automatically deploy my app to shinyapps.io when I push changes to GitHub.
In the file, I specify the Python version to use for deployment,
install the packages I need, and deploy the app.

It's not hard, but we must configure some GitHub **secrets** to make it work.
Expand All @@ -45,7 +43,7 @@ You'll need three secrets:

Keep it open. We'll need to paste those values into GitHub.

Login to GitHub and go to your repository.
Login to GitHub and go to your repository.
On the right, click on Settings tab / 'Secrets and variables' / Actions.
Use the green "New repository secret" button to add 3 secrets.

Expand Down Expand Up @@ -77,12 +75,12 @@ When it ends green, you know it worked. If it ends red, you'll need to fix somet

## Deployed App in shinyapps.io

If the GitHub action completes successfully, the app was deployed to shinyapps.io.
Log in to [shinyapps.io](https://www.shinyapps.io/) to verify.
If the GitHub action completes successfully, the app was deployed to shinyapps.io.
Log in to [shinyapps.io](https://www.shinyapps.io/) to verify.

![shinyapps.io](./images/DeployedToShinyAppDotIO.PNG)

🚀 Rocket Tip: If you have any old apps that didn't deploy (or when you're done with an app) first **archive** the app, then **delete** it.
🚀 Rocket Tip: If you have any old apps that didn't deploy (or when you're done with an app) first **archive** the app, then **delete** it.
We get 5 apps free with the [free plan](https://www.shinyapps.io/#pricing-anchor).

-----
Expand All @@ -91,7 +89,8 @@ We get 5 apps free with the [free plan](https://www.shinyapps.io/#pricing-anchor

The GitHub action deploy.yml does not automatically delete an existing app from shinyapps.io so we can redeploy.

Before pushing to GitHub, login to [shinyapps.io](https://www.shinyapps.io/) and view the list of applications.
Before pushing to GitHub, login to [shinyapps.io](https://www.shinyapps.io/) and view the list of applications.

- First archive the app.
- Then delete the archived app.

115 changes: 40 additions & 75 deletions app.py
Original file line number Diff line number Diff line change
@@ -1,77 +1,42 @@
"""
Purpose: Use Python to create a continuous intelligence and
interactive analytics dashboard using Shiny for Python.

Each Shiny app has two parts:
from shiny.express import input, render, ui
from shinyswatch import theme

ui.page_opts(title="Case Dashboard", fillable=True)
# theme.minty()
# theme.cerulean()

with ui.sidebar(open="desktop"):
ui.h2("Sidebar")
ui.tags.hr()
ui.h3("Interaction")
ui.input_text("name_input", "Enter your name", placeholder="Your Name")
ui.input_text("language_input", "Enter your favorite language(s)", placeholder="Favorite Programming Language(s)")
ui.tags.hr()
ui.h3("Links")
ui.a("PyShiny", href="https://shiny.posit.co/py/", target="_blank")
ui.a("Examples", href="https://shinylive.io/py/examples/", target="_blank")
ui.a("Themes", href="https://posit-dev.github.io/py-shinyswatch/", target="_blank")
ui.a("Deploy", href="https://docs.posit.co/shinyapps.io/getting-started.html#working-with-shiny-for-python", target="_blank")
ui.a("GitHub", href="https://github.com/denisecase", target="_blank")
ui.a("GitHub Repository", href="https://github.com/denisecase/cintel-02-app", target="_blank")
ui.a("Shinylive.io App", href="https://denisecase.shinyapps.io/cintel-02-app/", target="_blank")

with ui.layout_columns(fill=False):
ui.h2("Main Area with Reactive Output")


@render.text
def welcome_output():
user = input.name_input();
welcome_string = f'Greetings {user}!';
return welcome_string


@render.text
def insights_output():
answer = input.language_input()
count = len(answer)
language_string = f'You like {answer}. That takes {count} characters'
return language_string

- a user interface app_ui object (similar to the HTML in a web page)
- a server function that provides the logic for the app (similar to JS in a web page).
"""
import shinyswatch
from shiny import *


# TODO: Change the shinyswatch theme to morph, cosmo, darkly, flatly, sketchy (or other shinyswatch theme)
# Preview at https://bootswatch.com/
app_ui = ui.page_navbar(
shinyswatch.theme.minty(),
ui.nav(
"Home",
ui.layout_sidebar(
ui.panel_sidebar(
ui.h2("Sidebar Panel"),
ui.tags.hr(),
ui.h3("User Interaction Here"),
ui.input_text("name_input", "Enter your name", placeholder="Your Name"),
ui.input_text("language_input", "Enter your favorite language(s)", placeholder="Favorite Programming Language(s)"),
ui.tags.hr(),
),
ui.panel_main(
ui.h2("Main Panel with Reactive Output"),
ui.output_text_verbatim("welcome_output"),
ui.output_text_verbatim("insights_output"),
),
),
),
# TODO: Update the links to reflect your own about, GitHub repo, and app
ui.nav(ui.a("About", href="https://github.com/denisecase")),
ui.nav(ui.a("GitHub", href="https://github.com/denisecase/cintel-02-app")),
ui.nav(ui.a("App", href="https://denisecase.github.io/cintel-02-app/")),
ui.nav(ui.a("Shiny", href="https://shiny.posit.co/py/")),
ui.nav(ui.a("Examples", href="https://shinylive.io/py/examples/")),
ui.nav(ui.a("Themes", href="https://rstudio.github.io/py-shinyswatch/")),
ui.nav(ui.a("Deploy", href="https://docs.posit.co/shinyapps.io/getting-started.html#working-with-shiny-for-python")),
# TODO: Update the title to reflect yourname Dashboard
title=ui.h1("Case Dashboard"),
)


def server(input, output, session):
"""
This is the required server function.
@param input: a dictionary of input values
@param output: a dictionary of output functions
@param session: a dictionary of session values (not used)
"""

# Define the reactive outputs. Tell what to render and how to render it
# TODO: Customize the reactive greeting.

@output
@render.text
def welcome_output():
user = input.name_input();
welcome_string = f'Greetings {user}!';
return welcome_string

@output
@render.text
def insights_output():
answer = input.language_input()
count = len(answer)
language_string = f'You like {answer}. That takes {count} characters'
return language_string

# Create a Shiny App by passing in the two parts defined above.
app = App(app_ui, server, debug=True)
Binary file added images/Error-ShinyApps-Needs-Older-Python.PNG
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
3 changes: 3 additions & 0 deletions requirements.txt
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
faicons
htmltools
pandas
ipywidgets
rsconnect-python
shiny
shinyswatch
shinywidgets

0 comments on commit cf7d304

Please sign in to comment.