chore: add nx demo (#854)

* chore: add nx

* chore: cleanup

* chore: prettier ignore demo thanks

* chore: config netlify toml

* chore: fix path to lib

* chore: fix package.json preinstall path

* chore: fix test

* chore: fix test

* chore: ignore all dists

* chore: ignore all dists again

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: Tiffany Le-Nguyen

.eslintignore

@@ -1,4 +1,5 @@
 .next
 node_modules
 test
-lib
+lib
+demos

.gitignore

@@ -40,7 +40,7 @@ bower_components
 build/Release
 
 # Dependency directories
-node_modules/
+**/node_modules/
 jspm_packages/
 
 # TypeScript v1 declaration files
@@ -84,7 +84,8 @@ typings/
 
 # Nuxt.js build / generate output
 .nuxt
-dist
+**/dist
+**/.dist
 
 # Gatsby files
 .cache/

.prettierignore

@@ -17,4 +17,5 @@ node_modules
 
 # Test
 lib
-tsconfig.json
+tsconfig.json
+demos

cypress/config/ci.json

@@ -1,6 +1,6 @@
 {
   "baseUrl": "http://localhost:3000",
-  "integrationFolder": "../../cypress/integration",
+  "integrationFolder": "../../cypress/integration/default",
   "pluginsFile": "../../cypress/plugins",
   "screenshotsFolder": "../../cypress/screenshots",
   "supportFile": "../../cypress/support/index.js",

cypress/config/nx-demo.json

@@ -0,0 +1,8 @@
+{
+  "baseUrl": "http://localhost:4200",
+  "integrationFolder": "../../cypress/integration/nx",
+  "pluginsFile": "../../cypress/plugins",
+  "screenshotsFolder": "../../cypress/screenshots",
+  "supportFile": "../../cypress/support/index.js",
+  "videoFolder": "../../cypress/videos"
+}

cypress/integration/custom-errors.spec.ts renamed to cypress/integration/default/custom-errors.spec.ts

@@ -0,0 +1,12 @@
+describe('Default site', () => {
+  beforeEach(() => {
+    cy.visit('/')
+  })
+
+  it('loads home page', () => {
+    cy.findByRole('heading', { name: 'Welcome to nx-nextjs-monorepo!' })
+
+    cy.visit('//')
+    cy.url().should('eq', `${Cypress.config().baseUrl}/`)
+  })
+})

cypress/integration/default.spec.ts renamed to cypress/integration/default/default.spec.ts

@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "preinstall": "cd ../.. && npm i"
+    "preinstall": "cd ../../.. && npm i"
   },
   "author": "",
   "license": "ISC"

cypress/integration/dynamic-routes.spec.ts renamed to cypress/integration/default/dynamic-routes.spec.ts

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

cypress/integration/headers.spec.ts renamed to cypress/integration/default/headers.spec.ts

@@ -0,0 +1,35 @@
+{
+  "root": true,
+  "ignorePatterns": ["**/*"],
+  "plugins": ["@nrwl/nx"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@nrwl/nx/enforce-module-boundaries": [
+          "error",
+          {
+            "enforceBuildableLibDependency": true,
+            "allow": [],
+            "depConstraints": [
+              {
+                "sourceTag": "*",
+                "onlyDependOnLibsWithTags": ["*"]
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "extends": ["plugin:@nrwl/nx/typescript"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "extends": ["plugin:@nrwl/nx/javascript"],
+      "rules": {}
+    }
+  ]
+}

cypress/integration/i18n.spec.ts renamed to cypress/integration/default/i18n.spec.ts

@@ -0,0 +1,4 @@
+# Add files here to ignore them from prettier formatting
+
+/dist
+/coverage

cypress/integration/images.spec.ts renamed to cypress/integration/default/images.spec.ts

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

cypress/integration/preview.spec.ts renamed to cypress/integration/default/preview.spec.ts

@@ -0,0 +1,96 @@
+# NxNextjsMonorepo
+
+This project was generated using [Nx](https://nx.dev). It is a demo site to test that Nx monorepos work properly with the Netlify Essential NextJS plugin.
+
+<p style="text-align: center;"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="450"></p>
+
+🔎 **Smart, Extensible Build Framework**
+
+## Adding capabilities to your workspace
+
+Nx supports many plugins which add capabilities for developing different types of applications and different tools.
+
+These capabilities include generating applications, libraries, etc as well as the devtools to test, and build projects
+as well.
+
+Below are our core plugins:
+
+- [React](https://reactjs.org)
+  - `npm install --save-dev @nrwl/react`
+- Web (no framework frontends)
+  - `npm install --save-dev @nrwl/web`
+- [Angular](https://angular.io)
+  - `npm install --save-dev @nrwl/angular`
+- [Nest](https://nestjs.com)
+  - `npm install --save-dev @nrwl/nest`
+- [Express](https://expressjs.com)
+  - `npm install --save-dev @nrwl/express`
+- [Node](https://nodejs.org)
+  - `npm install --save-dev @nrwl/node`
+
+There are also many [community plugins](https://nx.dev/community) you could add.
+
+## Generate an application
+
+Run `nx g @nrwl/react:app my-app` to generate an application.
+
+> You can use any of the plugins above to generate applications as well.
+
+When using Nx, you can create multiple applications and libraries in the same workspace.
+
+## Generate a library
+
+Run `nx g @nrwl/react:lib my-lib` to generate a library.
+
+> You can also use any of the plugins above to generate libraries as well.
+
+Libraries are shareable across libraries and applications. They can be imported from `@nx-nextjs-monorepo/mylib`.
+
+## Development server
+
+Run `nx serve my-app` for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you
+change any of the source files.
+
+## Code scaffolding
+
+Run `nx g @nrwl/react:component my-component --project=my-app` to generate a new component.
+
+## Build
+
+Run `nx build my-app` to build the project. The build artifacts will be stored in the `dist/` directory. Use the
+`--prod` flag for a production build.
+
+## Running unit tests
+
+Run `nx test my-app` to execute the unit tests via [Jest](https://jestjs.io).
+
+Run `nx affected:test` to execute the unit tests affected by a change.
+
+## Running end-to-end tests
+
+Run `ng e2e my-app` to execute the end-to-end tests via [Cypress](https://www.cypress.io).
+
+Run `nx affected:e2e` to execute the end-to-end tests affected by a change.
+
+## Understand your workspace
+
+Run `nx dep-graph` to see a diagram of the dependencies of your projects.
+
+## Further help
+
+Visit the [Nx Documentation](https://nx.dev) to learn more.
+
+## ☁ Nx Cloud
+
+### Distributed Computation Caching & Distributed Task Execution
+
+<p style="text-align: center;"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-cloud-card.png"></p>
+
+Nx Cloud pairs with Nx in order to enable you to build and test code more rapidly, by up to 10 times. Even teams that
+are new to Nx can connect to Nx Cloud and start saving time instantly.
+
+Teams using Nx gain the advantage of building full-stack applications with their preferred framework alongside Nx’s
+advanced code generation and project dependency graph, plus a unified experience for both frontend and backend
+developers.
+
+Visit [Nx Cloud](https://nx.app/) to learn more.

cypress/integration/rewrites-redirects.spec.ts renamed to cypress/integration/default/rewrites-redirects.spec.ts

@@ -0,0 +1,10 @@
+{
+  "extends": ["plugin:cypress/recommended", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

cypress/integration/test.spec.ts renamed to cypress/integration/default/test.spec.ts

@@ -0,0 +1,12 @@
+{
+  "fileServerFolder": ".",
+  "fixturesFolder": "./src/fixtures",
+  "integrationFolder": "./src/integration",
+  "modifyObstructiveCode": false,
+  "supportFile": "./src/support/index.ts",
+  "pluginsFile": false,
+  "video": true,
+  "videosFolder": "../../dist/cypress/apps/demo-monorepo-e2e/videos",
+  "screenshotsFolder": "../../dist/cypress/apps/demo-monorepo-e2e/screenshots",
+  "chromeWebSecurity": false
+}

cypress/integration/trailing-slash.spec.ts renamed to cypress/integration/default/trailing-slash.spec.ts

@@ -0,0 +1,28 @@
+{
+  "root": "apps/demo-monorepo-e2e",
+  "sourceRoot": "apps/demo-monorepo-e2e/src",
+  "projectType": "application",
+  "targets": {
+    "e2e": {
+      "executor": "@nrwl/cypress:cypress",
+      "options": {
+        "cypressConfig": "apps/demo-monorepo-e2e/cypress.json",
+        "devServerTarget": "demo-monorepo:serve"
+      },
+      "configurations": {
+        "production": {
+          "devServerTarget": "demo-monorepo:serve:production"
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["apps/demo-monorepo-e2e/**/*.{js,ts}"]
+      }
+    }
+  },
+  "tags": [],
+  "implicitDependencies": ["demo-monorepo"]
+}

cypress/integration/nx/general.spec.ts

@@ -0,0 +1,4 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io"
+}

demos/default/local-plugin/package.json

@@ -0,0 +1,13 @@
+import { getGreeting } from '../support/app.po';
+
+describe('demo-monorepo', () => {
+  beforeEach(() => cy.visit('/'));
+
+  it('should display welcome message', () => {
+    // Custom command example, see `../support/commands.ts` file
+    cy.login('my-email@something.com', 'myPassword');
+
+    // Function helper example, see `../support/app.po.ts` file
+    getGreeting().contains('Welcome to demo-monorepo!');
+  });
+});

demos/nx-next-monorepo-demo/.editorconfig

@@ -0,0 +1 @@
+export const getGreeting = () => cy.get('h1');

demos/nx-next-monorepo-demo/.eslintrc.json

@@ -0,0 +1,33 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare namespace Cypress {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface Chainable<Subject> {
+    login(email: string, password: string): void;
+  }
+}
+//
+// -- This is a parent command --
+Cypress.Commands.add('login', (email, password) => {
+  console.log('Custom command example: Login', email, password);
+});
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

demos/nx-next-monorepo-demo/.prettierignore

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';

demos/nx-next-monorepo-demo/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "sourceMap": false,
+    "outDir": "../../dist/out-tsc",
+    "allowJs": true,
+    "types": ["cypress", "node"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.js"]
+}