Next Apps with NX
Refer to creating a Nextjs app with NX to get started.
Create New Apps
In an existing NX.dev workspace create a new app by running the following command:
npx nx g @nrwl/next:app [prefix-app-name]
For example
npx nx g @nrwl/next:app web3-uniswap
Configure TailwindCSS
After running nx generator for a new Next app setup Tailwindcss by copying files from an existing app.
- Copy Assets folder
- Copy tailwind.config
- Copy postcsss.config
Adjust base.css colour to trigger the JIT compiler so that styles will be applied.
Configure Tests
E2E Testing is setup out of the box
Run
npx nx serve [appName]
Install CLI
Install the NX CLI
npm install -g nx
Update CLI
See docs
If the following does not work first install the cli
npm install -g nx
Then run update commands
nx migrate latest
yarn
nx migrate --run-migrations
Serve, Build
When building the application, all referenced libraries are built into the app via the bundler.
npx nx serve [appName]
Generate an app
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 @drmg/mylib.
Development
Commands to help development.
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.
Understand your workspace
Run nx graph to see a diagram of the dependencies of your projects.