Running Onlook Locally
This guide will set you up with running Onlook locally. This involves a Next.js app, a Supabase backend, and the ability to run the dev containers with Codesandbox.
Prerequisites
These are the prerequisites for running Onlook locally.
Setup
1. Clone the repository
2. Install dependencies
3. Run backend
Make sure you have Docker running from the instructions above.
Grab the anon key and service role key from the output. We'll use these in step 5 and 7.
4. Get API keys
a. Get Codesandbox API key
Request an API key from Codesandbox. This is used to run the dev containers. It should be free to use. https://codesandbox.io/api
Note: We plan on enabling running the dev containers with Docker Desktop in the future after we figure out the best api.
b. Get Anthropic API key
Request an API key from Anthropic. This is used for chatting with your project. https://console.anthropic.com/settings/keys
5. Set environment variables
Run the interactive environment setup script:
Note: If you'd prefer manually setting up the environment variables, see the appendix for instructions.
6. Initialize the database
Set up the database schema
7. Seed the database with test data
Seed the database with test data. This will create test users and projects.
8. Run development server
Go to http://localhost:3000 to see the app running. You're all set!
What's Next?
Now that you have Onlook running locally, explore these resources to make your first contribution or learn more about the architecture. Understanding how Onlook works will help you contribute more effectively to this visual editor for React and TailwindCSS.