Add cloud api docs (#1100)

* first attempt at api docs for cloud

* add elements to sidebar and start writing intro

* finish additional concepts page

* remove old cli commands

* final finishes and remove whitelist

* final small changes

* updates for simon change

* add docs for vmtypes and github actions for deploying

---------

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

Author: tgberkeley

assets/cloud_project_page.png

@@ -0,0 +1,209 @@
+```python exec
+import reflex as rx
+from reflex_image_zoom import image_zoom
+from pcweb.pages import docs
+from pcweb.styles.styles import get_code_style, cell_style
+
+
+regions = {
+    "ams": "Amsterdam, Netherlands",
+    "arn": "Stockholm, Sweden",
+    "alt": "Atlanta, Georgia (US)",
+    "bog": "Bogotá, Colombia",
+    "bom": "Mumbai, India",
+    "bos": "Boston, Massachusetts (US)",
+    "cdg": "Paris, France",
+    "den": "Denver, Colorado (US)",
+    "dfw": "Dallas, Texas (US)",
+    "ewr": "Secaucus, NJ (US)",
+    "eze": "Ezeiza, Argentina",
+    "fra": "Frankfurt, Germany",
+    "gdl": "Guadalajara, Mexico",
+    "gig": "Rio de Janeiro, Brazil",
+    "gru": "Sao Paulo, Brazil",
+    "hkg": "Hong Kong, Hong Kong",
+    "iad": "Ashburn, Virginia (US)",
+    "jnb": "Johannesburg, South Africa",
+    "lax": "Los Angeles, California (US)",
+    "lhr": "London, United Kingdom",
+    "mad": "Madrid, Spain",
+    "mia": "Miami, Florida (US)",
+    "nrt": "Tokyo, Japan",
+    "ord": "Chicago, Illinois (US)",
+    "otp": "Bucharest, Romania",
+    "phx": "Phoenix, Arizona (US)",
+    "qro": "Querétaro, Mexico",
+    "scl": "Santiago, Chile",
+    "sea": "Seattle, Washington (US)",
+    "sin": "Singapore, Singapore",
+    "sjc": "San Jose, California (US)",
+    "syd": "Sydney, Australia",
+    "waw": "Warsaw, Poland",
+    "yul": "Montreal, Canada",
+    "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}
+]
+
+```
+
+
+# Reflex Cloud - Additional Concepts
+
+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.
+```
+
+## 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"))
+```
+
+
+## VMTypes
+
+To get all the possible VMTypes you can run the following command:
+
+```bash
+reflex apps vmtypes
+```
+
+To set which VMType to use when deploying your app you can pass the `--vmtype` flag with the id of the VMType. For example:
+
+```bash
+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.
+
+Below is a table of all the possible VMTypes:
+
+```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",
+)
+```
+
+## Regions
+
+Below is an example of how to deploy your app in several regions:
+
+```bash
+reflex deploy --project f88b1574-f101-####-####-5f########## --region sjc --region iad
+```
+
+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",
+)
+```

assets/hosting_adding_team_members.png

@@ -1,10 +1,9 @@
-# Reflex Hosting Service
+# Reflex Cloud - Quick Start
 
 ```python exec
 import reflex as rx
-from pcweb import constants
+from reflex_image_zoom import image_zoom
 from pcweb.pages import docs
-from pcweb.templates.docpage import doccmdoutput
 ```
 
 So far, we have been running our apps locally on our own machines.
@@ -17,70 +16,59 @@ Reflex’s hosting service makes it easy to deploy your apps without worrying ab
 
 ### Prerequisites
 
-1. Hosting service requires `reflex>=0.6.5`.
+1. Hosting service requires `reflex>=0.6.6`.
 2. This tutorial assumes you have successfully `reflex init` and `reflex run` your app.
-3. Also make sure you have a `requirements.txt` file at the top level app directory that contains all your python dependencies!
+3. Also make sure you have a `requirements.txt` file at the top level app directory that contains all your python dependencies! (To create a `requirements.txt` file, run `pip freeze > requirements.txt`.)
+
 
 ### Authentication
 
-First, create an account or log into it using the following command.
+First run the command below to login / signup to your Reflex Cloud account: (command line)
 
 ```bash
 reflex login
 ```
 
 You will be redirected to your browser where you can authenticate through Github or Gmail.
 
+### Web UI
+
+Once you are at this URL and you have successfully authenticated, click on the one project you have in your workspace. You should get a screen like this:
+
+```python eval
+image_zoom(rx.image(src="/cloud_project_page.png", alt="Reflex Cloud Dashboard"))
+```
+
+This screen shows the login command and the deploy command. As we are already logged in, we can skip the login command.
+
 ### Deployment
 
-Once you have successfully authenticated, you can start deploying your apps.
+Now you can start deploying your app.
 
-Navigate to the project directory that you want to deploy and type the following command:
+In your cloud UI copy the `reflex deploy` command similar to the one shown below.
 
 ```bash
-reflex deploy
+reflex deploy --project 2a432b8f-2605-4753-####-####0cd1####
 ```
 
-The command is by default interactive. It asks you a few questions for information required for the deployment.
-
-**Name**: choose a name for the deployed app. This name will be part of the deployed app URL, i.e. `<app-name>-randomword-randomword.reflex.run`. 
+In your project directory (where you would normally run `reflex run`) paste this command.
 
-The name should only contain domain name safe characters: no slashes, no underscores.
+The command is by default interactive. It asks you a few questions for information required for the deployment.
 
-```md alert info
-# Custom domains are available for paid plans.
-```
 
-**Regions**: enter the region code here or press `Enter` to accept the default. The default code `sjc` stands for San Jose, California in the US west coast. Check the list of supported regions at [reflex deployments regions](#reflex-deployments-regions).
+1. The first question will compare your `requirements.txt` to your python environment and if they are different then it will ask you if you want to update your `requirements.txt` or to continue with the current one. If they are identical this queston will not appear. To create a `requirements.txt` file, run `pip freeze > requirements.txt`.
+2. The second question will search for a deployed app with the name of your current app, if it does not find one then it will ask if you wish to proceed in deploying your new app.
+3. The third question is optional and will ask you for an app description.
 
-**Envs**: `Envs` are environment variables. You might not have used them at all in your app. In that case, press `Enter` to skip. More on the environment variables in the later section [Environment Variables](#environment-variables).
 
 That’s it! You should receive some feedback on the progress of your deployment and in a few minutes your app should be up. 🎉
 
 ```md alert info
-# The hosting service does not currently handle database or file upload operations. Set up an external database and use it within your app.
+# Once your code is uploaded, the hosting service will start the deployment. After a complete upload, exiting from the command **does not** affect the deployment process. The command prints a message when you can safely close it without affecting the deployment.
 ```
 
-## See it in Action
+If you go back to the Cloud UI you should be able to see your deployed app and other useful app information.
+
+
 
-Below is a video of deploying the [AI chat app]({docs.getting_started.chatapp_tutorial.path}) to our hosting service.
 
-```python eval
-rx.box(
-    rx.el.iframe(
-        src="https://www.loom.com/embed/bee928924a454a8098e741e1d19b2857?sid=38523a3f-4c7d-4ee2-9a51-4ca1a36828dc",
-        frameborder="0",
-        webkitallowfullscreen=True,
-        mozallowfullscreen=True,
-        allowfullscreen=True,
-        position="absolute",
-        top="0",
-        left="0",
-        width="100%",
-        height="100%",
-    ),
-    position="relative",
-    padding_bottom="64.94708994708994%",
-    height="0",
-)
-```