{"id":31482439,"url":"https://github.com/snowflake-labs/sfguide-spcs-cortex-reactjs-flask-app","last_synced_at":"2025-10-02T07:50:49.760Z","repository":{"id":227118656,"uuid":"694932903","full_name":"Snowflake-Labs/sfguide-spcs-cortex-reactjs-flask-app","owner":"Snowflake-Labs","description":null,"archived":false,"fork":false,"pushed_at":"2025-02-27T02:15:37.000Z","size":813,"stargazers_count":18,"open_issues_count":0,"forks_count":7,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-27T03:23:29.868Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Snowflake-Labs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":"support-openssl-3.0.10.patch","governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-22T01:58:25.000Z","updated_at":"2025-02-27T02:15:41.000Z","dependencies_parsed_at":"2025-02-27T03:20:43.478Z","dependency_job_id":"34b805b5-a09f-48c1-b0e4-2d2535426b0f","html_url":"https://github.com/Snowflake-Labs/sfguide-spcs-cortex-reactjs-flask-app","commit_stats":null,"previous_names":["snowflake-labs/sfguide-spcs-cortex-reactjs-flask-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Snowflake-Labs/sfguide-spcs-cortex-reactjs-flask-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Snowflake-Labs%2Fsfguide-spcs-cortex-reactjs-flask-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Snowflake-Labs%2Fsfguide-spcs-cortex-reactjs-flask-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Snowflake-Labs%2Fsfguide-spcs-cortex-reactjs-flask-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Snowflake-Labs%2Fsfguide-spcs-cortex-reactjs-flask-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Snowflake-Labs","download_url":"https://codeload.github.com/Snowflake-Labs/sfguide-spcs-cortex-reactjs-flask-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Snowflake-Labs%2Fsfguide-spcs-cortex-reactjs-flask-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277974430,"owners_count":25908396,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-02T02:00:08.890Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-02T07:50:48.241Z","updated_at":"2025-10-02T07:50:49.753Z","avatar_url":"https://github.com/Snowflake-Labs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Application with Snowflake Cortex in Snowpark Container Sevices\n\n## Overview\n\nThis repo contains instructions for building a React application running in Snowpark Container Sevices (SPCS) and it also demonstrates the use of Snowflake Cortex from within the application. *Note that both SPCS and Snowflake Cortex are currently in Public Preview.*\n\nHere is the outline of what's covered:\n\n* [Prerequisites](#prerequisites)\n* [Create Objects, Tables And Load Data](#create-objects-tables-and-load-data)\n* [Create Role And Grant Privileges](#create-role-and-grant-privileges)\n* [Setup Environment](#setup-environment)\n  * [Clone Repository](#step-1-clone-repository)\n  * [Create Conda Environment](#step-2-create-conda-environment)\n  * [Install Flask](#step-3-install-flask)\n  * [Install React And Its Components](#step-4-install-react-and-its-components)\n* [Build Application](#build-application)\n  * [Run Application Locally](#run-application-locally)\n* [Docker Setup](#docker-setup)\n  * [Build Docker Image](#step-1-build-docker-image)\n  * [Run Application in Docker](#step-2-run-application-in-docker)\n  * [Push Docker Image to Snowflake Registry](#step-3-push-docker-image-to-snowflake-registry)\n* [Snowpark Container Sevices (SPCS) Setup](#snowpark-container-sevices-spcs-setup)\n  * [Update SPCS Specification File](#step-1-update-spcs-specification-file)\n  * [Create Service](#step-2-create-service)\n  * [Check Service Status](#step-3-check-service-status)\n  * [Get Public Endpoint](#step-4-get-public-endpoint)\n  * [Run Application in SPCS](#step-5-run-application-in-spcs)\n\n## Prerequisites\n\n* Snowflake Account that has SPCS and Snowflake Cortex enabled. *Note that both SPCS and Snowflake Cortex are currently in Public Preview.*\n* Docker Desktop (https://docs.docker.com/desktop) \n* npm (https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)  \n* Node.js (https://nodejs.org/en/download)\n\n## Create Objects, Tables And Load Data\n\nFollow instructions in [create_objects_tables_load_data.sql](deploy_package/create_objects_tables_load_data.sql) to create necessary objects such as database, schema, warehouse, tables and load data using Snowsight.\n\n## Create Role And Grant Privileges\n\nFollow instructions in [create_spcs_role.sql](deploy_package/create_spcs_role.sql) to create role and grant necessary privileges using Snowsight.\n\n## Setup Environment\n\n### Step 1: Clone Repository\n\nClone this repo and browse to the cloned repo\n\n### Step 2: Create Conda Environment\n\nIn a terminal window, browse to the cloned repo folder and execute the following commands:\n\n* Download and install the miniconda installer from https://conda.io/miniconda.html. (OR, you may use any other Python environment, for example, [virtualenv](https://virtualenv.pypa.io/en/latest/)).\n* Execute `conda create --name snowpark-spcs -c https://repo.anaconda.com/pkgs/snowflake python=3.9`\n* Execute `conda activate snowpark-spcs`\n* Execute `conda install -c https://repo.anaconda.com/pkgs/snowflake snowflake-snowpark-python pandas`\n\n### Step 3: Install Flask\n\nIn the same terminal window where you have `snowpark-spcs` env activated, execute `pip install Flask`\n\n### Step 4: Install React And Its Components\n\nIn the same terminal window where you have `snowpark-spcs` env activated, execute `npm install`\n\n## Build Application\n\nIn the same terminal window where you have `snowpark-spcs` env activated, execute `npm run build` to build the application.\n\n### Run Application Locally\n\nIn the same terminal window, execute `npm run start` and you should see the application running locally in a web browser.\n\nAt this point, you can test the UI and make sure everything looks good, but in order to test the app end-to-end such that it's wired up to work with Flask backend--which ultimately interacts with your Snowflake account via SPCS, see **Docker Setup** section below.\n\n## Docker Setup\n\nAssuming you were able to successfully [build](#build-application) and [run](#run-application-locally) the application locally just fine, follow the steps below to run it end-to-end in Docker. At that point you should also be able to deploy it in SPCS.\n\n### Step 1: Build Docker Image\n\nMake sure Docker is running and then in a terminal window, browse to the cloned folder and execute the following command to build the Docker image.\n\n`docker build --platform linux/amd64 -t snowday .`\n\n**NOTE**: The first time you build the image it can take about ~45-60mins.\n\n### Step 2: Run Application in Docker\n\nOnce the Docker image is built follow these steps to run the end-to-end application in Docker.\n\n* Update [env.list](env.list) with your credentials and other information regarding your Snowflake account that's enabled for SPCS.\n\n```\nSNOWFLAKE_ACCOUNT=\nSNOWFLAKE_HOST=\nSNOWFLAKE_DATABASE=\nSNOWFLAKE_SCHEMA=\nSNOWFLAKE_USER=\nSNOWFLAKE_PASSWORD=\nSNOWFLAKE_ROLE=\nSNOWFLAKE_WAREHOUSE=\nLLAMA2_MODEL=llama2-70b-chat\n```\n\nNOTE: You can leave **LLAMA2_MODEL** set to `llama2-70b-chat`\n\n* After you update the **env.list** file as described above, execute the following command in the terminal window to run the application in Docker.\n\n`docker run --env-file env.list -p 5000:5000 snowday`\n\nIf all goes well, you should be able to see the app running in a browser window at http://127.0.0.1:5000\n\n### User Interaction\n\nIn the application, clicking on **Generate Call Summary** button will call `/llmpfs` endpoint served by the Flask backend--which will call Snowflake Cortex function `snowflake.cortex.complete` using Snowpark Python API to generate call summary for the given transcript. Then, the application will call `/llmpfs_save` endpoint which will update the support ticket record with the generated call summary based on the ticket ID.\n\n### Step 3: Push Docker Image to Snowflake Registry\n\n* Execute the following command in the terminal window to tag image\n\n`docker tag snowday:latest YOUR_IMAGE_URL_GOES_HERE`\n\nFor example, `docker tag snowday:latest \u003corg\u003e-\u003caccount_alias\u003e.registry.snowflakecomputing.com/dash_db/dash_schema/dash_repo/snowday:latest`\n\n* Execute the following command in the terminal to login to your Snowflake account that's enabled for SPCS\n\n`docker login YOUR_ACCOUNT_REGISTRY_URL`\n\nFor example, `docker login \u003corg\u003e-\u003caccount_alias\u003e.registry.snowflakecomputing.com`\n\n* Execute the follwing command in the terminal to push the image to Snowflake registry\n\n`docker push YOUR_IMAGE_URL_GOES_HERE`\n\nFor example, `docker push \u003corg\u003e-\u003caccount_alias\u003e.registry.snowflakecomputing.com/dash_db/dash_schema/dash_repo/snowday:latest`\n\n## Snowpark Container Sevices (SPCS) Setup\n\nAssuming you were able to successfully run the application in [Docker](#docker-setup) just fine, follow the steps below to deploy and run the application in SPCS.\n\n### Step 1: Update SPCS Specification File\n\n* Update the following attributes in [snowday.yaml](deploy_package/snowday.yaml)\n\n  * Set `image` to your image URL. For example, `/dash_db/dash_schema/dash_repo/snowday:latest`.\n  * Set `SNOWFLAKE_WAREHOUSE` to the name of your warehouse that you'd like to use for this application. For example, `DASH_S`.\n  * Set `DATA_DB` and `DATA_SCHEMA` to the names of database and schema where you created the CUSTOMERS and SUPPORT_TICKETS tables. For example,`DASH_DB` and `DASH_SCHEMA`.\n\n* Upload **updated** [snowday.yaml](deploy_package/snowday.yaml) as described above to YOUR_DB.YOUR_SCHEMA.YOUR_STAGE. For example, `DASH_DB.DASH_SCHEMA.DASH_STAGE`.\n\n### Step 2: Create Service\n\nIn Snowsight, execute the following SQL statememts to create and launch the service.\n\n```sql\nuse role DASH_SPCS;\n\ncreate service snowday\nin compute pool DASH_STANDARD_2\nfrom @dash_stage\nspecification_file = 'snowday.yaml';\n```\n\n### Step 3: Check Service Status\n\nExecute the following SQL statement and check the status of the service to make sure it's in READY state before proceeding.\n\n```sql\nselect \n  v.value:containerName::varchar container_name\n  ,v.value:status::varchar status  \n  ,v.value:message::varchar message\nfrom (select parse_json(system$get_service_status('snowday'))) t, \nlateral flatten(input =\u003e t.$1) v;\n```\n\nTo get logs, execute this SQL statment `CALL SYSTEM$GET_SERVICE_LOGS('YOUR_DB.YOUR_SCHEMA.snowday', 0, 'snowday', 1000);`\n\nYou should see output similar to this...\n\n```\nAccount                     : \u003cyour_account\u003e\nUser                        : None\nHost                        : \u003cyour-org-name-your-account-name\u003e.snowflakecomputing.com\nDatabase                    : DASH_DB\nSchema                      : DASH_SCHEMA\nWarehouse                   : DASH_L\nLlama 2 Model               : llama2-70b-chat\nCurrent Directory           : /app\nSnowflake version           : 7.41.0 b20231109165211757ca2c8\nSnowpark for Python version : 1.9.0\n * Serving Flask app 'backend/app.py'\n * Debug mode: off\nWARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.\n * Running on all addresses (0.0.0.0)\n * Running on http://127.0.0.1:5000\n * Running on http://10.244.1.8:5000\n```\n\n### Step 4: Get Public Endpoint\n\nAssuming compute pool is in IDLE or ACTIVE state and the service is in READY state, execute the following SQL statement to get the public endpoint of the application.\n\n```sql\nshow endpoints in service snowday;\n```\n\nIf everything has gone well, you should see `ingress_url` of the application in the **Results** pane--something similar to `pq3ayi-sfdevrel-sfdevrel-enterprise.snowflakecomputing.app`\n\n### Step 5: Run Application In SPCS\n\nIn a new browser window, copy-paste URL from **Step 4** above and you should see the login screen. To launch the application, enter your Snowflake credentials and you should see the application up and running!\n\n### User Interaction\n\nIn the application, clicking on **Generate Call Summary** button will call `/llmpfs` endpoint served by the Flask backend--which will call Snowflake Cortex function `snowflake.cortex.complete` using Snowpark Python API to generate call summary for the given transcript. Then, the application will call `/llmpfs_save` endpoint which will update the support ticket record with the generated call summary based on the ticket ID.\n\n## Quick Demo\n\nhttps://github.com/Snowflake-Labs/sfguide-spcs-cortex-reactjs-flask-app/assets/1723932/3ab95947-f426-4f80-b870-7310ce410ba4\n\nCONGRATULATIONS!!! :) \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnowflake-labs%2Fsfguide-spcs-cortex-reactjs-flask-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsnowflake-labs%2Fsfguide-spcs-cortex-reactjs-flask-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnowflake-labs%2Fsfguide-spcs-cortex-reactjs-flask-app/lists"}