Add more cloud docs scaling (#1188)

* adding additional images for scaling

* add new commands to the cli ref

* update scale docs

* add config command to cli ref

* cloud config docs

* Update docs/hosting/app.md

Co-authored-by: Simon Young <[email protected]>

---------

Co-authored-by: Tom Gotsman <[email protected]>
Co-authored-by: Simon Young <[email protected]>

docs/hosting/app.md

@@ -9,7 +9,7 @@ from pcweb.styles.styles import get_code_style, cell_style
 regions = {
     "ams": "Amsterdam, Netherlands",
     "arn": "Stockholm, Sweden",
-    "alt": "Atlanta, Georgia (US)",
+    "atl": "Atlanta, Georgia (US)",
     "bog": "Bogotá, Colombia",
     "bom": "Mumbai, India",
     "bos": "Boston, Massachusetts (US)",
@@ -44,19 +44,6 @@ regions = {
     "yyz": "Toronto, Canada"
 }
 
-vmtypes = [
-    {"id": "c1m.5", "name": "Single CPU Small", "cpu_cores": 1, "ram_gb": 0.512},
-    {"id": "c1m1", "name": "Single CPU Medium", "cpu_cores": 1, "ram_gb": 1.024},
-    {"id": "c1m2", "name": "Single CPU Large", "cpu_cores": 1, "ram_gb": 2.048},
-    {"id": "c2m.5", "name": "Double CPU Micro", "cpu_cores": 2, "ram_gb": 0.512},
-    {"id": "c2m1", "name": "Double CPU Small", "cpu_cores": 2, "ram_gb": 1.024},
-    {"id": "c2m2", "name": "Double CPU Medium", "cpu_cores": 2, "ram_gb": 2.048},
-    {"id": "c2m4", "name": "Double CPU Large", "cpu_cores": 2, "ram_gb": 4.096},
-    {"id": "c4m1", "name": "Quad CPU Micro", "cpu_cores": 4, "ram_gb": 1.024},
-    {"id": "c4m2", "name": "Quad CPU Small", "cpu_cores": 4, "ram_gb": 2.048},
-    {"id": "c4m4", "name": "Quad CPU Medium", "cpu_cores": 4, "ram_gb": 4.096},
-    {"id": "c4m8", "name": "Quad CPU Large", "cpu_cores": 4, "ram_gb": 8.192}
-]
 
 ```
 
@@ -71,6 +58,18 @@ There are many actions you can take in the Cloud UI to manage your app. Below ar
 
 ## VMTypes
 
+
+To scale your app you can choose different VMTypes. VMTypes are different configurations of CPU and RAM.
+
+To scale your VM in the Cloud UI, click on the `Settings` tab in the Cloud UI on the app page, and then click on the `Scale` tab as shown below. Clicking on the `Change VM` button will allow you to scale your app.
+
+
+```python eval
+image_zoom(rx.image(src="/scaling_vms.webp", padding_bottom="20px"))
+```
+
+### VMTypes in the CLI
+
 To get all the possible VMTypes you can run the following command:
 
 ```bash
@@ -83,37 +82,31 @@ To set which VMType to use when deploying your app you can pass the `--vmtype` f
 reflex deploy --project f88b1574-f101-####-####-5f########## --vmtype c2m4
 ```
 
-This will deploy your app with the `c2m4` VMType, giving your app 2 cpu cores and 4 gb of ram.
+This will deploy your app with the `c2m4` VMType, giving your app 2 CPU cores and 4 GB of RAM.
+
 
-Below is a table of all the possible VMTypes:
+
+## Regions
+
+To scale your app you can choose different regions. Regions are different locations around the world where your app can be deployed. 
+
+To scale your app to multiple regions in the Cloud UI, click on the `Settings` tab in the Cloud UI on the app page, and then click on the `Regions` tab as shown below. Clicking on the `Add new region` button will allow you to scale your app to multiple regions.
 
 ```python eval
-rx.table.root(
-    rx.table.header(
-        rx.table.row(
-            rx.table.column_header_cell("id"),
-            rx.table.column_header_cell("name"),
-            rx.table.column_header_cell("cpu (cores)"),
-            rx.table.column_header_cell("ram (gb)"),
-        ),
-    ),
-    rx.table.body(
-        *[
-            rx.table.row(
-                rx.table.cell(rx.code(vmtype["id"], style=get_code_style("violet"))),
-                rx.table.cell(vmtype["name"], style=cell_style),
-                rx.table.cell(vmtype["cpu_cores"], style=cell_style),
-                rx.table.cell(vmtype["ram_gb"], style=cell_style),
-            )
-            for vmtype in vmtypes
-        ]
-    ),
-    variant="surface",
+image_zoom(rx.image(src="/scaling_regions.webp", padding_bottom="20px"))
+```
+
+The images below show all the regions that can be deployed in.
+
+```python eval
+rx.hstack(
+    image_zoom(rx.image(src="/regions_1.webp", padding_bottom="20px")),
+    image_zoom(rx.image(src="/regions_2.webp", padding_bottom="20px")),
 )
 ```
 
 
-## Regions
+### Selecting Regions to Deploy in the CLI
 
 Below is an example of how to deploy your app in several regions:
 
@@ -124,28 +117,32 @@ reflex deploy --project f88b1574-f101-####-####-5f########## --region sjc --regi
 By default all apps are deloyed in `sjc` if no other regions are given. If you wish to deploy in another region or several regions you can pass the `--region` flag (`-r` also works) with the region code. Check out all the regions that we can deploy to below:
 
 
-```python eval
-rx.table.root(
-    rx.table.header(
-        rx.table.row(
-            rx.table.column_header_cell("Region Code"),
-            rx.table.column_header_cell("Region"),
-        ),
-    ),
-    rx.table.body(
-        *[
-            rx.table.row(
-                rx.table.cell(rx.code(region_code, style=get_code_style("violet"))),
-                rx.table.cell(region_name, style=cell_style),
-            )
-            for region_code, region_name in regions.items()
-        ]
-    ),
-    variant="surface",
-)
+## Config File
+
+To create a `config.yml` file for your app run the command below:
+
+```bash
+reflex cloud config
+```
+
+This will create a yaml file similar to the one below where you can edit the app configuration:
+
+```yaml
+name: medo
+description: ''
+regions:
+  sjc: 1
+  lhr: 2
+vmtype: c1m1
+hostname: null
+envfile: .env
+project: null
+packages:
+- procps
 ```
 
 
+
 ## View Logs
 
 To view the app logs follow the arrow in the image below and press on the `Logs` dropdown.

docs/hosting/deploy-quick-start.md

@@ -70,6 +70,11 @@ 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
+# Setup a Cloud Config File
+To create a `config.yml` file for your app to set your app configuration check out the [Cloud Config Docs]({docs.hosting.app.path}#config-file).
+```
+
 ```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.

pcweb/pages/docs/cloud_cliref.py

@@ -50,7 +50,7 @@ def process_command(prefix, path_to_file, dict_prefix=""):
         )
     else:
         output = get_command_help_output(path_to_file=path_to_file)
-    
+
     # Construct the regular expression pattern
     escaped_prefix = re.escape(prefix)
     pattern = rf"## `{escaped_prefix} (.*?)`\n(.*?)(?=\n## `{escaped_prefix}|\Z)"
@@ -85,12 +85,13 @@ def process_command(prefix, path_to_file, dict_prefix=""):
 categories = {
     "login": ["login", "logout"],
     "deploy": ["deploy"],
-    "apps": ["apps status", "apps start", "apps stop", "apps scale", "apps delete", "apps logs", "apps history"],
+    "apps": ["apps scale", "apps status", "apps start", "apps stop", "apps delete", "apps logs", "apps history", "apps build-logs", "apps list"],
     "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"],
     "regions": ["regions"],
+    "config": ["config"]
 }
 
 # Dictionary to store the combined documentation for each category