docs(docs): add examples section (nrwl#3165)

Co-authored-by: Isaac Mann <[email protected]>
bekos · Jun 13, 2020 · e82642d · e82642d
1 parent c2fa23c
commit e82642d
Show file tree

Hide file tree

Showing 10 changed files with 81 additions and 5 deletions.
diff --git a/docs/angular/examples/apollo-angular.md b/docs/angular/examples/apollo-angular.md
@@ -0,0 +1,12 @@
+# Using Apollo GraphQL with Angular in an Nx Workspace
+
+In this article, you’ll learn how to:
+
+- Create an Nx workspace for both frontend and backend applications
+- Create a GraphQL API using NestJS
+- Autogenerate frontend code based on your GraphQL schema
+- Create an Angular application to consume your GraphQL api
+
+**Blog Post:** [Using Apollo GraphQL with Angular in an Nx Workspace](https://blog.nrwl.io/using-apollo-graphql-with-angular-in-an-nx-workspace-9ad0155c1914)
+
+**Repository:** [nx-apollo-angular-example](https://github.com/nrwl/nx-apollo-angular-example)
diff --git a/docs/angular/guides/react-affected.png → docs/angular/examples/react-affected.png b/docs/angular/guides/react-affected.png → docs/angular/examples/react-affected.png
diff --git a/docs/angular/guides/react-affected2.png → docs/angular/examples/react-affected2.png b/docs/angular/guides/react-affected2.png → docs/angular/examples/react-affected2.png
diff --git a/docs/angular/guides/react-and-angular.md → docs/angular/examples/react-and-angular.md b/docs/angular/guides/react-and-angular.md → docs/angular/examples/react-and-angular.md
@@ -218,7 +218,7 @@ Nx provides a uniform tool for development the commands used for React developme
 
 TypeScript support, Jest, Cypress, source maps, watch mode--all work with React out of the box. If we run ng serve reactapp, we will see the following:
 
-![serve screenshot](./react-serve.png)
+![serve screenshot](/assets/content/angular/examples/react-serve.png)
 
 ## Creating Shared Components
 
@@ -417,7 +417,7 @@ But Nx can do a lot more than that.
 
 If we run `yarn dep-graph`, we will see the following:
 
-![serve screenshot](./react-dep-graph.png)
+![serve screenshot](/assets/content/angular/examples/react-dep-graph.png)
 
 Nx understands how our applications and libraries depend on each other. This is extremely important! To really improve the collaboration between teams and make sure that they can use each other's work, the following two things must be true:
 
@@ -433,7 +433,7 @@ git commit -am 'great commit'
 
 Next, let's create a new branch `git checkout -b angularchange`. In this branch, let's introduce any change to app.component.html and run `yarn affected:dep-graph`.
 
-![serve screenshot](./react-affected.png)
+![serve screenshot](/assets/content/angular/examples/react-affected.png)
 
 As you can see, Nx knows that this change only affects the `angularapp` and nothing else. Nx can use this information to rebuild and retest only the angularapp:
 
@@ -444,7 +444,7 @@ yarn affected:build # only builds angularapp
 
 Now, let's introduce a change to `greeting.element.ts` and run `yarn affected:dep-graph`.
 
-![serve screenshot](./react-affected2.png)
+![serve screenshot](/assets/content/angular/examples/react-affected2.png)
 
 Both `angularapp` and `reactapp` are affected by this change because they both depend on the greeting component.
 

diff --git a/docs/angular/guides/react-dep-graph.png → docs/angular/examples/react-dep-graph.png b/docs/angular/guides/react-dep-graph.png → docs/angular/examples/react-dep-graph.png
diff --git a/docs/angular/guides/react-serve.png → docs/angular/examples/react-serve.png b/docs/angular/guides/react-serve.png → docs/angular/examples/react-serve.png
diff --git a/docs/map.json b/docs/map.json
@@ -880,10 +880,20 @@
         "name": "Examples",
         "id": "examples",
         "itemList": [
+          {
+            "name": "Nx Micro-Frontend Example",
+            "id": "nx-examples",
+            "file": "shared/examples/nx-examples"
+          },
           {
             "name": "Building Angular and React Applications Together With Nx",
             "id": "react-and-angular",
-            "file": "angular/guides/react-and-angular"
+            "file": "angular/examples/react-and-angular"
+          },
+          {
+            "name": "Using Apollo GraphQL",
+            "id": "apollo-angular",
+            "file": "angular/examples/apollo-angular"
           }
         ]
       }
@@ -1755,6 +1765,27 @@
             "file": "react/guides/js-and-ts"
           }
         ]
+      },
+      {
+        "name": "Examples",
+        "id": "examples",
+        "itemList": [
+          {
+            "name": "Nx Micro-Frontend Example",
+            "id": "nx-examples",
+            "file": "shared/examples/nx-examples"
+          },
+          {
+            "name": "Powering Up React Development With Nx",
+            "id": "react-nx",
+            "file": "react/examples/react-nx"
+          },
+          {
+            "name": "Using Apollo GraphQL",
+            "id": "apollo-react",
+            "file": "react/examples/apollo-react"
+          }
+        ]
       }
     ]
   }

diff --git a/docs/react/examples/apollo-react.md b/docs/react/examples/apollo-react.md
@@ -0,0 +1,12 @@
+# Using Apollo GraphQL with React in an Nx Workspace
+
+In this article, you’ll learn how to:
+
+- Create an Nx workspace for both frontend and backend applications
+- Create a GraphQL API using NestJS
+- Autogenerate frontend code based on your GraphQL schema
+- Create a React application to consume your GraphQL api
+
+**Blog Post:** [Using Apollo GraphQL with React in an Nx Workspace](https://blog.nrwl.io/using-apollo-graphql-with-react-in-an-nx-workspace-99db8d69ceb)
+
+**Repository:** [nx-apollo-react-example](https://github.com/nrwl/nx-apollo-react-example)
diff --git a/docs/react/examples/react-nx.md b/docs/react/examples/react-nx.md
@@ -0,0 +1,12 @@
+# Powering Up React Development With Nx
+
+Learn to:
+
+- Generate a new React monorepo workspace with one application.
+- Add new feature libraries and route to them from our application.
+- Generate React components with a schematic
+- Generate a NestJS app in the same monorepo
+
+**Blog post:** [Powering Up React Development With Nx](https://blog.nrwl.io/powering-up-react-development-with-nx-cf0a9385dbec)
+
+**Repository:** [nrwl/react-nx-example](https://github.com/nrwl/react-nx-example)
diff --git a/docs/shared/examples/nx-examples.md b/docs/shared/examples/nx-examples.md
@@ -0,0 +1,9 @@
+# Nx Micro-Frontend Example
+
+This repository contains a single book store website that serves a React app for some routes and an Angular app for other routes. Both apps make use of web components to share UI.
+
+The repository is kept up to date with the latest version of Nx and is used as a smoke test for migrations to new versions of Nx.
+
+**Repository:** [nx-examples](https://github.com/nrwl/nx-examples)
+
+**Live Demo:** [Nx Store](https://nrwl-nx-examples-cart.netlify.app/cart)