feat: simplify local development workflow

README.md

@@ -114,3 +114,26 @@ Example call:
 ```ts
 window.voiceflow.chat.show();
 ```
+
+## Running Locally
+
+To run the chat locally you will need to create a local `.env` file with your configuration.
+This will include our Voiceflow project ID and the runtime endpoint.
+
+Create a new file `packages/widget/.env.development.local` with the following contents:
+
+```sh
+VITE_VF_PROJECT_ID='< your project ID >'
+VITE_VF_RUNTIME_URL='https://general-runtime.voiceflow.com'
+
+```
+
+Now that the chat is configured, let's install dependencies and run the development server.
+
+```sh
+yarn install
+
+yarn dev
+```
+
+Once the server is running it should automatically open your browser with the chat widget.

packages/widget/.env.development

@@ -1,3 +1,4 @@
 # THIS IS A PUBLIC FILE, THIS WILL BE COMMITTED TO GITHUB
 
-VITE_WIDGET_URL='http://127.0.0.1:3006'
+VITE_WIDGET_URL='http://127.0.0.1:3006'
+VITE_VF_RUNTIME_URL='https://general-runtime.development.voiceflow.com'

packages/widget/.gitignore

@@ -0,0 +1,2 @@
+.env.local
+.env.*.local

packages/widget/examples/index.html

@@ -13,8 +13,8 @@
     <script>
       function _vf_load() {
         window.voiceflow.chat.load({
-          url: 'https://general-runtime.development.voiceflow.com',
-          verify: { projectID: 'xxx-123-xxx-456' },
+          url: process.env.VITE_VF_RUNTIME_URL,
+          verify: { projectID: process.env.VITE_VF_PROJECT_ID },
           user: {
             name: 'Development User',
           },

packages/widget/vite.config.ts

@@ -19,6 +19,8 @@ export default defineConfig(({ mode }) => {
     define: {
       'process.env': {
         VITE_WIDGET_URL,
+        VITE_VF_PROJECT_ID: env.VITE_VF_PROJECT_ID,
+        VITE_VF_RUNTIME_URL: env.VITE_VF_RUNTIME_URL,
       },
     },
     build: {