Skip to content

Instantly share code, notes, and snippets.

@gigenthomas
Last active July 24, 2023 05:33
Show Gist options
  • Save gigenthomas/4f1f5b67fdc9a62c10c90f25a3d2335c to your computer and use it in GitHub Desktop.
Save gigenthomas/4f1f5b67fdc9a62c10c90f25a3d2335c to your computer and use it in GitHub Desktop.

https://egghead.io/lessons/react-create-a-shared-react-library-in-an-nx-workspace

https://egghead.io/lessons/react-add-styling-to-a-react-app-inside-an-nx-workspace

https://egghead.io/lessons/javascript-install-and-use-external-npm-packages-in-an-nx-workspace

install nx globally

npm i -g nx

#react-query https://www.youtube.com/watch?v=Ev60HKYFM0s&list=PLC3y8-rFHvwjTELCrPrcZlo6blLBUspd2&index=3

Create integrated workspace

npx create-nx-workspace@latest myorg --preset=ts

Run application

npx nx run prolog-app:serve

Show graph

npx nx graph

React Libraray

npx nx g @nrwl/react:library cart

#Generate a new React library application:
nx generate @nrwl/react:library ui-shared

Create a React Component in the shared-ui project under a directory called common

nx g @nrwl/react:component header --project=ui-shared

nx g @nrwl/react:component button --project=ui-shared

nx g @nrwl/react:component banner --project=ui-shared

nx g @nrwl/react:component page-container --project=ui-shared --directory=lib/layout --dry-run

nx g @nrwl/react:component sidebar-navigation --project=ui-shared --directory=lib/layout --dry-run

Create a React Component

nx g component issues --project=ui --directory features

Create a Feature component for prolog-app

nx g @nrwl/react:library issues --directory=capability --appProject=prolog-app

npx nx g @nrwl/react:library issues --appProject=prolog-app

npx nx g @nrwl/react:component issue-list --project=issues --directory=components --dry-run

npx nx g @nrwl/react:component issue-list --project=issues --directory=components

npx nx g @nrwl/react:component useGetIssues --project=issues --directory=api --dry-run

useGetIssues

Shared Models

npm install -D @nrwl/node

nx g @nrwl/node:lib prolog-shared-models --no-interactive

Add's packages to the entire workspace

npm install --save styled-components

Next JS

Add nexj js
npm install --save-dev @nrwl/next

Create next App
nx g @nrwl/next:app my-new-app

Create page
nx g page home --project=next-app --dry-run

Run Application
npx nx run next-app:serve

Create a react component in a directory
npx nx g @nrwl/react:component BaseLayout --project=next-app --directory=layouts --dry-run

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment