refactor: replace wunderctl init with npx create-wundergraph-app (#337)

* refactor: replace wunderctl init with npx create-wundergraph-app

* refactor: modify getting started page

* refactor: replace old getting started command with npx create-wundergraph-app

* chore: remove templates

* chore: remove copy templates to cli script

* fix: update Makefile

* fix: modify script command

* chore: remove init command from wunderctl

* feat: add create-wundergraph-app to navigation and tags

* feat: add docs for create-wundergraph-app

* fix: replace wunderctl init with create-wundergraph-app

* fix: modify the error message

Co-authored-by: Alberto García Hierro <alberto@garciahierro.com>

Author: JivusAyrus

Makefile

@@ -31,9 +31,6 @@ test-ts:
 
 test: test-go test-ts
 
-format-templates:
-	pnpx prettier --write pkg/templates/assets/templates --ignore-unknown
-
 golang-ci:
 	 golangci-lint run
 
@@ -65,8 +62,4 @@ run:
 install:
 	cd cmd/wunderctl && go install
 
-update-examples:
-	cd examples && rm -rf simple && mkdir simple && cd simple && wunderctl init
-
-
 .PHONY: codegen build run tag install-proto format-templates dev all check-local docs wunderctl build-docs bootstrap-minio

README.md

@@ -119,7 +119,7 @@ have a look at these [annotated example snippets](docs/at-a-glance.md).
 This section provides a high-level overview of how WunderGraph works and its most consumer centric components. For a
 more thorough introduction, visit the [architecture](./docs/architecture) documentation.
 
-After initializing your first WunderGraph application with `npx @wundergraph/wunderctl init`, you have a NPM package and
+After initializing your first WunderGraph application with `npx create-wundergraph-app <project-name> -E simple`, you have a NPM package and
 a `.wundergraph` folder. This folder contains the following files:
 
 - `wundergraph.config.ts` - The primary config file for your WunderGraph application. Add data-sources and more.

cli/commands/init.go

@@ -540,6 +540,10 @@ const navigation = [
 				title: 'Overview',
 				href: '/docs/components-of-wundergraph',
 			},
+			{
+				title: 'create-wundergraph-app',
+				href: '/docs/components-of-wundergraph/create-wundergraph-app',
+			},
 			{
 				title: 'wunderctl',
 				href: '/docs/components-of-wundergraph/wunderctl',

docs-website/config/navigation.js

@@ -5,6 +5,8 @@ const tags = {
 	'WunderGraph SDK': '/docs/components-of-wundergraph/wundergraph-sdk',
 	'TypeScript SDK': '/docs/components-of-wundergraph/wundergraph-sdk',
 	'WunderGraph CLI': '/docs/components-of-wundergraph/wunderctl',
+	'create-wundergraph-app':
+		'/docs/components-of-wundergraph/create-wundergraph-app',
 	CLI: '/docs/components-of-wundergraph/wunderctl',
 	wunderctl: '/docs/components-of-wundergraph/wunderctl',
 	'_join field': '/docs/core-concepts/_join-field',

docs-website/config/tags.js

@@ -10,7 +10,10 @@ import blurIndigoImage from '@/images/blur-indigo.png'
 import { CodeBlock } from './CodeBlock'
 const codeLanguage = 'shell'
 const code = `# Create a new project
-npx -y @wundergraph/wunderctl init \\\n\t--template nextjs-starter
+npx create-wundergraph-app my-project -E nextjs
+
+# Move the the project directory
+cd my-project
 
 # Install dependencies and start
 npm i && npm start`

docs-website/src/components/Hero.jsx

@@ -0,0 +1,27 @@
+---
+title: create-wundergraph-app
+pageTitle: WunderGraph - create-wundergraph-app
+description:
+---
+
+The cmd `npx create-wundergraph-app <project-name>` is used to initialize a new WunderGraph project.
+
+## WunderGraph & Next.js
+
+```shell
+npx create-wundergraph-app <project-name> -E nextjs
+```
+
+### WunderGraph & Next.js & PostgreSQL
+
+```shell
+npx create-wundergraph-app <project-name> -E nextjs-postgres-prisma
+```
+
+### Publish your API to WunderHub
+
+Use this template to easily publish an API to WunderHub.
+
+```shell
+npx create-wundergraph-app <project-name> -E publish-install-api
+```

docs-website/src/pages/docs/components-of-wundergraph/create-wundergraph-app.md

@@ -10,6 +10,7 @@ isIndexFile: true
 Here's an overview of the components of WunderGraph.
 
 {% quick-links %}
+{% quick-link title="create-wundergraph-app" icon="core" href="/docs/components-of-wundergraph/create-wundergraph-app" description="" /%}
 {% quick-link title="wunderctl" icon="core" href="/docs/components-of-wundergraph/wunderctl" description="" /%}
 {% quick-link title="WunderGraph SDK" icon="core" href="/docs/components-of-wundergraph/wundergraph-sdk" description="" /%}
 {% quick-link title="WunderNode / WunderGraph Server" icon="core" href="/docs/components-of-wundergraph/wundernode-wundergraph-server" description="" /%}

docs-website/src/pages/docs/components-of-wundergraph/index.md

@@ -5,8 +5,7 @@ description:
 ---
 
 The WunderGraph cli, also called `wunderctl` is the main entry point to use WunderGraph.
-You can use it to start new projects, e.g. using `wunderctl init`,
-you can generate code with `wunderctl generate`,
+You can generate code with `wunderctl generate`,
 and you can use the WunderGraph Hub to manage API dependencies via `wunderctl add` or `wunderctl publish`.
 
 The cli is written in Go, and it's available [in our monorepo](https://github.com/wundergraph/wundergraph).

docs-website/src/pages/docs/components-of-wundergraph/wunderctl.md

@@ -76,13 +76,13 @@ creates an Application from it and then builds your WunderGraph configuration in
 
 ## Getting Started
 
-The easiest way to get started is using our CLI, wunderctl.
+The easiest way to get started is using our 'create-wundergraph-app' npx command.
 
 To start a new project use the following command,
 is scaffolds all required files:
 
 ```
-wunderctl init
+npx create-wundergraph-app <project-name>
 ```
 
 More documentation on the configuration wundergraph.config.ts reference.