From a70df023797fa1ccbdd642b4c8abf26d6e64f400 Mon Sep 17 00:00:00 2001 From: Nik Graf Date: Tue, 29 Jul 2025 16:02:16 +0200 Subject: [PATCH] update quickstart guide --- docs/docs/quickstart.md | 91 +++++++++++------------------------------ 1 file changed, 23 insertions(+), 68 deletions(-) diff --git a/docs/docs/quickstart.md b/docs/docs/quickstart.md index 62bf5eed..44f59029 100644 --- a/docs/docs/quickstart.md +++ b/docs/docs/quickstart.md @@ -7,17 +7,33 @@ tags: [quickstart, typesync] # 🚀 Quickstart -If you just want to get started and get a feel for how Hypergraph works, we have created an example app that you can clone and use as a starting point. +The quickest way to create a new Hypergraph application you can use the `create-hypergraph` CLI command. Make sure you have Node.js >= 22 installed. -## Explore the Example app +```bash +npx create-hypergraph@latest +# or +pnpm create hypergraph@latest +bunx create-hypergraph@latest +yarn create hypergraph@latest +``` + +During installation, you'll see the following prompts to choose your app name, template, and package manager. + + +1. What is your app named? … +2. Choose your template … +3. What package manager do you want to use? … -In order to get started as fast as possible we have created an example app that you can clone and use as a starting point. + +After the prompts, you'll have a new Hypergraph application ready to use and can start exploring the app. To run it use the following command: ```bash -git clone https://github.com/geobrowser/hypergraph-app-template.git -cd hypergraph-app-template -pnpm install -pnpm dev +cd my-hypergraph-app +npm run dev +# or depending on your package manager +yarn run dev +pnpm run dev +bun run dev ``` Open the browser, navigate to `http://localhost:5173` and you should see the app running. @@ -31,67 +47,6 @@ A few example datasets to use when building your apps are available here: - [Web3 DAPPs](https://testnet.geobrowser.io/space/b2565802-3118-47be-91f2-e59170735bac/09d3188c-8e20-4083-a6ad-e696cc493c7a) - [Token Values](https://testnet.geobrowser.io/space/2df11968-9d1c-489f-91b7-bdc88b472161/f8780a80-c238-4a2a-96cb-567d88b1aa63) -## Create a new app using TypeSync - -In case you want build an app with your own data types you can follow the guide below. - -It will walk you through creating a new, fully-functional React application powered by Hypergraph using our scaffolding tool, **TypeSync**. In just a few minutes, you'll have a local development environment up and running. - -### Prerequisites - -- Node.js >= 22 -- pnpm >= 10 (install with `npm install -g pnpm`) - -### 1. Install the Hypergraph CLI - -First install the Hypergraph CLI. - -```bash -npm install -g @graphprotocol/hypergraph-cli@latest -``` - -When using `pnpm` you need to v10 or higher - -```bash -pnpm install -g @graphprotocol/hypergraph-cli@latest -pnpm approve-builds -g -# select @tailwindcss/oxide, better-sqlite3, and esbuild -``` - -### 2. Launch TypeSync - -TypeSync is a visual tool that helps you define your data schema and then generates a complete starter application based on your design. Launch it with - -```bash -hg typesync --open -``` - -This will start the TypeSync server. You can now access the **TypeSync** app in your browser at `http://localhost:3000`. - -### 3. Scaffold Your Application - -In the TypeSync Studio: - -1. Give your new application a name and a short description. -2. Use the visual editor to define your data models (we call them "types"). Pick the type "Academic Field". -3. Then click "Generate App". - -TypeSync will create a new directory for your application (e.g., `./my-awesome-app`) containing all the files and dependencies you need. - -### 4. Run Your New App - -Once your app is generated, open a **new terminal tab**. Navigate into the newly created app directory, install its dependencies, and start the local development server. - -```bash -cd ./my-awesome-app # Adjust the path to match your app's name -pnpm install -pnpm dev -``` - -Your new Hypergraph-powered React application will now be running, typically at `http://localhost:5173`. - -You're all set! You can now start building your application by editing the files in the `src` directory. The generated `src/schema.ts` file contains the Hypergraph schema you defined in TypeSync. - --- ## Edit on GitHub :bust_in_silhouette: