docs: update client generator (#1601)

Author: alanpoulain

client-generator/index.md

@@ -1,37 +1,38 @@
 # The API Platform Client Generator
 
-Client Generator is the fastest way to scaffold fully featured webapps and native mobile apps from APIs supporting the [Hydra](http://www.hydra-cg.com/) format.
+Client Generator 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)
 
 ## Generated React and React Native Apps, Updated in Real Time
 
 It is able to generate apps using the following frontend stacks:
 
--   [Next.js](nextjs.md)
--   [Nuxt.js](nuxtjs.md)
--   [Quasar Framework](quasar.md)
--   [Vuetify](vuetify.md)
--   [React with Redux](react.md)
--   [React Native](react-native.md)
--   [Vue.js](vuejs.md)
--   [Or bring your custom generator](custom.md)
+- [React](react.md)
+- [Next.js](nextjs.md)
+- [React Native](react-native.md)
+- [Vue.js](vuejs.md)
+- [Nuxt.js](nuxtjs.md)
+- [Quasar Framework](quasar.md)
+- [Vuetify](vuetify.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.
 
 ## Features
 
--   Generates high-quality ES6:
-    -   list view (with pagination)
-    -   detail view
-    -   creation form
-    -   update form
-    -   delete button
--   Supports to-one and to-many relations
--   Uses the appropriate input type (`number`, `date`...)
--   Client-side validation
--   Subscribes to data updates pushed by servers supporting [the Mercure protocol](https://mercure.rocks)
--   Displays server-side validation errors under the related input (if using API Platform Core)
--   Integration with [Bootstrap](https://getbootstrap.com/) and [FontAwesome](https://fontawesome.com/) (Progressive Web Apps)
--   Integration with [React Native Elements](https://react-native-training.github.io/react-native-elements/)
--   Accessible to people with disabilities ([ARIA](https://www.w3.org/WAI/intro/aria) support in webapps)
+- Generates high-quality ES6:
+  - list view (with pagination)
+  - detail view
+  - creation form
+  - update form
+  - delete button
+- Supports to-one and to-many relations
+- Uses the appropriate input type (`number`, `date`...)
+- Client-side validation
+- Subscribes to data updates pushed by servers supporting [the Mercure protocol](https://mercure.rocks)
+- Displays server-side validation errors under the related input (if using API Platform Core)
+- Integration with [Bootstrap](https://getbootstrap.com/) and [FontAwesome](https://fontawesome.com/) (Progressive Web Apps)
+- Integration with [React Native Elements](https://react-native-training.github.io/react-native-elements/)
+- Accessible to people with disabilities ([ARIA](https://www.w3.org/WAI/intro/aria) support in webapps)

client-generator/nextjs.md

@@ -2,42 +2,59 @@
 
 ![List screenshot](images/nextjs/client-generator-nextjs-list.png)
 
-The Next.js Client Generator generates components for Server Side Rendered applications using [Next.js](https://zeit.co/blog/next)
+The Next.js Client Generator generates components for Server Side Rendered applications using [Next.js](https://nextjs.org/).
 
 ## Install
 
-### Next + Express Server
+The easiest way to get started is to install [the API Platform distribution](../distribution/index.md).
+It contains the Client Generator, all dependencies it needs, 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.
 
-Create a [Next.js application with express server](https://github.com/zeit/next.js/tree/canary/examples/custom-server-express). The easiest way is to execute:
+If you use API Platform, jump to the next section!
 
-    $ npx create-next-app your-app-name
-    # or
-    $ yarn create next-app your-app-name
+Alternatively, create a Next.js application by executing:
 
-### Installing the Generator Dependencies
+```console
+npx create-next-app --typescript your-app-name
+# or
+yarn create next-app --typescript your-app-name
+```
 
-Enable TypeScript in your next project
+Install the required dependencies:
 
-    yarn add --dev typescript @types/react @types/node
+```console
+yarn add isomorphic-unfetch formik react-query
+```
 
-Install required dependencies:
+## Generating Routes
 
-    yarn add lodash.get lodash.has @types/lodash isomorphic-unfetch formik
+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:
 
-## Generating Routes
+```console
+docker compose exec client \
+    generate-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:
 
-    $ npx @api-platform/client-generator https://demo.api-platform.com . --generator next --resource book
-    # Replace the URL by the entrypoint of your Hydra-enabled API
-    # Omit the resource flag to generate files for all resource types exposed by the API.
+```console
+npx @api-platform/client-generator 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`.
+```
 
-> Note: On the [API Platform distribution](https://github.com/api-platform/api-platform), you can run
-> `generate-api-platform-client` instead of `npx @api-platform/client-generator`.
+The code has been generated, and is ready to be executed!
 
 ## Starting the Project
 
 You can launch the server with
 
-    yarn dev
+```console
+yarn dev
+```
 
 Go to `http://localhost:3000/books/` to start using your app.
 

client-generator/nuxtjs.md

@@ -6,7 +6,8 @@ The Nuxt.js Client Generator generates components for Server Side Rendered appli
 
 ### Nuxt
 
-Create a [Nuxt.js application](https://nuxtjs.org/guides/get-started/installation#using-create-nuxt-app). The easiest way is to execute:  
+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
@@ -18,7 +19,7 @@ or:
 yarn create nuxt-app your-app-name
 ```
 
-It will ask you some questions you can use these answers :
+It will ask you some questions, you can use these answers:
 
 ```console
 Project name: your-app-name
@@ -41,7 +42,7 @@ yarn add moment lodash vue-i18n vuelidate vuex-map-fields nuxt-i18n
 yarn add --dev @nuxtjs/vuetify @nuxtjs/fontawesome
 ```
 
-## Updating nuxtjs config
+## Updating Nuxt Config
 
 Update your `nuxt.config.js` with following:
 
@@ -54,20 +55,21 @@ Update your `nuxt.config.js` with following:
   ],
   // ...
   // to avoid name conflicts in generators
-  components: false,  
+  components: false,
 ```
 
 ## 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`.
 ```
 
-Replace the URL by the entrypoint of your Hydra-enabled API
+Replace the URL by the entrypoint of your Hydra-enabled API.
 
 **Note:** Omit the resource flag to generate files for all resource types exposed by the API.
 
-## Updating default layout
+## Updating Default Layout
 
 Update your `layouts/default.vue` with following:
 

client-generator/quasar.md

@@ -12,6 +12,7 @@ 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`.
 ```
 
 Replace the URL by the entrypoint of your Hydra-enabled API.

client-generator/react-native.md

@@ -7,7 +7,7 @@
 To use this generator you need [Node.js](https://nodejs.org/) and [Yarn](https://yarnpkg.com/) (or [npm](https://www.npmjs.com/)) installed.
 To run the command line tool, we also recommend using [npx](https://www.npmjs.com/package/npx).
 
-Create a React Native application using [Expo CLI](https://docs.expo.io/workflow/expo-cli/).
+Create a React Native application using [Expo CLI](https://docs.expo.io/workflow/expo-cli/):
 
 ```console
 yarn global add expo-cli
@@ -32,6 +32,7 @@ In the app directory, generate the files for the resource you want:
 
 ```console
 npx @api-platform/client-generator https://demo.api-platform.com . --generator react-native --resource book
+# You can also use an OpenAPI documentation with `-f openapi3`.
 ```
 
 Replace the URL with the entrypoint of your Hydra-enabled API.
@@ -46,15 +47,13 @@ import { Router, Stack } from 'react-native-router-flux';
 // Replace "book" with the name of the resource type
 import BookRoutes from './routes/book';
 
-const RouterComponent = () => {
-  return (
-      <Router>
-        <Stack key="root">
-          {BookRoutes}
-        </Stack>
-      </Router>
-  );
-};
+const RouterComponent = () => (
+  <Router>
+    <Stack key="root">
+      {BookRoutes}
+    </Stack>
+  </Router>
+);
 
 export default RouterComponent;
 ```
@@ -94,11 +93,11 @@ export default class App extends Component {
       form
     }), {}, applyMiddleware(thunk));
     return (
-        <Provider store={store}>
-          <View style={{flex: 1}}>
-            <Router/>
-          </View>
-        </Provider>
+      <Provider store={store}>
+        <View style={{flex: 1}}>
+          <Router/>
+        </View>
+      </Provider>
     );
   }
 }