Start a new react-standalone with NX, Material UI, and Design System support
Use create-nx-workspace command:
pnpx create-nx-workspace@latest --commit.email=nicoandres.rodriguez@gmail.com --commit.name=nicoandres --docker=true --packageManager=pnpm --preset=react-standalone --name=demo-project --bundler=vite --style=emotionparameters:
| name | value |
|---|---|
| --commit.email | sets the commit email |
| --commit.name | sets commit name |
| --docker=true | Generate a Dockerfile with your node-server |
| --packageManager | Choices: [npm, pnpm, yarn] default npm |
| --preset | Customizes the initial content of your workspace. |
| --name | Workspace name (e.g. org name) |
| --bundler | Choices: [webpack, vite, rspack] |
| --style | Style option to be used when a preset with pregenerated app is selected |
More parameters info in official Nx docs.
about preset the available options are:
["apps", "empty", "core", "npm", "ts", "web-components", "angular-monorepo", "angular-standalone", "react-monorepo", "react-standalone", "nextjs-standalone", "react-native", "expo", "next", "nest", "express", "react", "angular", "node-standalone"]
after create the workspace you could create the shared/ui for the Design System library with:
pnpx nx g @nx/react:component banner --project=shared-ui --exportabove command creates a new banner component inside the project shared ui, this means that shared-ui is a different project inside this mono-repo, it could be used to create and share components to several apps.
Adding Material UI
Now we have our awesome mono-repo let's add Material UI and material Icons with:
pnpm i @mui/material @mui/icons-material
Comments ()