reflex-dev · tgberkeley · Jan 15, 2025 · Jan 9, 2025 · Jan 9, 2025 · Jan 11, 2025
diff --git a/assets/deleting_app.webp b/assets/deleting_app.webp
diff --git a/assets/environment_variables.webp b/assets/environment_variables.webp
diff --git a/assets/environment_variables_2.webp b/assets/environment_variables_2.webp
diff --git a/assets/stopping_app.webp b/assets/stopping_app.webp
diff --git a/assets/view_deployment_logs.webp b/assets/view_deployment_logs.webp
diff --git a/assets/view_deployment_logs_2.webp b/assets/view_deployment_logs_2.webp
diff --git a/assets/view_deployment_logs_3.webp b/assets/view_deployment_logs_3.webp
diff --git a/assets/view_logs.webp b/assets/view_logs.webp
diff --git a/docs/hosting/additional-concepts.md → docs/hosting/app.md b/docs/hosting/additional-concepts.md → docs/hosting/app.md
@@ -1,6 +1,7 @@
 ```python exec
 import reflex as rx
 from reflex_image_zoom import image_zoom
+from pcweb.pages.docs import hosting 
 from pcweb.pages import docs
 from pcweb.styles.styles import get_code_style, cell_style
 
@@ -59,78 +60,13 @@ vmtypes = [
 
 ```
 
+# App
 
-# Reflex Cloud - Additional Concepts
+In Reflex Cloud an "app" (or "application" or "website") refers to a web application built using the Reflex framework, which can be deployed and managed within the Cloud platform. 
 
-To go back, i.e. from an app to a project or from a project to your list of projects you just click the `REFLEX logo` in the top left corner of the page.
+You can deploy an app using the `reflex deploy` command.
 
-```md alert info
-# All flag values are saved between runs
-All your flag values, i.e. environment variables or regions or tokens, are saved between runs. This means that if you run a command and you pass a flag value, the next time you run the same command the flag value will be the same as the last time you ran it. This means you should only set the flag values again if you want to change them.
-```
-
-## Environment Variables
-
-
-Below is an example of how to use an environment variable file. You can pass the `--envfile` flag with the path to the env file. For example:
-
-```bash
-reflex deploy --project f88b1574-f101-####-####-5f########## --envfile .env
-```
-
-In this example the path to the file is `.env`.
-
-
-If you prefer to pass the environment variables manually below is deployment command example:
-
-```bash
-reflex deploy --project f88b1574-f101-####-####-5f########## --env OPENAI_API_KEY=sk-proj-vD4i9t6U############################
-```
-
-They are passed after the `--env` flag as key value pairs. 
-
-To pass multiple environment variables, you can repeat the `--env` tag. i.e. `reflex deploy --project f88b1574-f101-####-####-5f########## --env KEY1=VALUE1 --env KEY2=VALUE`. The `--envfile` flag will override any envs set manually.
-
-
-```md alert info
-# More information on Environment Variables
-Environment variables are encrypted and safely stored. We recommend that backend API keys or secrets are entered as `envs`. Make sure to enter the `envs` without any quotation marks. We do not show the values of them in any CLI commands, only their names (or keys).
-
-You access the values of `envs` by referencing `os.environ` with their names as keys in your app's backend. For example, if you set an env `ASYNC_DB_URL`, you are able to access it by `os.environ["ASYNC_DB_URL"]`. Some Python libraries automatically look for certain environment variables. For example, `OPENAI_API_KEY` for the `openai` python client. The `boto3` client credentials can be configured by setting `AWS_ACCESS_KEY_ID`,`AWS_SECRET_ACCESS_KEY`. This information is typically available in the documentation of the Python packages you use.
-```
-
-## Adding Team Members
-
-If you are a User you have the ability to create, deploy and delete apps, but you do not have the power to add or delete users from that project. You must be an Admin for that.
-
-As an Admin you will see the an `Add user` button in the top right of the screen, as shown in the image below. Clicking on this will allow you to add a user to the project. You will need to enter the email address of the user you wish to add.
-
-```python eval
-image_zoom(rx.image(src="/hosting_adding_team_members.png", alt="Adding team members to Reflex Cloud"))
-```
-
-```python eval
-rx.box(height="20px")
-```
-
-```md alert warning
-# Currently a User must already have logged in once before they can be added to a project. 
-At this time a User must be logged in to be added to a project. In future there will be automatic email invites sent to add new users who have never logged in before.
-```
-
-
-
-
-
-## Tokens
-
-A token gives someone else all the permissions you have as a User or an Admin. They can run any Reflex Cloud command from the CLI as if they are you using the `--token` flag. A good use case would be for GitHub actions (you store this token in the secrets).
-
-Tokens are found on the Project List page. If you cannot find it click the Reflex Logo in the top left side of the page until it appears as in the image below.
-
-```python eval
-image_zoom(rx.image(src="/hosting_tokens.png", alt="Adding tokens to Reflex Cloud"))
-```
+There are many actions you can take in the Cloud UI to manage your app. Below are some of the most common actions you may want to take.
 
 
 ## VMTypes
@@ -176,6 +112,7 @@ rx.table.root(
 )
 ```
 
+
 ## Regions
 
 Below is an example of how to deploy your app in several regions:
@@ -206,4 +143,85 @@ rx.table.root(
     ),
     variant="surface",
 )
-```
+```
+
+
+## View Logs
+
+To view the app logs follow the arrow in the image below and press on the `Logs` dropdown.
+
+```python eval
+image_zoom(rx.image(src="/view_logs.webp", padding_bottom="20px"))
+```
+
+```md alert info
+# CLI Command to view logs
+`reflex cloud apps logs [OPTIONS] [APP_ID]`
+```
+
+## View Deployment Logs and Deployment History
+
+To view the deployment history follow the arrow in the image below and press on the `Deployments`.
+
+```python eval
+image_zoom(rx.image(src="/view_deployment_logs.webp"))
+```
+
+This brings you to the page below where you can see the deployment history of your app. Click on deployment you wish to explore further.
+
+```python eval
+image_zoom(rx.image(src="/view_deployment_logs_2.webp", padding_bottom="20px"))
+```
+
+```md alert info
+# CLI Command to view deployment history
+`reflex cloud apps history [OPTIONS] [APP_ID]`
+```
+
+This brings you to the page below where you can view the deployment logs of your app by clicking the `Build logs` dropdown.
+
+```python eval
+image_zoom(rx.image(src="/view_deployment_logs_3.webp"))
+```
+
+
+## Stopping an App
+
+To stop an app follow the arrow in the image below and press on the `Stop app` button. Pausing an app will stop it from running and will not be accessible to users until you resume it. In addition, this will stop you being billed for your app.
+
+```python eval
+image_zoom(rx.image(src="/stopping_app.webp", padding_bottom="20px"))
+```
+
+```md alert info
+# CLI Command to stop an app
+`reflex cloud apps stop [OPTIONS] [APP_ID]`
+```
+
+## Deleting an App
+
+To delete an app click on the `Settings` tab in the Cloud UI on the app page.
+
+```python eval
+image_zoom(rx.image(src="/environment_variables.webp"))
+```
+
+Then click on the `Danger` tab as shown below.
+
+```python eval
+image_zoom(rx.image(src="/deleting_app.webp"))
+```
+
+Here there is a `Delete app` button. Pressing this button will delete the app and all of its data. This action is irreversible.
+
+```md alert info
+# CLI Command to delete an app
+`reflex cloud apps delete [OPTIONS] [APP_ID]`
+```
+
+
+## Other app settings
+
+Clicking on the `Settings` tab in the Cloud UI on the app page also allows a user to change the `app name`, change the `app description` and check the `app id`.
+
+The other app settings also allows users to edit and add secrets (environment variables) to the app. For more information on secrets, see the [Secrets (Environment Variables)]({hosting.secrets_environment_vars.path}) page.
diff --git a/docs/hosting/deploy-quick-start.md b/docs/hosting/deploy-quick-start.md
@@ -70,5 +70,12 @@ That’s it! You should receive some feedback on the progress of your deployment
 If you go back to the Cloud UI you should be able to see your deployed app and other useful app information.
 
 
+```md alert info
+# Moving around the Cloud UI
+To go back, i.e. from an app to a project or from a project to your list of projects you just click the `REFLEX logo` in the top left corner of the page.
+```
 
-
+```md alert info
+# All flag values are saved between runs
+All your flag values, i.e. environment variables or regions or tokens, are saved between runs. This means that if you run a command and you pass a flag value, the next time you run the same command the flag value will be the same as the last time you ran it. This means you should only set the flag values again if you want to change them.
+```
diff --git a/docs/hosting/deploy-with-github-actions.md b/docs/hosting/deploy-with-github-actions.md
@@ -84,7 +84,7 @@ Store your Reflex authentication token securely in your repository's secrets:
 2. Navigate to Settings > Secrets and variables > Actions > New repository secret.
 3. Create new secrets for `REFLEX_AUTH_TOKEN` and `REFLEX_PROJECT_ID`. 
 
-(Create a `REFLEX_AUTH_TOKEN` in the tokens tab of your UI, check out these [docs]({docs.hosting.additional_concepts.path}#tokens). 
+(Create a `REFLEX_AUTH_TOKEN` in the tokens tab of your UI, check out these [docs]({docs.hosting.tokens.path}#tokens). 
 
 The `REFLEX_PROJECT_ID` can be found in the UI when you click on the How to deploy button on the top right when inside a project and copy the ID after the `--project` flag.)
 

diff --git a/docs/hosting/hosting-cli-commands.md b/docs/hosting/hosting-cli-commands.md
diff --git a/docs/hosting/project.md b/docs/hosting/project.md
@@ -0,0 +1,38 @@
+```python exec
+import reflex as rx
+from reflex_image_zoom import image_zoom
+```
+
+# Project
+
+A project is a collection of applications (apps / websites).
+
+Every project has its own billing page that are accessible to Admins.
+
+
+
+## Adding Team Members
+
+To see the team members of a project click on the `Members` tab in the Cloud UI on the project page. 
+
+If you are a User you have the ability to create, deploy and delete apps, but you do not have the power to add or delete users from that project. You must be an Admin for that.
+
+As an Admin you will see the an `Add user` button in the top right of the screen, as shown in the image below. Clicking on this will allow you to add a user to the project. You will need to enter the email address of the user you wish to add.
+
+```python eval
+image_zoom(rx.image(src="/hosting_adding_team_members.png", alt="Adding team members to Reflex Cloud"))
+```
+
+```python eval
+rx.box(height="20px")
+```
+
+```md alert warning
+# Currently a User must already have logged in once before they can be added to a project. 
+At this time a User must be logged in to be added to a project. In future there will be automatic email invites sent to add new users who have never logged in before.
+```
+
+
+## Other project settings
+
+Clicking on the `Settings` tab in the Cloud UI on the project page allows a user to change the `project name`, check the `project id` and, if the project is not your default project, delete the project.
diff --git a/docs/hosting/secrets-environment-vars.md b/docs/hosting/secrets-environment-vars.md
@@ -0,0 +1,54 @@
+```python exec
+import reflex as rx
+from reflex_image_zoom import image_zoom
+```
+
+# Secrets (Environment Variables)
+
+
+## Adding Secrets through the CLI
+
+Below is an example of how to use an environment variable file. You can pass the `--envfile` flag with the path to the env file. For example:
+
+```bash
+reflex deploy --project f88b1574-f101-####-####-5f########## --envfile .env
+```
+
+In this example the path to the file is `.env`.
+
+
+If you prefer to pass the environment variables manually below is deployment command example:
+
+```bash
+reflex deploy --project f88b1574-f101-####-####-5f########## --env OPENAI_API_KEY=sk-proj-vD4i9t6U############################
+```
+
+They are passed after the `--env` flag as key value pairs. 
+
+To pass multiple environment variables, you can repeat the `--env` tag. i.e. `reflex deploy --project f88b1574-f101-####-####-5f########## --env KEY1=VALUE1 --env KEY2=VALUE`. The `--envfile` flag will override any envs set manually.
+
+
+```md alert info
+# More information on Environment Variables
+Environment variables are encrypted and safely stored. We recommend that backend API keys or secrets are entered as `envs`. Make sure to enter the `envs` without any quotation marks. We do not show the values of them in any CLI commands, only their names (or keys).
+
+You access the values of `envs` by referencing `os.environ` with their names as keys in your app's backend. For example, if you set an env `ASYNC_DB_URL`, you are able to access it by `os.environ["ASYNC_DB_URL"]`. Some Python libraries automatically look for certain environment variables. For example, `OPENAI_API_KEY` for the `openai` python client. The `boto3` client credentials can be configured by setting `AWS_ACCESS_KEY_ID`,`AWS_SECRET_ACCESS_KEY`. This information is typically available in the documentation of the Python packages you use.
+```
+
+## Adding Secrets through the Cloud UI
+
+To find the secrets tab, click on the `Settings` tab in the Cloud UI on the app page.
+
+```python eval
+image_zoom(rx.image(src="/environment_variables.webp"))
+```
+
+Then click on the `Secrets` tab as shown below.
+
+```python eval
+image_zoom(rx.image(src="/environment_variables_2.webp"))
+```
+
+From here you can add or edit your environment variables. You will need to restart your app for these changes to take effect.
+
+This functionality in the UI can be disabled by an admin of the project.
diff --git a/docs/hosting/tokens.md b/docs/hosting/tokens.md
@@ -0,0 +1,15 @@
+```python exec
+import reflex as rx
+from reflex_image_zoom import image_zoom
+```
+
+
+# Tokens
+
+A token gives someone else all the permissions you have as a User or an Admin. They can run any Reflex Cloud command from the CLI as if they are you using the `--token` flag. A good use case would be for GitHub actions (you store this token in the secrets).
+
+Tokens are found on the Project List page under the tab `Tokens`. If you cannot find it click the Reflex Logo in the top left side of the page until it appears as in the image below.
+
+```python eval
+image_zoom(rx.image(src="/hosting_tokens.png", alt="Adding tokens to Reflex Cloud"))
+```
diff --git a/pcweb/components/docpage/sidebar/sidebar.py b/pcweb/components/docpage/sidebar/sidebar.py
@@ -351,7 +351,7 @@ def sidebar_comp(
                 "Learn", getting_started.introduction.path, "graduation-cap", 0
             ),
             sidebar_category("Components", library.path, "layout-panel-left", 1),
-            sidebar_category("Recipes", overview.path, "scan-text", 2),
+            sidebar_category("Deploy", hosting_page.deploy_quick_start.path, "cloud", 2),
             sidebar_category("API Reference", pages[0].path, "book-text", 3),
             class_name="flex flex-col items-start gap-1 w-full list-none",
         ),
@@ -378,11 +378,7 @@ def sidebar_comp(
                         "State", state.overview.path, filter_out_non_sidebar_items(backend), backend_index, url
                     ),
                     create_sidebar_section(
-                        "Hosting",
-                        hosting_page.deploy_quick_start.path,
-                        hosting,
-                        hosting_index,
-                        url,
+                        "Recipes", overview.path, recipes, recipes_index, url
                     ),
                     class_name="flex flex-col items-start gap-6 p-[0px_1rem_0px_0.5rem] w-full list-none list-style-none",
                 ),
@@ -426,7 +422,11 @@ def sidebar_comp(
                 2,
                 rx.el.ul(
                     create_sidebar_section(
-                        "Recipes", overview.path, recipes, recipes_index, url
+                        "Hosting",
+                        hosting_page.deploy_quick_start.path,
+                        hosting,
+                        hosting_index,
+                        url,
                     ),
                     class_name="flex flex-col items-start gap-6 p-[0px_1rem_0px_0.5rem] w-full list-none list-style-none",
                 ),

diff --git a/pcweb/components/docpage/sidebar/sidebar_items/learn.py b/pcweb/components/docpage/sidebar/sidebar_items/learn.py
@@ -204,7 +204,10 @@ def get_sidebar_items_hosting():
             "Quick Start",
             children=[
                 hosting.deploy_quick_start,
-                hosting.additional_concepts,
+                hosting.project,
+                hosting.app,
+                hosting.secrets_environment_vars,
+                hosting.tokens,
                 hosting.custom_domains,
                 hosting.deploy_with_github_actions,
             ],

diff --git a/pcweb/components/docpage/sidebar/state.py b/pcweb/components/docpage/sidebar/state.py
@@ -44,10 +44,16 @@ def set_sidebar_index(self, num) -> int:
 
     @rx.var(cache=True, initial_value=-1)
     def sidebar_index(self) -> int:
+        route = self.router.page.path
         if self._sidebar_index < 0:
-            route = self.router.page.path
-            if "library" in route or "api-reference" in route or "recipe" in route:
+            if "library" in route:
                 return 1
+            elif "hosting" in route:
+                return 2
+            elif "api-reference" in route:
+                return 3
             else:
                 return 0
-        return self._sidebar_index
+        if "hosting" in route:
+            return 2
+        return self._sidebar_index
diff --git a/pcweb/pages/docs/cloud_cliref.py b/pcweb/pages/docs/cloud_cliref.py
@@ -86,7 +86,7 @@ def process_command(prefix, path_to_file, dict_prefix=""):
     "login": ["login", "logout"],
     "deploy": ["deploy"],
     "apps": ["apps status", "apps start", "apps stop", "apps scale", "apps delete", "apps logs", "apps history"],
-    "project": ["project list", "project create", "project select", "project invite",
+    "projects": ["project list", "project create", "project select", "project invite",
                  "project get-select", "project usage", "project role-permissions", "project users"],
     "secrets": ["secrets list", "secrets delete", "secrets update"],
     "vmtypes": ["vmtypes"],