feat: update lab 3 to nx 19.7

docs/lab3/LAB.md

@@ -7,9 +7,9 @@ We'll build the app we just created, and look at what executors are and how to c
 ## 📚 Learning outcomes:
 
 - **Understand what a `target` and `executor` are**
-- **Invoking executors**
+- **Understand how to view Project Details**
+- **Invoke executors**
 - **Configure executors by passing them different options**
-- **Understand how an executor can invoke another executor**
 
 #### 📲 After this workshop, you should have:
 
@@ -24,35 +24,75 @@ We'll build the app we just created, and look at what executors are and how to c
 
    <details>
    <summary>🐳 &nbsp;&nbsp;Hint</summary>
-   <img src="../assets/lab3_build_cmds.png" alt="Nx executor command structure">
+   <img src="../assets/lab3_cmds.png" alt="Nx executor command structure">
    </details><br />
 
-2. You should now have a `dist` folder - let's open it up!
+2. There should be a `dist` folder in the root of the workspace -- lets open it up!
 
-   - This is your whole app's output! If we wanted we could push this now to a server and it would all work.
-   - Notice how we generated a `3rdpartylicenses.txt` file and how all files have hashes in suffix
-   - Open one of the files, for example `main.{hash}.js` and look at it's contents. Notice how it's minified.
-     <br />
+   - This is the whole app's output! If we wanted to, we could push this to a server, and it would all work.
+   - Notice how all files have hashes in their suffix.
+   - Open one of the files, for example, `main.{hash}.js`, and look at its contents. Notice how it's minified.
 
-3. **Open up `apps/store/project.json`** and look at the object under `targets/build`
+    <br />
 
-   - this is the **target**, and it has an **executor** option, that points to `@nx/webpack:webpack`
-   - Remember how we copied some images into our `/assets` folder earlier? Look through the executor options and try to find how it knows to include them in the final build!
-     <br />
+3. Open the **Project Details** for the `store` app and expand the `build` section listed under "Targets."
 
-4. Send a flag to the executor so that it builds for development
+   - This is a **target** that uses the [`nx:run-commands`](https://nx.dev/nx-api/nx/executors/run-commands#nxruncommands) **executor** to call `webpack-cli` to build the app.
+   - Since the build target uses the [`webpack-cli`](https://webpack.js.org/api/cli/), webpack can be configured using the `webpack.config.js` file in the project root.
 
+   <br />
    <details>
    <summary>🐳 &nbsp;&nbsp;Hint</summary>
+   The easiest way to open the Project Details is by using the <a href="https://nx.dev/getting-started/editor-setup">Nx Console from within VS Code or a JetBrains IDE</a>. Once installed, the Project Details Views can be accessed <a href="https://nx.dev/recipes/nx-console/console-project-details"> in multiple ways</a> without leaving the editor.
+   <br /><br />
 
-   `--configuration=development`
-
+   If the CLI is preferred, or editor without Nx Console support is being used, the project details can be opened in the browser by running `nx show project <project-name> --web`.
    </details><br />
 
-5. Open up the `dist` folder again - notice how the `3rdpartylicenses.txt` file is gone, as per the "development" configuration in `project.json`. Also notice how filenames no longer have hashed suffixes. Open one of the files, for example `main.{hash}.js`. Notice how its content is now fully readable and there are sourcemaps attached to each of the compiled files.
+4. Configure license extraction during production builds
+
+   - Explore the `webpack.config.js` file for the `store` app.
+   - Remember how we copied some images into our `/assets` folder earlier? Look through the webpack config and try to find how it knows to include them in the final build!
+   - Configure webpack to `extractLicenses` into a `3rdpartylicenses.txt` file during the build, but only when the node environment is `production`.
+
    <br />
+   <details>
+   <summary>🐳 &nbsp;&nbsp;Hint</summary>
+
+   The `NxAppWebpackPlugin` takes an `extractLicenses` option.
+
+    </details><br />
+
+5. Build the app again
+
+   - Notice how we now have a `3rdpartylicenses.txt` file in the `dist` folder.
+
+   <br />
+
+6. Add a `development` configuration to the `build` target that changes the `node-env` argument to `development`.
+
+   - Nx detects the presence of tooling configuration, in this case `webpack.config.js`, and automatically [infers targets](https://nx.dev/concepts/inferred-tasks) needed to run that tool with a set of common defaults (`build`, `preview`, `serve` in this case).
+   - These targets can be modified by adding additional configuration to the `targets` key in the `project.json`.
+   - Targets can have multiple configurations that allow for the execution of the same tool with different options.
+
+   <br />
+   <details>
+   <summary>🐳 &nbsp;&nbsp;Hint</summary>
+
+   - The key to add to the `project.json` is `targets.build.configurations.development.args`.
+   - Use the Project Details view to see how the environment is being set to production as an example.
+
+   </details><br />
+
+7. Build the app one more time, but this time using the development configuration we just created.
+   <details>
+   <summary>🐳 &nbsp;&nbsp;Hint</summary>
+
+   `--configuration=development`
+
+   </details><br />
 
-6. The **serve** target (located a bit lower in `project.json`) also contains a executor, that _uses_ the output from the **build** target
+8. Open up the `dist` folder again - notice how the `3rdpartylicenses.txt` file is gone, as per the "development" configuration in `project.json`. Also, notice how filenames no longer have hashed suffixes. Open one of the files, for example `main.{hash}.js`. Notice how its content is now fully readable, and there are sourcemaps attached to each of the compiled files.
    <br />
 
 ---