{"id":19894511,"url":"https://github.com/stepzen-dev/stepzen-vercel-starter-template","last_synced_at":"2025-07-06T10:04:00.798Z","repository":{"id":63626407,"uuid":"557378438","full_name":"stepzen-dev/stepzen-vercel-starter-template","owner":"stepzen-dev","description":null,"archived":false,"fork":false,"pushed_at":"2022-11-25T17:10:06.000Z","size":197,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-25T11:50:41.750Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stepzen-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-10-25T15:23:00.000Z","updated_at":"2024-09-19T10:36:10.000Z","dependencies_parsed_at":"2023-01-22T21:00:57.539Z","dependency_job_id":null,"html_url":"https://github.com/stepzen-dev/stepzen-vercel-starter-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/stepzen-dev/stepzen-vercel-starter-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stepzen-dev%2Fstepzen-vercel-starter-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stepzen-dev%2Fstepzen-vercel-starter-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stepzen-dev%2Fstepzen-vercel-starter-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stepzen-dev%2Fstepzen-vercel-starter-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stepzen-dev","download_url":"https://codeload.github.com/stepzen-dev/stepzen-vercel-starter-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stepzen-dev%2Fstepzen-vercel-starter-template/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263882260,"owners_count":23524459,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-12T18:33:44.518Z","updated_at":"2025-07-06T10:04:00.782Z","avatar_url":"https://github.com/stepzen-dev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fstepzen-dev%2Fstepzen-vercel-starter-template\u0026project-name=stepzen-starter\u0026repository-name=stepzen-starter\u0026redirect-url=https%3A%2F%2Fdashboard.stepzen.com\u0026developer-id=oac_fS5U5f04cXnxV1N90Ws6SFXh\u0026demo-title=StepZen%20Vercel%20Starter\u0026demo-description=Starter%20kit%20to%20build%20fullstack%20Next.js%20projects%20with%20StepZen%20and%20Vercel\u0026demo-image=%2F%2Fuser-images.githubusercontent.com%2F22416150%2F202710759-d6316ceb-ebd2-4b95-b93d-4e8d64a4cc37.png\u0026demo-url=https%3A%2F%2Fgithub.com%2Fstepzen-dev%2Fstepzen-vercel-starter-template\u0026integration-ids=oac_fS5U5f04cXnxV1N90Ws6SFXh\u0026external-id=stepzen-dev%2Fstepzen-vercel-starter-template)\n\n---\n\nThis is a demo [StepZen](https://stepzen.com) + [Next.js](https://nextjs.org/) project created from the [`stepzen-dev/stepzen-vercel-starter-template`](https://github.com/stepzen-dev/stepzen-vercel-starter-template) template repo.\n\n## Getting Started\n\n1. First, install StepZen CLI and log in using your StepZen account name and the admin key from [`dashboard.stepzen.com/account`](https://dashboard.stepzen.com/account).\n\n   ```bash\n   npm i -g stepzen\n   stepzen login\n   ```\n\n2. Then, create a `.env.local` file to pass your StepZen credentials to the NextJS app:\n\n   ```bash\n   echo \"STEPZEN_ACCOUNT=$(stepzen whoami --account)\" \u003e\u003e .env.local\n   echo \"STEPZEN_API_KEY=$(stepzen whoami --apikey)\" \u003e\u003e .env.local\n   ```\n\n3. Finally, install dependencies and start the development server:\n\n   ```bash\n   npm i\n   npm run dev\n   ```\n\n\u003e Running `npm run dev` also executes `stepzen start`, which is the command to deploy your GraphQL API to the StepZen cloud.\n\u003e You can as well run the `stepzen start` command at any point, in a serapate terminal window.\n\u003e\n\u003e Read more about what happens when you run `npm run dev`, in the [\"Getting started\" explained](#getting-started-explained) section below.\n\n---\n\n\u003cimg width=\"1306\" alt=\"demo\" src=\"https://user-images.githubusercontent.com/22416150/203358874-7ccbe260-0f70-4433-9340-974dd6e17616.png\"\u003e\n\nOpen [`http://localhost:3000`](http://localhost:3000) with your browser to see the app, and [`dashboard.stepzen.com`](https://dashboard.stepzen.com/) to see your GraphQL API endpoint.\n\nYou can edit the GraphQL API by modifying `stepzen/index.graphql` by hand, or use the [`stepzen import`](https://stepzen.com/docs/cli/cli-commands#stepzen-import) CLI command to import additional data sources to your API.\n\nThe page auto-updates as you edit JS or CSS files, and the GraphQL API on `stepzen.net` auto-updates as you edit GraphQL schema files in `stepzen/`.\n\nThe GraphiQL component on the home page is only an example to show that your app has a GraphQL API. Feel free to delete this component at any time. You can always use the [StepZen dashboard](https://dashboard.stepzen.com/explorer) to explore your GraphQL endpoints.\n\n## Learn More\n\nTo learn more about StepZen, take a look at the following resources:\n\n- [StepZen Documentation](https://stepzen.com/docs) - learn about StepZen features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the StepZen `examples` GitHub repository](https://github.com/stepzen-dev/examples) for more StepZen examples.\n\n## Deploy to Vercel\n\nIf you created this app by clonning the starter repo with the \"Deploy to Vercel\" button, your Vercel project already has the `STEPZEN_ACCOUNT` and `STEPZEN_API_KEY` [environment variables](https://vercel.com/docs/concepts/projects/environment-variables) defined. The StepZen Vercel integtaion does that for you, and you do not need to make any extra actions.\n\nIf you deploy this repo to another hosting, please make sure to define the `STEPZEN_ACCOUNT` and `STEPZEN_API_KEY` environment variables in your deployment / hosting admin panel.\n\n## \"Getting started\" explained\n\nThis section explains step-by-step what happens under the hood when running the steps from the [Getting started](#getting-started) section above.\n\n- `npm i -g stepzen`\n\n  Install the [`stepzen`](https://www.npmjs.com/package/stepzen) npm package into your system (globally). It comes with the `stepzen` command line tool, which is what you can later use to run commands like `stepzen login`.\n\n- `stepzen login`\n\n  Log in with your StepZen account name and an admin key so that StepZen CLI could act on your behalf. You can always check your login status with `stepzen whoami` and log out with `stepzen logout`.\n\n- `npm run dev`\n\n  Start both NextJS and StepZen development servers for your project using the `concurrently` npm package. Both servers run in parallel and print logs into the same terminal window. Each line starts with either `[StepZen]` or `[NextJS]`, telling you which source it comes from. Terminating the task with `Ctrl+C` / `Cmd+C` stops both dev servers.\n\n  The StepZen development server watches for GraphQL schema changes inside the `./stepzen` folder, and automatically redeploys the schema to the StepZen cloud on every change. You can start this server separately with the `stepzen start --dir ./stepzen` command.\n\n  The NextJS development server watches for NextJS source file change, and automatically updates the web page in the browser on every change. You can start this server separately with the `npx next dev` command.\n\n  See the exact logic in `package.json`.\n\n## Code-completion in GraphQL code\n\nIn VS Code you can get full IntelliSense support inside GraphQL queries for your API:\n\n1. install the [GraphQL: Language Feature Support](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql) extension\n2. set the `STEPZEN_ACCOUNT` and `STEPZEN_API_KEY` environment variables when launching VS Code\n\n   - either by setting these 2 environment variables globally, system-wide\n   - or by passing them to VS Code on start-up (e.g. by `env $(cat .env.local | xargs) code .`)\n\n   -- OR --\n\n   replace the `${STEPZEN_ACCOUNT}` and `${STEPZEN_API_KEY}` placeholders in the `.graphqlrc` file with specific values (and do NOT commit this file anymore)\n\n3. ✨ IntelliSense works inside `/* GraphQL */`-prefixed template literals ✨\n\n   \u003cimg width=\"474\" alt=\"auto-completion inside GraphQL queries\" src=\"https://user-images.githubusercontent.com/22416150/202520302-215ee1d3-4e3c-4615-ad90-022f7eb2d9a2.png\"\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstepzen-dev%2Fstepzen-vercel-starter-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstepzen-dev%2Fstepzen-vercel-starter-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstepzen-dev%2Fstepzen-vercel-starter-template/lists"}