Skip to content

chore: add nx demo #854

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Nov 30, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .eslintignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
.next
node_modules
test
lib
lib
demos
5 changes: 3 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ bower_components
build/Release

# Dependency directories
node_modules/
**/node_modules/
jspm_packages/

# TypeScript v1 declaration files
Expand Down Expand Up @@ -84,7 +84,8 @@ typings/

# Nuxt.js build / generate output
.nuxt
dist
**/dist
**/.dist

# Gatsby files
.cache/
Expand Down
3 changes: 2 additions & 1 deletion .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,5 @@ node_modules

# Test
lib
tsconfig.json
tsconfig.json
demos
2 changes: 1 addition & 1 deletion cypress/config/ci.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
8 changes: 8 additions & 0 deletions cypress/config/nx-demo.json
Original file line number Diff line number Diff line change
@@ -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"
}
12 changes: 12 additions & 0 deletions cypress/integration/nx/general.spec.ts
Original file line number Diff line number Diff line change
@@ -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('//')
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why //?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was to test that trailing slashes work as expected (aka default removes it)

cy.url().should('eq', `${Cypress.config().baseUrl}/`)
})
})
2 changes: 1 addition & 1 deletion demos/default/local-plugin/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"description": "",
"main": "index.js",
"scripts": {
"preinstall": "cd ../.. && npm i"
"preinstall": "cd ../../.. && npm i"
},
"author": "",
"license": "ISC"
Expand Down
13 changes: 13 additions & 0 deletions demos/nx-next-monorepo-demo/.editorconfig
Original file line number Diff line number Diff line change
@@ -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
35 changes: 35 additions & 0 deletions demos/nx-next-monorepo-demo/.eslintrc.json
Original file line number Diff line number Diff line change
@@ -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": {}
}
]
}
4 changes: 4 additions & 0 deletions demos/nx-next-monorepo-demo/.prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
# Add files here to ignore them from prettier formatting

/dist
/coverage
3 changes: 3 additions & 0 deletions demos/nx-next-monorepo-demo/.prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"singleQuote": true
}
96 changes: 96 additions & 0 deletions demos/nx-next-monorepo-demo/README.md
Original file line number Diff line number Diff line change
@@ -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.
Empty file.
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"extends": ["plugin:cypress/recommended", "../../.eslintrc.json"],
"ignorePatterns": ["!**/*"],
"overrides": [
{
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
"rules": {}
}
]
}
12 changes: 12 additions & 0 deletions demos/nx-next-monorepo-demo/apps/demo-monorepo-e2e/cypress.json
Original file line number Diff line number Diff line change
@@ -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
}
28 changes: 28 additions & 0 deletions demos/nx-next-monorepo-demo/apps/demo-monorepo-e2e/project.json
Original file line number Diff line number Diff line change
@@ -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"]
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"name": "Using fixtures to represent data",
"email": "hello@cypress.io"
}
Original file line number Diff line number Diff line change
@@ -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!');
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const getGreeting = () => cy.get('h1');
Original file line number Diff line number Diff line change
@@ -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) => { ... })
Original file line number Diff line number Diff line change
@@ -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';
Original file line number Diff line number Diff line change
@@ -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"]
}
Loading