💡 Heads up! You can find the code for every article in this series on GitHub, with a tag per article: github.com/trumbitta/giant-robots/tags
What you'll need
- Your favorite code editor: Visual Studio Code, WebStorm, ...
- Node >= 12 (it might work with earlier versions)
- A terminal
Open a terminal and run:
This will ask you some questions. Here's how you're going to answer them:
❯ npx create-nx-workspace npx: installed 48 in 7.875s ✔ Workspace name (e.g., org name) · giant-robots ✔ What to create in the new workspace · react ✔ Application name · frontend ✔ Default stylesheet format · styled-components ✔ Use Nx Cloud? (It's free and doesn't require registration.) · No
Let's not use Nx Cloud right now: that's for a future post. Though it really is awesome and I'm dying here, I just want you to know what it does. 🤩
Anyway, Nx will now go ahead and it will install npm packages, create the actual workspace, and initialize it.
> NX Nx is creating your workspace. To make sure the command works reliably in all environments, and that the preset is applied correctly, Nx will run "npm install" several times. Please wait. ✔ Installing dependencies with npm ⠦ Creating your workspace
Oh but then the fun begins
Let's jump right in!
- Import the
giant-robotsfolder in your editor of choice
- Open a terminal and launch your first React app with Nx:
cd giant-robots npm start
- Point your browser at localhost:4200
What just happened?
- You ran the same old
- If you look into
package.jsonyou'll see that's defined as
- I didn't make you specify any project so Nx inferred that you wanted to work with the default project aka the only existing project at this moment:
You'll find this configured at the bottom of
[...] "defaultProject": "frontend" }
nx serve frontendis just syntax sugar for the real Nx command:
# nx run <project>:<target> nx run frontend:serve
Go ahead and try to serve the app using
nx serve frontend and then
nx run frontend:serve! You can hit
ctrl c to stop the app each time around.
If you need to install the Nx CLI first (you don't need it if the commands above work for you):
npm i -g @nrwl/cli # or don't install and use it with npx npx nx <commands>
Then, with the app still running and the browser displaying it:
apps/frontend/src/app/app.tsxin your editor
- Change the
<h1>Welcome to the annual Giant Robot Fair!</h1>and save
- Go see your browser automatically refreshing and displaying the updated page!
And if you keep the console open in the browser's devtools, you'll notice these messages:
[for updates on the server... [ ] Updated modules: [ ] - ./app/app.tsx [ ] App is up to date.] App hot update... [ ] Checking
Hot Module Replacement! Nx is awesome and it made Webpack only reload the minimum group of files it needed to reload for taking your change into account.
That's a lot to process for your first time with Nx, so I'm calling it a day.
- Created your first Nx workspace
- Created your first React app within it
- Learned about the three levels of a Nx command:
nx serve frontend
nx run frontend:serve
- Ran your React app, made a change, and discovered Nx has HMR enabled to make your development workflow speedier and flawless
🍻 Next time we are going to learn about testing, linting, and building.