diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..6e87a00 --- /dev/null +++ b/.editorconfig @@ -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 diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 0000000..428f2b2 --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,38 @@ +name: CI + +on: + push: + branches: + - main + pull_request: + +permissions: + actions: read + contents: read + +jobs: + main: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + with: + fetch-depth: 0 + + # This enables task distribution via Nx Cloud + # Run this command as early as possible, before dependencies are installed + # Learn more at https://nx.dev/ci/reference/nx-cloud-cli#npx-nxcloud-startcirun + - run: npx nx-cloud start-ci-run --distribute-on="3 linux-medium-js" --stop-agents-after="e2e-ci" + + # Cache node_modules + - uses: actions/setup-node@v4 + with: + node-version: 20 + cache: 'npm' + + - run: npm ci --legacy-peer-deps + - uses: nrwl/nx-set-shas@v4 + + # Prepend any command with "nx-cloud record --" to record its logs to Nx Cloud + # - run: npx nx-cloud record -- echo Hello World + # Nx Affected runs only tasks affected by the changes in this PR/commit. Learn more: https://nx.dev/ci/features/affected + - run: npx nx affected -t lint test build e2e-ci diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a33616c --- /dev/null +++ b/.gitignore @@ -0,0 +1,44 @@ +# See http://help.github.com/ignore-files/ for more about ignoring files. + +# compiled output +dist +tmp +/out-tsc + +# dependencies +node_modules + +# IDEs and editors +/.idea +.project +.classpath +.c9/ +*.launch +.settings/ +*.sublime-workspace + +# IDE - VSCode +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json + +# misc +/.sass-cache +/connect.lock +/coverage +/libpeerconnection.log +npm-debug.log +yarn-error.log +testem.log +/typings + +# System Files +.DS_Store +Thumbs.db + +.nx/cache +.nx/workspace-data + +**/vite.config.{js,ts,mjs,mts,cjs,cts}.timestamp* \ No newline at end of file diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..e26f0b3 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,5 @@ +# Add files here to ignore them from prettier formatting +/dist +/coverage +/.nx/cache +/.nx/workspace-data \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..544138b --- /dev/null +++ b/.prettierrc @@ -0,0 +1,3 @@ +{ + "singleQuote": true +} diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..4e31133 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,8 @@ +{ + "recommendations": [ + "nrwl.angular-console", + "esbenp.prettier-vscode", + "ms-playwright.playwright", + "firsttris.vscode-jest-runner" + ] +} diff --git a/README.md b/README.md new file mode 100644 index 0000000..f7c491d --- /dev/null +++ b/README.md @@ -0,0 +1,82 @@ +# NxDemo + + + +✨ Your new, shiny [Nx workspace](https://nx.dev) is almost ready ✨. + +[Learn more about this workspace setup and its capabilities](https://nx.dev/getting-started/tutorials/react-monorepo-tutorial?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) or run `npx nx graph` to visually explore what was created. Now, let's get you up to speed! + +## Finish your CI setup + +[Click here to finish setting up your workspace!](https://cloud.nx.app/connect/9X24ERAxMI) + + +## Run tasks + +To run the dev server for your app, use: + +```sh +npx nx serve nx-demo +``` + +To create a production bundle: + +```sh +npx nx build nx-demo +``` + +To see all available targets to run for a project, run: + +```sh +npx nx show project nx-demo +``` + +These targets are either [inferred automatically](https://nx.dev/concepts/inferred-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) or defined in the `project.json` or `package.json` files. + +[More about running tasks in the docs »](https://nx.dev/features/run-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) + +## Add new projects + +While you could add new projects to your workspace manually, you might want to leverage [Nx plugins](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) and their [code generation](https://nx.dev/features/generate-code?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) feature. + +Use the plugin's generator to create new projects. + +To generate a new application, use: + +```sh +npx nx g @nx/react:app demo +``` + +To generate a new library, use: + +```sh +npx nx g @nx/react:lib mylib +``` + +You can use `npx nx list` to get a list of installed plugins. Then, run `npx nx list ` to learn about more specific capabilities of a particular plugin. Alternatively, [install Nx Console](https://nx.dev/getting-started/editor-setup?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) to browse plugins and generators in your IDE. + +[Learn more about Nx plugins »](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) | [Browse the plugin registry »](https://nx.dev/plugin-registry?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) + + +[Learn more about Nx on CI](https://nx.dev/ci/intro/ci-with-nx#ready-get-started-with-your-provider?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) + +## Install Nx Console + +Nx Console is an editor extension that enriches your developer experience. It lets you run tasks, generate code, and improves code autocompletion in your IDE. It is available for VSCode and IntelliJ. + +[Install Nx Console »](https://nx.dev/getting-started/editor-setup?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) + +## Useful links + +Learn more: + +- [Learn more about this workspace setup](https://nx.dev/getting-started/tutorials/react-monorepo-tutorial?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) +- [Learn about Nx on CI](https://nx.dev/ci/intro/ci-with-nx?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) +- [Releasing Packages with Nx release](https://nx.dev/features/manage-releases?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) +- [What are Nx plugins?](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) + +And join the Nx community: +- [Discord](https://go.nx.dev/community) +- [Follow us on X](https://twitter.com/nxdevtools) or [LinkedIn](https://www.linkedin.com/company/nrwl) +- [Our Youtube channel](https://www.youtube.com/@nxdevtools) +- [Our blog](https://nx.dev/blog?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) diff --git a/apps/nx-demo-e2e/eslint.config.js b/apps/nx-demo-e2e/eslint.config.js new file mode 100644 index 0000000..4e73819 --- /dev/null +++ b/apps/nx-demo-e2e/eslint.config.js @@ -0,0 +1,13 @@ +const playwright = require('eslint-plugin-playwright'); +const baseConfig = require('../../eslint.config.js'); + +module.exports = [ + playwright.configs['flat/recommended'], + + ...baseConfig, + { + files: ['**/*.ts', '**/*.js'], + // Override or add rules here + rules: {}, + }, +]; diff --git a/apps/nx-demo-e2e/playwright.config.ts b/apps/nx-demo-e2e/playwright.config.ts new file mode 100644 index 0000000..a677911 --- /dev/null +++ b/apps/nx-demo-e2e/playwright.config.ts @@ -0,0 +1,69 @@ +import { defineConfig, devices } from '@playwright/test'; +import { nxE2EPreset } from '@nx/playwright/preset'; + +import { workspaceRoot } from '@nx/devkit'; + +// For CI, you may want to set BASE_URL to the deployed application. +const baseURL = process.env['BASE_URL'] || 'http://localhost:4300'; + +/** + * Read environment variables from file. + * https://github.com/motdotla/dotenv + */ +// require('dotenv').config(); + +/** + * See https://playwright.dev/docs/test-configuration. + */ +export default defineConfig({ + ...nxE2EPreset(__filename, { testDir: './src' }), + /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ + use: { + baseURL, + /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ + trace: 'on-first-retry', + }, + /* Run your local dev server before starting the tests */ + webServer: { + command: 'npx nx run nx-demo:preview', + url: 'http://localhost:4300', + reuseExistingServer: !process.env.CI, + cwd: workspaceRoot, + }, + projects: [ + { + name: 'chromium', + use: { ...devices['Desktop Chrome'] }, + }, + + { + name: 'firefox', + use: { ...devices['Desktop Firefox'] }, + }, + + { + name: 'webkit', + use: { ...devices['Desktop Safari'] }, + }, + + // Uncomment for mobile browsers support + /* { + name: 'Mobile Chrome', + use: { ...devices['Pixel 5'] }, + }, + { + name: 'Mobile Safari', + use: { ...devices['iPhone 12'] }, + }, */ + + // Uncomment for branded browsers + /* { + name: 'Microsoft Edge', + use: { ...devices['Desktop Edge'], channel: 'msedge' }, + }, + { + name: 'Google Chrome', + use: { ...devices['Desktop Chrome'], channel: 'chrome' }, + } */ + ], +}); diff --git a/apps/nx-demo-e2e/project.json b/apps/nx-demo-e2e/project.json new file mode 100644 index 0000000..ef5d5b3 --- /dev/null +++ b/apps/nx-demo-e2e/project.json @@ -0,0 +1,9 @@ +{ + "name": "nx-demo-e2e", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "application", + "sourceRoot": "apps/nx-demo-e2e/src", + "implicitDependencies": ["nx-demo"], + "// targets": "to see all targets run: nx show project nx-demo-e2e --web", + "targets": {} +} diff --git a/apps/nx-demo-e2e/src/example.spec.ts b/apps/nx-demo-e2e/src/example.spec.ts new file mode 100644 index 0000000..fa8f1f3 --- /dev/null +++ b/apps/nx-demo-e2e/src/example.spec.ts @@ -0,0 +1,8 @@ +import { test, expect } from '@playwright/test'; + +test('has title', async ({ page }) => { + await page.goto('/'); + + // Expect h1 to contain a substring. + expect(await page.locator('h1').innerText()).toContain('Welcome'); +}); diff --git a/apps/nx-demo-e2e/tsconfig.json b/apps/nx-demo-e2e/tsconfig.json new file mode 100644 index 0000000..114364a --- /dev/null +++ b/apps/nx-demo-e2e/tsconfig.json @@ -0,0 +1,19 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "allowJs": true, + "outDir": "../../dist/out-tsc", + "module": "commonjs", + "sourceMap": false + }, + "include": [ + "**/*.ts", + "**/*.js", + "playwright.config.ts", + "src/**/*.spec.ts", + "src/**/*.spec.js", + "src/**/*.test.ts", + "src/**/*.test.js", + "src/**/*.d.ts" + ] +} diff --git a/apps/nx-demo/eslint.config.js b/apps/nx-demo/eslint.config.js new file mode 100644 index 0000000..2f6e3f0 --- /dev/null +++ b/apps/nx-demo/eslint.config.js @@ -0,0 +1,12 @@ +const nx = require('@nx/eslint-plugin'); +const baseConfig = require('../../eslint.config.js'); + +module.exports = [ + ...baseConfig, + ...nx.configs['flat/react'], + { + files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'], + // Override or add rules here + rules: {}, + }, +]; diff --git a/apps/nx-demo/index.html b/apps/nx-demo/index.html new file mode 100644 index 0000000..a0cd1f0 --- /dev/null +++ b/apps/nx-demo/index.html @@ -0,0 +1,16 @@ + + + + + NxDemo + + + + + + + +
+ + + diff --git a/apps/nx-demo/jest.config.ts b/apps/nx-demo/jest.config.ts new file mode 100644 index 0000000..d8f247c --- /dev/null +++ b/apps/nx-demo/jest.config.ts @@ -0,0 +1,10 @@ +export default { + displayName: 'nx-demo', + preset: '../../jest.preset.js', + transform: { + '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest', + '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }], + }, + moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'], + coverageDirectory: '../../coverage/apps/nx-demo', +}; diff --git a/apps/nx-demo/postcss.config.js b/apps/nx-demo/postcss.config.js new file mode 100644 index 0000000..c72626d --- /dev/null +++ b/apps/nx-demo/postcss.config.js @@ -0,0 +1,15 @@ +const { join } = require('path'); + +// Note: If you use library-specific PostCSS/Tailwind configuration then you should remove the `postcssConfig` build +// option from your application's configuration (i.e. project.json). +// +// See: https://nx.dev/guides/using-tailwind-css-in-react#step-4:-applying-configuration-to-libraries + +module.exports = { + plugins: { + tailwindcss: { + config: join(__dirname, 'tailwind.config.js'), + }, + autoprefixer: {}, + }, +}; diff --git a/apps/nx-demo/project.json b/apps/nx-demo/project.json new file mode 100644 index 0000000..072fbe8 --- /dev/null +++ b/apps/nx-demo/project.json @@ -0,0 +1,9 @@ +{ + "name": "nx-demo", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "apps/nx-demo/src", + "projectType": "application", + "tags": [], + "// targets": "to see all targets run: nx show project nx-demo --web", + "targets": {} +} diff --git a/apps/nx-demo/public/favicon.ico b/apps/nx-demo/public/favicon.ico new file mode 100644 index 0000000..317ebcb Binary files /dev/null and b/apps/nx-demo/public/favicon.ico differ diff --git a/apps/nx-demo/src/app/app.spec.tsx b/apps/nx-demo/src/app/app.spec.tsx new file mode 100644 index 0000000..d9312be --- /dev/null +++ b/apps/nx-demo/src/app/app.spec.tsx @@ -0,0 +1,15 @@ +import { render } from '@testing-library/react'; + +import App from './app'; + +describe('App', () => { + it('should render successfully', () => { + const { baseElement } = render(); + expect(baseElement).toBeTruthy(); + }); + + it('should have a greeting as the title', () => { + const { getByText } = render(); + expect(getByText(/Welcome nx-demo/gi)).toBeTruthy(); + }); +}); diff --git a/apps/nx-demo/src/app/app.tsx b/apps/nx-demo/src/app/app.tsx new file mode 100644 index 0000000..561a2e6 --- /dev/null +++ b/apps/nx-demo/src/app/app.tsx @@ -0,0 +1,11 @@ +import NxWelcome from './nx-welcome'; + +export function App() { + return ( +
+ +
+ ); +} + +export default App; diff --git a/apps/nx-demo/src/app/nx-welcome.tsx b/apps/nx-demo/src/app/nx-welcome.tsx new file mode 100644 index 0000000..b36e282 --- /dev/null +++ b/apps/nx-demo/src/app/nx-welcome.tsx @@ -0,0 +1,852 @@ +/* + * * * * * * * * * * * * * * * * * * * * * * * * * * * * + This is a starter component and can be deleted. + * * * * * * * * * * * * * * * * * * * * * * * * * * * * + Delete this file and get started with your project! + * * * * * * * * * * * * * * * * * * * * * * * * * * * * + */ +export function NxWelcome({ title }: { title: string }) { + return ( + <> +