From 7479918680fdcd054ec6a4ae804527b79a2b4d7d Mon Sep 17 00:00:00 2001
From: Salih Altun <salih@skyvern.com>
Date: Tue, 2 Jul 2024 19:20:47 +0300
Subject: [PATCH] Change shell scripts to run new UI (#533)

---
 .gitignore                    |  2 ++
 README.md                     |  3 ++-
 run_ui.sh                     | 15 +++++++++++++--
 setup.sh                      | 32 +++++++++++++++++++++++++++++++-
 skyvern-frontend/.env.example |  2 +-
 5 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/.gitignore b/.gitignore
index f237442a..b278a4a2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -171,3 +171,5 @@ postgres-data
 
 ## Frontend
 node_modules
+.env.backup
+.env.old
\ No newline at end of file
diff --git a/README.md b/README.md
index 19249877..32517a37 100644
--- a/README.md
+++ b/README.md
@@ -104,6 +104,7 @@ Before you begin, make sure you have the following installed:
 - [Brew (if you're on a Mac)](https://brew.sh/)
 - [Poetry](https://python-poetry.org/docs/#installation)
     - `brew install poetry`
+- [node](https://nodejs.org/en/download/)
 - [Docker](https://docs.docker.com/engine/install/)
   
 Note: Our setup script does these two for you, but they are here for reference.
@@ -127,7 +128,7 @@ Note: Our setup script does these two for you, but they are here for reference.
     ```bash
     ./run_ui.sh
     ```
-1. Navigate to `http://localhost:8501` in your browser to start using the UI
+1. Navigate to `http://localhost:8080` in your browser to start using the UI
 
 ## Additional Setup for Contributors
 If you're looking to contribute to Skyvern, you'll need to install the pre-commit hooks to ensure code quality and consistency. You can do this by running the following command:
diff --git a/run_ui.sh b/run_ui.sh
index c7048902..ad755957 100755
--- a/run_ui.sh
+++ b/run_ui.sh
@@ -1,2 +1,13 @@
-source "$(poetry env info --path)/bin/activate"
-streamlit run streamlit_app/visualizer/streamlit.py -- $@
+#!/bin/bash
+
+kill $(lsof -t -i :8080)
+
+cd skyvern-frontend
+
+if [ ! -f .env ]; then
+  cp .env.example .env
+  echo "[ERROR] Please add your api keys to the skyvern-frontend/.env file."
+fi
+
+npm install --silent
+npm run start
diff --git a/setup.sh b/setup.sh
index 9f15e896..8b7a145e 100755
--- a/setup.sh
+++ b/setup.sh
@@ -14,7 +14,7 @@ command_exists() {
 
 ensure_required_commands() {
     # Ensure required commands are available
-    for cmd in poetry; do
+    for cmd in poetry npm; do
         if ! command_exists "$cmd"; then
             echo "Error: $cmd is not installed." >&2
             exit 1
@@ -140,6 +140,17 @@ initialize_env_file() {
     echo ".env file has been initialized."
 }
 
+initialize_frontend_env_file() {
+    if [ -f "skyvern-frontend/.env" ]; then
+        echo "skyvern-frontend/.env file already exists, skipping initialization."
+        return
+    fi
+
+    echo "Initializing skyvern-frontend/.env file..."
+    cp skyvern-frontend/.env.example skyvern-frontend/.env
+    echo "skyvern-frontend/.env file has been initialized."
+}
+
 # Function to remove Poetry environment
 remove_poetry_env() {
     local env_path
@@ -165,6 +176,11 @@ choose_python_version_or_fail() {
 # Function to install dependencies
 install_dependencies() {
     poetry install
+    echo "Installing frontend dependencies"
+    cd skyvern-frontend
+    npm install --silent
+    cd ..
+    echo "Frontend dependencies installed."
 }
 
 activate_poetry_env() {
@@ -258,12 +274,26 @@ create_organization() {
     # Update the secrets-open-source.toml file
     echo -e "[skyvern]\nconfigs = [\n    {\"env\" = \"local\", \"host\" = \"http://127.0.0.1:8000/api/v1\", \"orgs\" = [{name=\"Skyvern\", cred=\"$api_token\"}]}\n]" > .streamlit/secrets.toml
     echo ".streamlit/secrets.toml file updated with organization details."
+
+    # Check if skyvern-frontend/.env exists and back it up
+    # This is redundant for first time set up but useful for subsequent runs
+    if [ -f "skyvern-frontend/.env" ]; then
+        mv skyvern-frontend/.env skyvern-frontend/.env.backup
+        echo "Existing skyvern-frontend/.env file backed up as skyvern-frontend/.env.backup"
+        cp skyvern-frontend/.env.example skyvern-frontend/.env
+    fi
+
+    # Update the skyvern-frontend/.env file
+    # sed wants a backup file extension, and providing empty string doesn't work on all platforms
+    sed -i".old" -e "s/YOUR_API_KEY/$api_token/g" skyvern-frontend/.env
+    echo "skyvern-frontend/.env file updated with API token."
 }
 
 # Main function
 main() {
     ensure_required_commands
     initialize_env_file
+    initialize_frontend_env_file
     choose_python_version_or_fail
     remove_poetry_env
     install_dependencies
diff --git a/skyvern-frontend/.env.example b/skyvern-frontend/.env.example
index 359ff746..6716f5c5 100644
--- a/skyvern-frontend/.env.example
+++ b/skyvern-frontend/.env.example
@@ -8,4 +8,4 @@ VITE_ARTIFACT_API_BASE_URL=http://localhost:9090
 VITE_WSS_BASE_URL=ws://localhost:8000/api/v1
 
 # your api key - for x-api-key header
-VITE_SKYVERN_API_KEY=
\ No newline at end of file
+VITE_SKYVERN_API_KEY=YOUR_API_KEY
\ No newline at end of file