Used cosmos as db

.env.tmp

@@ -0,0 +1,5 @@
+# set your env vars here and rename this file to .env 
+AZURE_CLIENT_ID=""
+AZURE_CLIENT_SECRET=""
+AZURE_TENANT_ID=""
+KEY_VAULT_URL=""

README.md

@@ -1,68 +1,120 @@
-# Flask + React + Postgres Starter 
+# Team Standup App  
 
-This is a minimal sample Flask and React starter code that demonstrates how both frameworks can be used together in a single page web Application.
+This is a simple single page web app that integrates the Flask and React framework. It uses Track 2 version of the [Azure SDK for Python](https://github.com/Azure/azure-sdk-for-python), specifically [azure-cosmos](https://github.com/Azure/azure-sdk-for-python/tree/master/sdk/cosmos/azure-cosmos) and [azure-keyvault-secrets](https://github.com/Azure/azure-sdk-for-python/tree/master/sdk/keyvault/azure-keyvault-secrets), in addition to [azure-identity](https://github.com/Azure/azure-sdk-for-python/tree/master/sdk/identity/azure-identity) for authentication purposes. 
 
-The code is based on https://github.com/dternyak/React-Redux-Flask and https://github.com/creativetimofficial/material-dashboard-react
 
-## Tutorial
+The code is based on https://github.com/dternyak/React-Redux-Flask and https://github.com/creativetimofficial/material-dashboard-react.
 
-## 1. Setting Up The Project
+## How to Run
+
+## 1. Setting up Azure Services
+First, sign up for a free [Azure](https://azure.microsoft.com/en-us/free/) account if you don't already have one. Sign into https://portal.azure.com.
+
+[Create a resource group](https://github.com/lilyjma/azurethings/blob/master/createResourceGroup.md) to store the resources that you'll be using here--Azure Cosmos DB and Key Vault. Then follow instructions in the links below to create each resource in Azure Portal:
+
+(Remember to store them in the resource group you created; this will make it easier to clean up the resources in the future.)
+
+1. [Azure Cosmos DB](https://docs.microsoft.com/en-us/azure/cosmos-db/create-cosmosdb-resources-portal#create-an-azure-cosmos-db-account)
+   1. When creating the database, give it an id of 'team_standup'. You also need two containers--give them id 'tasks' and 'users'. The [partition key](https://docs.microsoft.com/en-us/azure/cosmos-db/partitioning-overview#choose-partitionkey) for both is '/id'. 
+2. [Key Vault](https://docs.microsoft.com/en-us/azure/key-vault/quick-create-portal#create-a-vault)
+   1. This will store credentials for the resources used by this app. For example, it'll store the key to the Cosmos DB. This way, you don't reveal any key in your code and have a centralized place for all keys the app uses. 
+   2. You'll add two secrets called 'cosmosKey' and 'cosmosURI' to Key Vault to hold the Cosmos DB key and URI respectively. To find these, click into the database account created, go to 'Keys' tab and get the *Primary Key* and *URI*. 
+
+You should be able to click into your resource group on the Azure Portal home page and see these two resources.
+
+## 2. Getting Access to Key Vault
+One way to access Key Vault is through a service principal. The service principal serves as an application ID used during the authorization setup for access to Azure resources. After making our service principal, we give it permission to perform operations to Key Vault. We can do these using Azure CLI on Cloud Shell. 
+
+
+1. Click >_ on the top right hand corner of Azure Portal to open Cloud shell. 
+
+2. Create a service principal : 
+
+    ```az ad sp create-for-rbac --name http://my-application --skip-assignment```
+
+    Replace 'http://my-application' with a name of your choice. Just make sure that it starts with 'http://', otherwise, you'll get a warning saying that the name you gave is changed to a valid URI, the required format used for service principal names.
+
+    When the command finishes running, something like this is returned: 
+    ```
+        {
+           "appId": "generated app id",
+           "displayName": "my-application",
+           "name": "http://my-application",
+           "password": "random password",
+           "tenant": "tenant id"
+        }
+    ```
+
+   Save this info somewhere. In the next step, you'll set *appId* as an environment variable called AZURE_CLIENT_ID, and in a later step, you'll also set *tenant* as AZURE_TENANT_ID and *password* as AZURE_CLIENT_SECRET. 
+
+3. Authorize the service principal to perform operations in your Key Vault:
+
+    ```
+    export AZURE_CLIENT_ID="generated app id"
+    ```
+
+   ```
+   az keyvault set-policy --name my-key-vault --spn $AZURE_CLIENT_ID --secret-permissions get set list delete backup recover restore purge
+   ```
+
+
+## 3. Setting Up The Project
 
 1. Clone the reponsitory
-```bash
-git clone https://github.com/jeffreymew/Flask-React-Postgres.git
-cd flask-react-postgres
-```
+   ```bash
+   git clone https://github.com/lilyjma/Flask-React-Postgres/tree/team_standup_app_cosmos
+   cd flask-react-postgres
+   ```
 
 2. Create and activate a virtual environment
 
-In Bash
-```bash
-python3 -m venv venv
-source venv/bin/activate
-```
-
-In Powershell
-```Powershell
-py -3 -m venv env
-env\scripts\activate
-```
-
-In Powershell
-```Powershell
-py -3 -m venv env
-env\scripts\activate
-```
-
-2. Install requirements.txt
-```bash
-pip install -r requirements.txt
-```
-
-3. Import the project folder into VS Code
-```bash
-code .
-```
-
-## 2. Running The Code Locally
-
-1. Build the react.js front-end.
-```bash
-npm install
-npm run build
-```
-2. Create the SQL database
-```bash
-cd ..
-python manage.py create_db
-```
-3. Start the Flask server
-```bash
-python manage.py runserver
-```
-4. Check ```localhost:5000``` in your browser to view the web application.
-
-## 3. Deploying The Code To Azure
+   In Bash
+   ```bash
+   python3 -m venv venv
+   source venv/bin/activate
+   ```
+
+   In Powershell
+   ```Powershell
+   py -3 -m venv env
+   env\scripts\activate
+   ```
+
+3. Install requirements.txt
+   ```bash
+   pip install -r requirements.txt
+   ```
+
+4. Open the project folder in VS Code
+   ```bash
+   code .
+   ```
+
+5. Change the .env.tmp file in the root directory to .env
+   
+   Put in the correct value for each environment variable (you got the values in Step 2) : AZURE_CLIENT_ID, AZURE_CLIENT_SECRET, AZURE_TENANT_ID, KEY_VAULT_URI. 
+   
+    To get KEY_VAULT_URI from Azure Portal, go to the key vault you created, then to the 'Overview' tap and look for *DNS Name* on the top right portion of the page.
+
+## 4. Running The Code Locally
+
+1. Build the react.js front-end
+   ```
+   npm install
+   ```
+    Go into the /static folder and do
+
+    ```
+    npm run build
+    ```
+
+2. Change back to root directory and start the Flask server
+   ```
+   python manage.py runserver
+   ```
+3. Check ```localhost:5000``` in your browser to view the web application.
+
+## 5. Deploying The Code To Azure
 
 1. Go to the extensions tab on VS Code
 

app/__init__.py

@@ -1,15 +1,22 @@
 from flask import Flask
 from flask_bcrypt import Bcrypt
-from flask_sqlalchemy import SQLAlchemy
-
+from dotenv import load_dotenv
 import os
+from pathlib import Path
+
 
 APP_DIR = os.path.abspath(os.path.dirname(__file__))
-STATIC_FOLDER = os.path.join(APP_DIR, '../static/build/static') # Where your webpack build output folder is
-TEMPLATE_FOLDER = os.path.join(APP_DIR, '../static/build') # Where your index.html file is located
+STATIC_FOLDER = os.path.join(
+    APP_DIR, "../static/build/static"
+)  # Where your webpack build output folder is
+TEMPLATE_FOLDER = os.path.join(
+    APP_DIR, "../static/build"
+)  # Where your index.html file is located
+
+load_dotenv()
 
 app = Flask(__name__, static_folder=STATIC_FOLDER, template_folder=TEMPLATE_FOLDER)
-app.config.from_object('app.config.ProductionConfig')
+app.config.from_object("app.config.ProductionConfig")
+
+bcrypt = Bcrypt(app)
 
-db = SQLAlchemy(app)
-bcrypt = Bcrypt(app)

app/config.py

@@ -1,18 +1,39 @@
 import os
-
+from azure.identity import DefaultAzureCredential
+from azure.keyvault.secrets import SecretClient
 
 class BaseConfig(object):
     DEBUG = False
     SQLALCHEMY_TRACK_MODIFICATIONS = True
 
 
 class TestingConfig(BaseConfig):
-    SQLALCHEMY_DATABASE_URI = 'sqlite:///db.sqlite3'
+    # flaskreact app service as service principal
+    AZURE_CLIENT_ID = os.getenv("AZURE_CLIENT_ID")
+    AZURE_TENANT_ID = os.getenv("AZURE_TENANT_ID")
+    AZURE_CLIENT_SECRET = os.getenv("AZURE_CLIENT_SECRET")
+    KEY_VAULT_URL = os.getenv("KEY_VAULT_URL")
+
+    credential = DefaultAzureCredential()
+    secret_client = SecretClient(vault_url=KEY_VAULT_URL, credential=credential)
+
+    COSMOS_DB_URI = secret_client.get_secret("cosmosURI").value
+    SECRET_KEY = secret_client.get_secret("cosmosKey").value  # key to cosmos
+
     DEBUG = True
-    SECRET_KEY = 'somekey'
 
 
 class ProductionConfig(BaseConfig):
-    SQLALCHEMY_DATABASE_URI = os.environ.get('DATABASE_URL', TestingConfig.SQLALCHEMY_DATABASE_URI)
-    SECRET_KEY = os.environ.get('SECRET_KEY', TestingConfig.SECRET_KEY)
-
+    # this is the key to cosmos db, but also used to make token for authentication purpose
+    # probably shouldn't use the same key for different purposes and just let this key be the key to the db
+    SECRET_KEY = TestingConfig.SECRET_KEY
+    COSMOS_DB_URI = TestingConfig.COSMOS_DB_URI
+
+    KEY_VAULT_URL = TestingConfig.KEY_VAULT_URL
+    # created an app service on Portal (b/c eventually want to use App Service to host app)
+    # creds returned by making that app a service principal
+    # also, in order to use Identity, need a Service Principal
+    AZURE_TENANT_ID = TestingConfig.AZURE_TENANT_ID
+    AZURE_CLIENT_ID = TestingConfig.AZURE_CLIENT_ID
+    AZURE_CLIENT_SECRET = TestingConfig.AZURE_CLIENT_SECRET
+