docs(create-client): rename Client Generator in Create Client (#1603)

* docs(create-client): rename Client Generator in Create Client

* Update create-client/vuetify.md

Co-authored-by: Alan Poulain <[email protected]>

Co-authored-by: Alan Poulain <[email protected]>

admin/getting-started.md

@@ -4,24 +4,19 @@
 
 If you use the [API Platform Distribution](../distribution/), API Platform Admin is already installed, you can skip this installation guide.
 
-Otherwise, all you need to install API Platform Admin is a JavaScript package manager. We recommend [Yarn](https://yarnpkg.com/) ([npm](https://www.npmjs.com/) is also supported).
+Otherwise, follow this guide.
 
 If you don't have an existing React Application, create one using [Create React App](https://create-react-app.dev/):
 
 ```console
-yarn create react-app my-admin
-```
-
-Go to the directory of your project:
-
-```console
+npm init react-app my-admin
 cd my-admin
 ```
 
-Finally, install the `@api-platform/admin` library:
+Then, install the `@api-platform/admin` library:
 
 ```console
-yarn add @api-platform/admin
+npm install @api-platform/admin
 ```
 
 ## Creating the Admin
@@ -69,6 +64,6 @@ docker compose exec php \
     bin/console cache:clear --env=prod
 ```
 
-Your new administration interface is ready! Type `yarn start` to try it!
+Your new administration interface is ready! Type `npm start` to try it!
 
 Note: if you don't want to hardcode the API URL, you can [use an environment variable](https://create-react-app.dev/docs/adding-custom-environment-variables).

core/angularjs-integration.md

@@ -1,6 +1,6 @@
 # AngularJS Integration
 
-Warning: for a new project, you should consider using [the API Platform's Progressive Web App generator](../client-generator/index.md)
+Warning: for a new project, you should consider using [the API Platform's Progressive Web App generator](../create-client/index.md)
 (that supports React and Vue.js) instead of this Angular v1 integration.
 
 ## Restangular

core/deprecations.md

@@ -36,8 +36,8 @@ class Parchment
 As you can see, to deprecate a resource, we just have to explain what the client should do to upgrade in the dedicated attribute.
 
 The deprecation will automatically be taken into account by clients supporting the previously mentioned format, including
-[API Platform Admin](../admin/index.md), [API Platform Client Generator](../client-generator/index.md) and the lower level
-[api-doc-parser library](https://github.com/api-platform/api-doc-parser).
+[Admin](../admin/index.md), clients created with [Create Client](../create-client/index.md) and the lower level
+[api-doc-parser](https://github.com/api-platform/api-doc-parser) library.
 
 Here is how it renders for OpenAPI in the built-in Swagger UI shipped with the framework:
 

core/mercure.md

@@ -46,9 +46,9 @@ This header allows smart clients to automatically discover the Mercure hub.
 
 ![Mercure subscriptions](images/mercure-discovery.png)
 
-Clients generated using [the API Platform Client Generator](../client-generator/index.md) will use this capability to automatically subscribe to Mercure updates when available:
+Clients generated using [Create Client](../create-client/index.md) will use this capability to automatically subscribe to Mercure updates when available:
 
-![Screencast](../client-generator/images/client-generator-demo.gif)
+![Screencast](../create-client/images/create-client-demo.gif)
 
 [Learn how to use the discovery capabilities of Mercure in your own clients](https://mercure.rocks/docs/ecosystem/awesome).
 

client-generator/custom.md → create-client/custom.md

@@ -1,28 +1,28 @@
 # Custom Generator
 
-Client Generator provides support for many of the popular JS frameworks, but you may be using another framework or language and may need a solution adapted to your specific needs. For this cenario, you can write your own generator and pass it to the CLI using a path as the `-g` argument.
+Create Client provides support for many of the popular JS frameworks, but you may be using another framework or language and may need a solution adapted to your specific needs. For this cenario, you can write your own generator and pass it to the CLI using a path as the `-g` argument.
 
-You will probably want to extend or, at least, take a look at [BaseGenerator.js](https://github.com/api-platform/client-generator/blob/main/src/generators/BaseGenerator.js), since the library expects some methods to be available, as well as one of the [included generators](https://github.com/api-platform/client-generator/blob/main/src/generators/BaseGenerator.j) to make your own.
+You will probably want to extend or, at least, take a look at [BaseGenerator.js](https://github.com/api-platform/create-client/blob/main/src/generators/BaseGenerator.js), since the library expects some methods to be available, as well as one of the [included generators](https://github.com/api-platform/create-client/blob/main/src/generators/BaseGenerator.j) to make your own.
 
 ## Usage
 
 ```shell
-generate-api-platform-client -g "$(pwd)/path/to/custom/generator.js" -t "$(pwd)/path/to/templates"
+npm init @api-platform/client -g "$(pwd)/path/to/custom/generator.js" -t "$(pwd)/path/to/templates"
 ```
 
 The `-g` argument can point to any resolvable node module which means it can be a package dependency of the current project as well as any js file.
 
 ## Example
 
-Client Generator makes use of the [Handlebars](https://handlebarsjs.com/) template engine. You can use any programming language or file type. Your generator can also pass data to your templates in any shape you want.
+Create Client makes use of the [Handlebars](https://handlebarsjs.com/) template engine. You can use any programming language or file type. Your generator can also pass data to your templates in any shape you want.
 
 In this example, we'll create a simple [Rust](https://www.rust-lang.org) file defining a new `struct` and creating some instances of this `struct`.
 
 ### Generator
 
 ```js
 // ./Generator.js
-import BaseGenerator from "@api-platform/client-generator/lib/generators/BaseGenerator";
+import BaseGenerator from "@api-platform/create-client/lib/generators/BaseGenerator";
 
 export default class extends BaseGenerator {
     constructor(params) {
@@ -94,7 +94,7 @@ fn main() {
 Then we can use our generator:
 
 ```shell
-generate-api-platform-client https://demo.api-platform.com out/ -g "$(pwd)/Generator.js" -t "$(pwd)/template"
+npm init @api-platform/client https://demo.api-platform.com out/ -g "$(pwd)/Generator.js" -t "$(pwd)/template"
 ```
 
 which will produces:

client-generator/index.md → create-client/index.md

@@ -1,9 +1,9 @@
-# The API Platform Client Generator
+# API Platform Create Client
 
-Client Generator is the fastest way to scaffold fully featured webapps
+Create Client is the fastest way to scaffold fully featured webapps
 and native mobile apps from APIs supporting the [Hydra](http://www.hydra-cg.com/) or [OpenAPI](https://www.openapis.org/) format.
 
-![Screencast](images/client-generator-demo.gif)
+![Screencast](images/create-client-demo.gif)
 
 ## Generated React and React Native Apps, Updated in Real Time
 
@@ -18,7 +18,7 @@ It is able to generate apps using the following frontend stacks:
 - [Vue.js](vuejs.md)
 - [Or bring your custom generator](custom.md)
 
-Client Generator works especially well with APIs built with the [API Platform](https://api-platform.com) framework.
+Create Client works especially well with APIs built with the [API Platform](https://api-platform.com) framework.
 
 ## Features
 

create-client/nextjs.md

@@ -0,0 +1,83 @@
+# Next.js Generator
+
+![List screenshot](images/nextjs/create-client-nextjs-list.png)
+
+The Next.js generator scaffolds components for Server Side Rendered applications using [Next.js](https://nextjs.org/).
+
+## Install
+
+The easiest way to get started is to install [the API Platform distribution](../distribution/index.md).
+It contains a Next.js skeleton generated with Create Next App,
+a development Docker container to serve the webapp, and all the API Platform components you may need, including an API server
+supporting Hydra and OpenAPI.
+
+If you use API Platform, jump to the next section!
+
+Alternatively, create a Next.js application by executing:
+
+```console
+# using pnpm (recommended)
+pnpm create next-app --typescript
+# or using npm
+npm init next-app --typescript
+# or using yarn
+yarn create next-app --typescript
+```
+
+Install the required dependencies:
+
+```console
+# using pnpm
+pnpm install isomorphic-unfetch formik react-query
+# or using npm
+npm install isomorphic-unfetch formik react-query
+# or using yarn
+yarn add isomorphic-unfetch formik react-query
+```
+
+## Generating Routes
+
+If you use the API Platform distribution, generating all the code you need for a given resource is as simple as running the following command:
+
+```console
+docker compose exec pwa \
+    pnpm create @api-platform/client --resource book -g next
+```
+
+Omit the resource flag to generate files for all resource types exposed by the API.
+
+If you don't use the standalone installation, run the following command instead:
+
+```console
+# using pnpm
+pnpm create @api-platform/client https://demo.api-platform.com . --generator next --resource book
+# or using npm
+npm init @api-platform/client https://demo.api-platform.com . --generator next --resource book
+# or using yarn
+yarn create @api-platform/client https://demo.api-platform.com . --generator next --resource book
+```
+
+Replace the URL by the entrypoint of your Hydra-enabled API.
+You can also use an OpenAPI documentation with `-f openapi3`.
+
+The code has been generated, and is ready to be executed!
+
+## Starting the Project
+
+You can launch the server with
+
+```console
+# using pnpm
+pnpm dev
+# or using npm
+npm run dev
+# or using yarn
+yarn dev
+```
+
+Go to `http://localhost:3000/books/` to start using your app.
+
+## Screenshots
+
+![List](images/nextjs/create-client-nextjs-list.png)
+![Show](images/nextjs/create-client-nextjs-show.png)

client-generator/nuxtjs.md → create-client/nuxtjs.md

@@ -1,30 +1,23 @@
 # Nuxt.js Generator
 
-The Nuxt.js Client Generator generates components for Server Side Rendered applications using [Nuxt.js](https://nuxtjs.org/) and [Vuetify](https://vuetifyjs.com/).
+The Nuxt.js generator scaffolds components for Server Side Rendered applications using [Nuxt.js](https://nuxtjs.org/) and [Vuetify](https://vuetifyjs.com/).
 
 ## Install
 
 ### Nuxt
 
 Create a [Nuxt.js application](https://nuxtjs.org/guides/get-started/installation#using-create-nuxt-app).
-The easiest way is to execute:
 
 ```console
-npx create-nuxt-app your-app-name
-```
-
-or:
-
-```console
-yarn create nuxt-app your-app-name
+npm init nuxt-app your-app-name
 ```
 
 It will ask you some questions, you can use these answers:
 
 ```console
 Project name: your-app-name
 Programming language: JavaScript
-Package manager: Yarn
+Package manager: NPM
 UI framework: Vuetify.js
 Nuxt.js modules: None
 Linting tools: Prettier, Lint staged files
@@ -38,8 +31,8 @@ Deployment target: Static (Static/JAMStack hosting)
 Install required dependencies:
 
 ```console
-yarn add moment lodash vue-i18n vuelidate vuex-map-fields nuxt-i18n
-yarn add --dev @nuxtjs/vuetify @nuxtjs/fontawesome
+npm install moment lodash vue-i18n vuelidate vuex-map-fields nuxt-i18n
+npm install --dev @nuxtjs/vuetify @nuxtjs/fontawesome
 ```
 
 ## Updating Nuxt Config
@@ -61,11 +54,11 @@ Update your `nuxt.config.js` with following:
 ## Generating Routes
 
 ```console
-npx @api-platform/client-generator https://demo.api-platform.com . --generator nuxt
-# You can also use an OpenAPI documentation with `-f openapi3`.
+npm init @api-platform/client https://demo.api-platform.com . --generator nuxt
 ```
 
 Replace the URL by the entrypoint of your Hydra-enabled API.
+You can also use an OpenAPI documentation with `-f openapi3`.
 
 **Note:** Omit the resource flag to generate files for all resource types exposed by the API.
 
@@ -148,12 +141,12 @@ export default {
 You can launch the server with:
 
 ```console
-yarn dev
+npm run dev
 ````
 
 Go to `https://localhost:3000/books/` to start using your app.
 
 ## Screenshots
 
-![List](images/nuxtjs/client-generator-nuxtjs-list.png)  
-![Edit](images/nuxtjs/client-generator-nuxtjs-edit.png)
+![List](images/nuxtjs/create-client-nuxtjs-list.png)  
+![Edit](images/nuxtjs/create-client-nuxtjs-edit.png)

client-generator/quasar.md → create-client/quasar.md

@@ -11,11 +11,12 @@ cd my-app
 In the app directory, generate the files for the resource you want:
 
 ```console
-npx @api-platform/client-generator https://demo.api-platform.com src/ --generator quasar --resource foo
-# You can also use an OpenAPI documentation with `-f openapi3`.
+npm init @api-platform/client https://demo.api-platform.com src/ --generator quasar --resource foo
 ```
 
 Replace the URL by the entrypoint of your Hydra-enabled API.
+You can also use an OpenAPI documentation with `-f openapi3`.
+
 Omit the resource flag to generate files for all resource types exposed by the API.
 
 The code is ready to be executed! Register the generated routes: