Skip to content

Commit 17b6920

Browse files
YOUR_NAMEYOUR_NAME
authored andcommitted
starters preview
1 parent 808b463 commit 17b6920

40 files changed

+768
-10
lines changed

docs/content/cli/_meta.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
{
2+
"create": "Create Command",
23
"commands": "Commands",
34
"configuration": "Configuration",
45
"schema-download": "Schema Download"

docs/content/cli/create.mdx

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
# Create Command
2+
3+
Quickly scaffold a new project with Zeus pre-configured using the interactive `create` command.
4+
5+
## Usage
6+
7+
```bash
8+
npx graphql-zeus create
9+
```
10+
11+
Or if you have Zeus installed globally:
12+
13+
```bash
14+
zeus create
15+
```
16+
17+
## Interactive Setup
18+
19+
The `create` command launches an interactive wizard that guides you through project creation:
20+
21+
### 1. Choose a Template
22+
23+
```
24+
? Which template would you like to use?
25+
❯ Next.js - Next.js 16 + React 19 + Tailwind CSS 4
26+
Vite - Vite 7 + React 19 + Tailwind CSS 4
27+
```
28+
29+
### 2. Enter Project Name
30+
31+
```
32+
? What is your project name? my-zeus-app
33+
```
34+
35+
Project names can contain letters, numbers, hyphens, and underscores.
36+
37+
## Available Templates
38+
39+
### Next.js
40+
41+
A full-featured Next.js starter with:
42+
43+
- **Next.js 16** - Latest App Router
44+
- **React 19** - Latest React version
45+
- **Tailwind CSS 4** - Utility-first CSS framework
46+
- **TypeScript** - Full type safety
47+
- **ESLint & Prettier** - Code quality tools
48+
49+
The Zeus client should be generated to `./lib`:
50+
51+
```bash
52+
npx graphql-zeus <schema-url-or-path> ./lib --node
53+
```
54+
55+
Development server runs on `http://localhost:3000`.
56+
57+
### Vite
58+
59+
A lightweight Vite starter with:
60+
61+
- **Vite 7** - Lightning-fast build tool
62+
- **React 19** - Latest React version
63+
- **Tailwind CSS 4** - Utility-first CSS framework
64+
- **TypeScript** - Full type safety
65+
- **ESLint & Prettier** - Code quality tools
66+
67+
The Zeus client should be generated to `./src/lib`:
68+
69+
```bash
70+
npx graphql-zeus <schema-url-or-path> ./src/lib
71+
```
72+
73+
Development server runs on `http://localhost:5173`.
74+
75+
## After Project Creation
76+
77+
Once your project is created, follow these steps:
78+
79+
```bash
80+
# 1. Navigate to your project
81+
cd my-zeus-app
82+
83+
# 2. Install dependencies
84+
npm install
85+
86+
# 3. Generate Zeus client from your GraphQL schema
87+
npx graphql-zeus https://your-api.com/graphql ./lib --node # Next.js
88+
# or
89+
npx graphql-zeus https://your-api.com/graphql ./src/lib # Vite
90+
91+
# 4. Start development server
92+
npm run dev
93+
```
94+
95+
## Example Workflow
96+
97+
Here's a complete example creating a new Next.js project:
98+
99+
```bash
100+
# Create the project
101+
npx graphql-zeus create
102+
103+
# Select "Next.js" and enter "my-app" as the project name
104+
105+
# Navigate and install
106+
cd my-app
107+
npm install
108+
109+
# Generate Zeus client from a public GraphQL API
110+
npx graphql-zeus https://countries.trevorblades.com/graphql ./lib --node
111+
112+
# Start development
113+
npm run dev
114+
```
115+
116+
## Project Structure
117+
118+
### Next.js Template
119+
120+
```
121+
my-zeus-app/
122+
├── app/
123+
│ ├── globals.css
124+
│ ├── layout.tsx
125+
│ └── page.tsx
126+
├── public/
127+
├── .env.example
128+
├── .gitignore
129+
├── .prettierrc
130+
├── eslint.config.mjs
131+
├── next.config.ts
132+
├── package.json
133+
├── postcss.config.mjs
134+
└── tsconfig.json
135+
```
136+
137+
### Vite Template
138+
139+
```
140+
my-zeus-app/
141+
├── public/
142+
├── src/
143+
│ ├── App.tsx
144+
│ ├── index.css
145+
│ ├── main.tsx
146+
│ └── vite-env.d.ts
147+
├── .env.example
148+
├── .gitignore
149+
├── .prettierrc
150+
├── eslint.config.js
151+
├── index.html
152+
├── package.json
153+
├── tsconfig.json
154+
├── tsconfig.node.json
155+
└── vite.config.ts
156+
```
157+
158+
## Tips
159+
160+
- **Environment Variables**: Both templates include a `.env.example` file. Copy it to `.env.local` (Next.js) or `.env` (Vite) to set up your environment variables.
161+
- **GraphQL Schema**: You can use either a remote GraphQL endpoint URL or a local `.graphql` schema file when generating the Zeus client.
162+
- **TypedDocumentNode**: Add `--typedDocumentNode` flag when generating to get TypedDocumentNode exports for use with Apollo Client or urql.
163+
164+
## Next Steps
165+
166+
- **[CLI Usage](/getting-started/cli-usage)** - Learn all CLI options
167+
- **[Your First Query](/getting-started/first-query)** - Write your first type-safe query
168+
- **[Chain Client](/core-concepts/chain-client)** - Understand the generated client
169+
170+
[Write Your First Query →](/getting-started/first-query)

examples/typescript-node/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "typescript-node",
3-
"version": "3.1.5",
3+
"version": "3.1.6",
44
"description": "",
55
"private": true,
66
"main": "index.js",

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"@types/jest": "^29.1.2",
2929
"@types/node": "^22.10.3",
3030
"@types/node-fetch": "^2.3.7",
31+
"@types/prompts": "^2.4.9",
3132
"@types/ws": "^8.5.3",
3233
"@types/yargs": "^15.0.11",
3334
"@typescript-eslint/eslint-plugin": "^5.40.0",

packages/graphql-zeus-core/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "graphql-zeus-core",
3-
"version": "7.1.6",
3+
"version": "7.1.7",
44
"private": false,
55
"main": "./lib/index.js",
66
"author": "GraphQL Editor, Artur Czemiel",

packages/graphql-zeus-jsonschema/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "graphql-zeus-jsonschema",
3-
"version": "7.1.6",
3+
"version": "7.1.7",
44
"private": false,
55
"main": "./lib/index.js",
66
"author": "GraphQL Editor, Artur Czemiel",
Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import prompts from 'prompts';
2+
import * as fs from 'fs';
3+
import * as path from 'path';
4+
import { fileURLToPath } from 'url';
5+
6+
export async function createProject(): Promise<void> {
7+
console.log('\n⚡ Zeus Project Creator\n');
8+
9+
// 1. Prompt for template
10+
const { template } = await prompts({
11+
type: 'select',
12+
name: 'template',
13+
message: 'Which template would you like to use?',
14+
choices: [
15+
{ title: 'Next.js', value: 'nextjs', description: 'Next.js 16 + React 19 + Tailwind CSS 4' },
16+
{ title: 'Vite', value: 'vite', description: 'Vite 7 + React 19 + Tailwind CSS 4' },
17+
],
18+
});
19+
20+
if (!template) {
21+
console.log('Cancelled.');
22+
process.exit(0);
23+
}
24+
25+
// 2. Prompt for project name
26+
const { projectName } = await prompts({
27+
type: 'text',
28+
name: 'projectName',
29+
message: 'What is your project name?',
30+
initial: 'my-zeus-app',
31+
validate: (value: string) => {
32+
if (!value) return 'Project name is required';
33+
if (!/^[a-z0-9-_]+$/i.test(value))
34+
return 'Project name can only contain letters, numbers, hyphens, and underscores';
35+
if (fs.existsSync(path.resolve(process.cwd(), value))) return `Directory "${value}" already exists`;
36+
return true;
37+
},
38+
});
39+
40+
if (!projectName) {
41+
console.log('Cancelled.');
42+
process.exit(0);
43+
}
44+
45+
// 3. Copy template to target directory
46+
// __dirname will be lib/commands when running compiled code
47+
// So we need to go up to package root (../../) to find starters
48+
const __dirname = path.dirname(fileURLToPath(import.meta.url));
49+
const packageRoot = path.join(__dirname, '..', '..');
50+
const startersDir = path.join(packageRoot, 'starters', template);
51+
const targetDir = path.resolve(process.cwd(), projectName);
52+
53+
// Check if starters directory exists
54+
if (!fs.existsSync(startersDir)) {
55+
console.error(`Error: Starter template "${template}" not found at ${startersDir}`);
56+
process.exit(1);
57+
}
58+
59+
copyDirRecursive(startersDir, targetDir);
60+
61+
// 4. Update package.json with project name
62+
const pkgPath = path.join(targetDir, 'package.json');
63+
const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
64+
pkg.name = projectName;
65+
fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
66+
67+
// 5. Print success message
68+
const isNextjs = template === 'nextjs';
69+
const zeusOutputPath = isNextjs ? './lib' : './src/lib';
70+
const devPort = isNextjs ? '3000' : '5173';
71+
72+
console.log(`
73+
✅ Created "${projectName}" successfully!
74+
75+
Next steps:
76+
77+
cd ${projectName}
78+
npm install
79+
npm run dev
80+
81+
To generate Zeus client from your GraphQL schema:
82+
83+
npx graphql-zeus <schema-url-or-path> ${zeusOutputPath}${isNextjs ? ' --node' : ''}
84+
85+
Your app will be running at http://localhost:${devPort}
86+
87+
Happy coding! ⚡
88+
`);
89+
}
90+
91+
function copyDirRecursive(src: string, dest: string): void {
92+
fs.mkdirSync(dest, { recursive: true });
93+
for (const entry of fs.readdirSync(src, { withFileTypes: true })) {
94+
const srcPath = path.join(src, entry.name);
95+
const destPath = path.join(dest, entry.name);
96+
if (entry.isDirectory()) {
97+
copyDirRecursive(srcPath, destPath);
98+
} else {
99+
fs.copyFileSync(srcPath, destPath);
100+
}
101+
}
102+
}

packages/graphql-zeus/index.ts

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,47 @@
11
#!/usr/bin/env node
22
import yargs from 'yargs';
33
import { CLI } from '@/CLIClass.js';
4-
const args = yargs(process.argv.slice(2))
4+
import { createProject } from '@/commands/create.js';
5+
6+
yargs(process.argv.slice(2))
57
.usage(
68
`
79
Zeus⚡⚡⚡
810
GraphQL Autocomplete Client Library generator
911
1012
Load from file or url (url must start with http:// or https:// ):
1113
zeus [path] [output_path] [options]
14+
15+
Create a new project with Zeus:
16+
zeus create
1217
`,
1318
)
19+
.command(
20+
'create',
21+
'Create a new project with Zeus pre-configured',
22+
() => {},
23+
() => {
24+
createProject();
25+
},
26+
)
27+
.command(
28+
'$0 <path> [output_path]',
29+
'Generate TypeScript client from GraphQL schema',
30+
(yargs) => {
31+
return yargs
32+
.positional('path', {
33+
describe: 'Path to GraphQL schema file or URL',
34+
type: 'string',
35+
})
36+
.positional('output_path', {
37+
describe: 'Output directory for generated files',
38+
type: 'string',
39+
});
40+
},
41+
(args) => {
42+
CLI.execute(args);
43+
},
44+
)
1445
.option('node', {
1546
alias: 'n',
1647
describe: 'Generate client for NodeJS( default is for browser and react-native )',
@@ -64,5 +95,4 @@ zeus [path] [output_path] [options]
6495
choices: ['legacy', 'graphql-ws'],
6596
default: 'legacy',
6697
})
67-
.demandCommand(1).argv;
68-
CLI.execute(args);
98+
.help().argv;

packages/graphql-zeus/package.json

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "graphql-zeus",
3-
"version": "7.1.6",
3+
"version": "7.1.7",
44
"private": false,
55
"scripts": {
66
"start": "ttsc --watch",
@@ -16,6 +16,10 @@
1616
"bin": {
1717
"zeus": "lib/index.js"
1818
},
19+
"files": [
20+
"lib",
21+
"starters"
22+
],
1923
"repository": {
2024
"type": "git",
2125
"url": "https://github.com/graphql-editor/graphql-zeus.git"
@@ -27,8 +31,9 @@
2731
"config-maker": "^0.0.6",
2832
"cross-fetch": "^3.0.4",
2933
"graphql-js-tree": "^3.0.4",
30-
"graphql-zeus-core": "^7.1.6",
31-
"graphql-zeus-jsonschema": "^7.1.6",
34+
"graphql-zeus-core": "^7.1.7",
35+
"graphql-zeus-jsonschema": "^7.1.7",
36+
"prompts": "^2.4.2",
3237
"yargs": "^16.1.1"
3338
}
3439
}

0 commit comments

Comments
 (0)