--- ###### tags: `V3 Docs` --- # Getting Started Our monorepos use [Nx](https://nx.dev/) as a build system and for scaffolding. If this your first time using Nx, you'll have to install it globally on your system: `npm install -g nx` Here is a basic guide. Each package README (and `project.json`) will have more details about commands within each package. ```bash `git clone git@github.com:HausDAO/daohaus-monorepo.git` or `git clone https://github.com/HausDAO/daohaus-monorepo.git` # clone the entire monorepo at the top level on the develop branch `yarn` # run yarn to install all of the packages and dependencies ``` Once cloned and everything is installed, you'll be able to run each package! Package-level commands are run with `nx run` instead of `yarn` -- this may be new if you're used to working in a different repo structure. Each package has similar command structure, but some packages have additional commands. The package-level commands can be found in each package's `project.json`. ```bash # run a specific package locally (usually on localhost:3000) # such as the component library or frontend applications nx run app-name:serve # example to run the Hub app: nx run hub-app:serve # lint a specific package nx run app-name:lint # example to lint the Hub app: nx run hub-app:lint # build a specific package: nx run app-name:build # example to build the Hub app: nx run hub-app:build ``` ## Nx Generators We've created _generators_ that leverage `nx` with predetermined option flags. ### React App Our stack uses [Vite](https://vitejs.dev/) as our React build tool. This generator will scaffold a new React app, such as a frontend app, using `vite` and `styled-components`. `nx g @nxext/react:application --name <name of app> --pascalCaseFiles true --routing true --style styled-components` TypeScript is enabled and included by default. ### React Library Our stack uses [Vite](https://vitejs.dev/) as our React build tool. This generator will scaffold a new React library (such as a component library) with `vite` and `styled-components`. - `nx g @nxext/react:library --name here --importPath @daohaus/<package_name> --buildable true --publishable true --style styled-components` TypeScript is enabled and included by default. Notes: - use the `--publishable` flag for external libraries - use the `--buildable` flag for internal libraries ### TypeScript Library - `nx g @nrwl/js:lib <lib_name> --importPath @daohaus/<package_name> --publishable true` Notes: - use the `--publishable` flag for external libraries - use the `--buildable` flag for internal libraries ### Node Application - `nx g @nrwl/node:application <app_name>` ### Lamdba Application - `nx generate @ns3/nx-serverless:app <name> --plugin @ns3/nx-serverless/plugin` ### Common Issues - Sometimes vite applications will have trouble finding dependencies with a depth greater than 1. To resolve this create a custom vite config like the one mentioned in [this](https://github.com/aleclarson/vite-tsconfig-paths/issues/12#issuecomment-1081160667) issue, and update the build and serve commands in the project.json to point to the new vite config path. Now your issues should be resolved. --- # Towards the Builder Personna - Interfacing through NPM not through Github - Need to know what NPM packages we have on offer - Why they would want to install them - What components they can pull in, what functions they can call, what they can do with those packages