Running Locally for Development
This documentation explains how to setup and run the app locally for development purposes. Running locally allows you to test changes and new features before deploying to production.
Introduction
The app consists of two main parts - the frontend app located in app/
and the backend server located in server/
. The frontend contains the UI and widgets while the backend handles the API and database.
To run everything locally, you need to:
- Configure environment variables
- Install dependencies
- Build the frontend assets
- Start the dev servers
Prerequisites
- Node.js v18 or higher
- Yarn
- pnpm
- PostgreSQL
- Redis
Configure Redis
There are a few options for setting up Redis:
Running the Redis server locally
- Install Redis. If you are on macOS, I strongly recommend using Homebrew by running:
brew install redis
- Run
redis-server
You should see information about the server, such as the port (for example6379
). Your Redis URL (i.e.DB_REDIS_URL
) will be:redis://localhost:[PORT]
.
Running the Redis server using Upstash or Railway
Go to the official Upstash or Railway website and follow the instructions to create a Redis server. You should obtain a URL, which will be your DB_REDIS_URL
.
Configure PostgreSQL
Dialoqbase requires a PostgreSQL database with pgvector installed. If you don't have a PostgreSQL database, I recommend spinning up a docker container with the following command:
docker run -d --name pgvector -p 5432:5432 ankane/pgvector:latest
If you already have a PostgreSQL database, you can install pgvector by following the instructions here
Once you have a PostgreSQL database with pgvector installed, you need to create a database and a user. You can do this by running the following commands:
Go to the
/server
foldershnpx prisma migrate deploy
note: This is a one-time command. Do not run it again unless you want to reset the database.
Set the DATABASE_URL
environment variable to the URL of your PostgreSQL database. The URL should look something like this: postgresql://[USER]:[PASSWORD]@[HOST]:[PORT]/[DATABASE]
.
Steps to Run Locally
Rename the example environment variable files located at
app/ui/
,app/widget/
, andserver/
to.env
and comment out all of the variables inside of them.Configure properly the environment variables. The ones located inside of the
app
folder can be used by default, but you must change the environment variables inside of theserver/
folder:DATABASE_URL
is the URL of the PostgreSQL databaseDB_REDIS_URL
should be set to the Redis URL. See the previous section for more details.OPENAI_API_KEY
is the OpenAI API keyDB_SECRET_KEY
is a random key that you can set to whatever you want
Run
yarn install
in the main folder,app/ui/
,app/widget/
,app/script/
and in theserver/
folder to install dependencies.Run
yarn build
in the main folder to build the frontend assets.Use the following commands for this step:
Move the built frontend assets to the backend:
shmv app/ui/dist server/dist/public
Move the built widget code to the backend:
shmv app/widget/dist/index.html server/dist/public/bot.html
Copy the widget assets to the backend:
shcp -r app/widget/dist/assets/* server/dist/public/assets/
Run
pnpm dev
in the main folder and in theserver/
folder to start the dev servers.- If you don't have
pnpm
installed, you can install it globally withnpm install -g pnpm
- If you don't have
yarn
installed, you can install Yarn globally withnpm install -g yarn
- If you don't have
Now you should be able to access the frontend at localhost:5123
and the backend API at localhost:3000
. As you make code changes, the servers will reload and reflect the updates. But if you make changes to the widget, you will need to run the asset copy command again to update the widget assets in the backend.