Replacing Yarn with npm in Docker Workshop (#24012)

- replace old Docker desktop screenshot with the new sidebar
- Remove all references to Yarn in the explanation for Part 1
- Show new project directory structure for getting-started-repo
- Remove PWD reference from Part 3
- Remove all occurances of Yarn in Part 7 and 8

<!--Delete sections as needed -->

## Description

<!-- Tell us what you did and why -->

## Related issues or tickets

<!-- Related issues, pull requests, or Jira tickets -->

## Reviews

This PR is heavily dependent upon
docker/getting-started-app#98

<!-- Notes for reviewers here -->
<!-- List applicable reviews (optionally @tag reviewers) -->

- [ ] Technical review
- [ ] Editorial review
- [ ] Product review

---------

Co-authored-by: Craig Osterhout <craig.osterhout@docker.com>

Author: ajeetraina

content/get-started/workshop/02_our_app.md

@@ -42,10 +42,10 @@ Before you can run the application, you need to get the application source code
    ├── getting-started-app/
    │ ├── .dockerignore
    │ ├── package.json
+   │ ├── package-lock.json   
    │ ├── README.md
    │ ├── spec/
    │ ├── src/
-   │ └── yarn.lock
    ```
 
 ## Build the app's image
@@ -58,18 +58,21 @@ To build the image, you'll need to use a Dockerfile. A Dockerfile is simply a te
    ```dockerfile
    # syntax=docker/dockerfile:1
 
-   FROM node:lts-alpine
+   FROM node:24-alpine
    WORKDIR /app
    COPY . .
-   RUN yarn install --production
+   RUN npm install --omit=dev
    CMD ["node", "src/index.js"]
    EXPOSE 3000
    ```
+   This Dockerfile does the following:
 
-   This Dockerfile starts off with a `node:lts-alpine` base image, a
-   light-weight Linux image that comes with Node.js and the Yarn package
-   manager pre-installed. It copies all of the source code into the image,
-   installs the necessary dependencies, and starts the application.
+   - Uses `node:24-alpine` as the base image, a lightweight Linux image with Node.js pre-installed
+   - Sets `/app` as the working directory
+   - Copies source code into the image
+   - Installs the necessary dependencies
+   - Specifies the command to start the application
+   - Documents that the app listens on port 3000
 
 2. Build the image using the following commands:
 
@@ -85,9 +88,9 @@ To build the image, you'll need to use a Dockerfile. A Dockerfile is simply a te
    $ docker build -t getting-started .
    ```
 
-   The `docker build` command uses the Dockerfile to build a new image. You might have noticed that Docker downloaded a lot of "layers". This is because you instructed the builder that you wanted to start from the `node:lts-alpine` image. But, since you didn't have that on your machine, Docker needed to download the image.
+   The `docker build` command uses the Dockerfile to build a new image. You might have noticed that Docker downloaded a lot of "layers". This is because you instructed the builder that you wanted to start from the `node:24-alpine` image. But, since you didn't have that on your machine, Docker needed to download the image.
 
-   After Docker downloaded the image, the instructions from the Dockerfile copied in your application and used `yarn` to install your application's dependencies. The `CMD` directive specifies the default command to run when starting a container from this image.
+   After Docker downloaded the image, the instructions from the Dockerfile copied in your application and used `npm` to install your application's dependencies.
 
    Finally, the `-t` flag tags your image. Think of this as a human-readable name for the final image. Since you named the image `getting-started`, you can refer to that image when you run a container.
 

content/get-started/workshop/04_sharing_app.md

@@ -81,55 +81,7 @@ Let's try to push the image to Docker Hub.
 
 ## Run the image on a new instance
 
-Now that your image has been built and pushed into a registry, try running your app on a brand
-new instance that has never seen this container image. To do this, you will use Play with Docker.
-
-> [!NOTE]
->
-> Play with Docker uses the amd64 platform. If you are using an ARM based Mac with Apple silicon, you will need to rebuild the image to be compatible with Play with Docker and push the new image to your repository.
->
-> To build an image for the amd64 platform, use the `--platform` flag.
-> ```console
-> $ docker build --platform linux/amd64 -t YOUR-USER-NAME/getting-started .
-> ```
->
-> Docker buildx also supports building multi-platform images. To learn more, see [Multi-platform images](/manuals/build/building/multi-platform.md).
-
-
-1. Open your browser to [Play with Docker](https://labs.play-with-docker.com/).
-
-2. Select **Login** and then select **docker** from the drop-down list.
-
-3. Sign in with your Docker Hub account and then select **Start**.
-
-4. Select the **ADD NEW INSTANCE** option on the left side bar. If you don't see it, make your browser a little wider. After a few seconds, a terminal window opens in your browser.
-
-    ![Play with Docker add new instance](images/pwd-add-new-instance.webp)
-
-5. In the terminal, start your freshly pushed app.
-
-   ```console
-   $ docker run -dp 0.0.0.0:3000:3000 YOUR-USER-NAME/getting-started
-   ```
-
-    You should see the image get pulled down and eventually start up.
-
-    > [!TIP]
-    >
-    > You may have noticed that this command binds the port mapping to a
-    > different IP address. Previous `docker run` commands published ports to
-    > `127.0.0.1:3000` on the host. This time, you're using `0.0.0.0`.
-    >
-    > Binding to `127.0.0.1` only exposes a container's ports to the loopback
-    > interface. Binding to `0.0.0.0`, however, exposes the container's port
-    > on all interfaces of the host, making it available to the outside world.
-    >
-    > For more information about how port mapping works, see
-    > [Networking](/manuals/engine/network/_index.md#published-ports).
-
-6. Select the 3000 badge when it appears.
-
-   If the 3000 badge doesn't appear, you can select **Open Port** and specify `3000`.
+Now that your image has been built and pushed into a registry, you can run your app on any machine that has Docker installed. Try pulling and running your image on another computer or a cloud instance.
 
 ## Summary
 

content/get-started/workshop/06_bind_mounts.md

@@ -65,7 +65,7 @@ filesystem you can share with containers. For details about accessing the settin
    {{< tab name="Mac / Linux" >}}
 
    ```console
-   $ docker run -it --mount type=bind,src="$(pwd)",target=/src ubuntu bash
+   $ docker run -it --mount type=bind,src=.,target=/src ubuntu bash
    ```
 
    {{< /tab >}}
@@ -79,14 +79,14 @@ filesystem you can share with containers. For details about accessing the settin
    {{< tab name="Git Bash" >}}
 
    ```console
-   $ docker run -it --mount type=bind,src="/$(pwd)",target=/src ubuntu bash
+   $ docker run -it --mount type=bind,src="/.",target=/src ubuntu bash
    ```
 
    {{< /tab >}}
    {{< tab name="PowerShell" >}}
 
    ```console
-   $ docker run -it --mount "type=bind,src=$($pwd),target=/src" ubuntu bash
+   $ docker run -it --mount "type=bind,src=.,target=/src" ubuntu bash
    ```
 
    {{< /tab >}}
@@ -116,15 +116,15 @@ filesystem you can share with containers. For details about accessing the settin
    ```console
    root@ac1237fad8db:/# cd src
    root@ac1237fad8db:/src# ls
-   Dockerfile  node_modules  package.json  spec  src  yarn.lock
+   Dockerfile  node_modules  package.json  package-lock.json  spec  src  
    ```
 
 6. Create a new file named `myfile.txt`.
 
    ```console
    root@ac1237fad8db:/src# touch myfile.txt
    root@ac1237fad8db:/src# ls
-   Dockerfile  myfile.txt  node_modules  package.json  spec  src  yarn.lock
+   Dockerfile  myfile.txt  node_modules  package.json  package-lock.json  spec  src  
    ```
 
 7. Open the `getting-started-app` directory on the host and observe that the
@@ -136,17 +136,17 @@ filesystem you can share with containers. For details about accessing the settin
    │ ├── myfile.txt
    │ ├── node_modules/
    │ ├── package.json
+   │ ├── package-lock.json
    │ ├── spec/
-   │ ├── src/
-   │ └── yarn.lock
+   │ └── src/
    ```
 
 8. From the host, delete the `myfile.txt` file.
 9. In the container, list the contents of the `app` directory once more. Observe that the file is now gone.
 
    ```console
    root@ac1237fad8db:/src# ls
-   Dockerfile  node_modules  package.json  spec  src  yarn.lock
+   Dockerfile  node_modules  package.json  package-lock.json spec  src  
    ```
 
 10. Stop the interactive container session with `Ctrl` + `D`.
@@ -180,23 +180,23 @@ You can use the CLI or Docker Desktop to run your container with a bind mount.
 
    ```console
    $ docker run -dp 127.0.0.1:3000:3000 \
-       -w /app --mount type=bind,src="$(pwd)",target=/app \
-       node:lts-alpine \
-       sh -c "yarn install && yarn run dev"
+       -w /app --mount type=bind,src=.,target=/app \
+       node:24-alpine \
+       sh -c "npm install && npm run dev"
    ```
 
    The following is a breakdown of the command:
    - `-dp 127.0.0.1:3000:3000` - same as before. Run in detached (background) mode and
      create a port mapping
    - `-w /app` - sets the "working directory" or the current directory that the
      command will run from
-   - `--mount type=bind,src="$(pwd)",target=/app` - bind mount the current
+   - `--mount type=bind,src=.,target=/app` - bind mount the current
      directory from the host into the `/app` directory in the container
-   - `node:lts-alpine` - the image to use. Note that this is the base image for
+   - `node:24-alpine` - the image to use. Note that this is the base image for
      your app from the Dockerfile
-   - `sh -c "yarn install && yarn run dev"` - the command. You're starting a
-     shell using `sh` (alpine doesn't have `bash`) and running `yarn install` to
-     install packages and then running `yarn run dev` to start the development
+   - `sh -c "npm install && npm run dev"` - the command. You're starting a
+     shell using `sh` (alpine doesn't have `bash`) and running `npm install` to
+     install packages and then running `npm run dev` to start the development
      server. If you look in the `package.json`, you'll see that the `dev` script
      starts `nodemon`.
 
@@ -226,23 +226,23 @@ You can use the CLI or Docker Desktop to run your container with a bind mount.
 
    ```powershell
    $ docker run -dp 127.0.0.1:3000:3000 `
-       -w /app --mount "type=bind,src=$pwd,target=/app" `
-       node:lts-alpine `
-       sh -c "yarn install && yarn run dev"
+       -w /app --mount "type=bind,src=.,target=/app" `
+       node:24-alpine `
+       sh -c "npm install && npm run dev"
    ```
 
    The following is a breakdown of the command:
    - `-dp 127.0.0.1:3000:3000` - same as before. Run in detached (background) mode and
      create a port mapping
    - `-w /app` - sets the "working directory" or the current directory that the
      command will run from
-   - `--mount "type=bind,src=$pwd,target=/app"` - bind mount the current
+   - `--mount "type=bind,src=.,target=/app"` - bind mount the current
      directory from the host into the `/app` directory in the container
-   - `node:lts-alpine` - the image to use. Note that this is the base image for
+   - `node:24-alpine` - the image to use. Note that this is the base image for
      your app from the Dockerfile
-   - `sh -c "yarn install && yarn run dev"` - the command. You're starting a
-     shell using `sh` (alpine doesn't have `bash`) and running `yarn install` to
-     install packages and then running `yarn run dev` to start the development
+   - `sh -c "npm install && npm run dev"` - the command. You're starting a
+     shell using `sh` (alpine doesn't have `bash`) and running `npm install` to
+     install packages and then running `npm run dev` to start the development
      server. If you look in the `package.json`, you'll see that the `dev` script
      starts `nodemon`.
 
@@ -273,8 +273,8 @@ You can use the CLI or Docker Desktop to run your container with a bind mount.
    ```console
    $ docker run -dp 127.0.0.1:3000:3000 ^
        -w /app --mount "type=bind,src=%cd%,target=/app" ^
-       node:lts-alpine ^
-       sh -c "yarn install && yarn run dev"
+       node:24-alpine ^
+       sh -c "npm install && npm run dev"
    ```
 
    The following is a breakdown of the command:
@@ -284,11 +284,11 @@ You can use the CLI or Docker Desktop to run your container with a bind mount.
      command will run from
    - `--mount "type=bind,src=%cd%,target=/app"` - bind mount the current
      directory from the host into the `/app` directory in the container
-   - `node:lts-alpine` - the image to use. Note that this is the base image for
+   - `node:24-alpine` - the image to use. Note that this is the base image for
      your app from the Dockerfile
-   - `sh -c "yarn install && yarn run dev"` - the command. You're starting a
-     shell using `sh` (alpine doesn't have `bash`) and running `yarn install` to
-     install packages and then running `yarn run dev` to start the development
+   - `sh -c "npm install && npm run dev"` - the command. You're starting a
+     shell using `sh` (alpine doesn't have `bash`) and running `npm install` to
+     install packages and then running `npm run dev` to start the development
      server. If you look in the `package.json`, you'll see that the `dev` script
      starts `nodemon`.
 
@@ -318,23 +318,23 @@ You can use the CLI or Docker Desktop to run your container with a bind mount.
 
    ```console
    $ docker run -dp 127.0.0.1:3000:3000 \
-       -w //app --mount type=bind,src="/$(pwd)",target=/app \
-       node:lts-alpine \
-       sh -c "yarn install && yarn run dev"
+       -w //app --mount type=bind,src="/.",target=/app \
+       node:24-alpine \
+       sh -c "npm install && npm run dev"
    ```
 
    The following is a breakdown of the command:
    - `-dp 127.0.0.1:3000:3000` - same as before. Run in detached (background) mode and
      create a port mapping
    - `-w //app` - sets the "working directory" or the current directory that the
      command will run from
-   - `--mount type=bind,src="/$(pwd)",target=/app` - bind mount the current
+   - `--mount type=bind,src="/.",target=/app` - bind mount the current
      directory from the host into the `/app` directory in the container
-   - `node:lts-alpine` - the image to use. Note that this is the base image for
+   - `node:24-alpine` - the image to use. Note that this is the base image for
      your app from the Dockerfile
-   - `sh -c "yarn install && yarn run dev"` - the command. You're starting a
-     shell using `sh` (alpine doesn't have `bash`) and running `yarn install` to
-     install packages and then running `yarn run dev` to start the development
+   - `sh -c "npm install && npm run dev"` - the command. You're starting a
+     shell using `sh` (alpine doesn't have `bash`) and running `npm install` to
+     install packages and then running `npm run dev` to start the development
      server. If you look in the `package.json`, you'll see that the `dev` script
      starts `nodemon`.
 

content/get-started/workshop/07_multi_container.md

@@ -212,14 +212,14 @@ You can now start your dev-ready container.
 
    ```console
    $ docker run -dp 127.0.0.1:3000:3000 \
-     -w /app -v "$(pwd):/app" \
+     -w /app -v ".:/app" \
      --network todo-app \
      -e MYSQL_HOST=mysql \
      -e MYSQL_USER=root \
      -e MYSQL_PASSWORD=secret \
      -e MYSQL_DB=todos \
-     node:lts-alpine \
-     sh -c "yarn install && yarn run dev"
+     node:24-alpine \
+     sh -c "npm install && npm run dev"
    ```
 
    {{< /tab >}}
@@ -228,14 +228,14 @@ You can now start your dev-ready container.
 
    ```powershell
    $ docker run -dp 127.0.0.1:3000:3000 `
-     -w /app -v "$(pwd):/app" `
+     -w /app -v ".:/app" `
      --network todo-app `
      -e MYSQL_HOST=mysql `
      -e MYSQL_USER=root `
      -e MYSQL_PASSWORD=secret `
      -e MYSQL_DB=todos `
-     node:lts-alpine `
-     sh -c "yarn install && yarn run dev"
+     node:24-alpine `
+     sh -c "npm install && npm run dev"
    ```
 
    {{< /tab >}}
@@ -250,23 +250,23 @@ You can now start your dev-ready container.
      -e MYSQL_USER=root ^
      -e MYSQL_PASSWORD=secret ^
      -e MYSQL_DB=todos ^
-     node:lts-alpine ^
-     sh -c "yarn install && yarn run dev"
+     node:24-alpine ^
+     sh -c "npm install && npm run dev"
    ```
 
    {{< /tab >}}
    {{< tab name="Git Bash" >}}
 
    ```console
    $ docker run -dp 127.0.0.1:3000:3000 \
-     -w //app -v "/$(pwd):/app" \
+     -w //app -v "/.:/app" \
      --network todo-app \
      -e MYSQL_HOST=mysql \
      -e MYSQL_USER=root \
      -e MYSQL_PASSWORD=secret \
      -e MYSQL_DB=todos \
-     node:lts-alpine \
-     sh -c "yarn install && yarn run dev"
+     node:24-alpine \
+     sh -c "npm install && npm run dev"
    ```
 
    {{< /tab >}}
@@ -276,11 +276,13 @@ You can now start your dev-ready container.
    using the mysql database.
 
    ```console
-   $ nodemon src/index.js
-   [nodemon] 2.0.20
+   [nodemon] 3.1.11
    [nodemon] to restart at any time, enter `rs`
-   [nodemon] watching dir(s): *.*
+   [nodemon] watching path(s): *.*
+   [nodemon] watching extensions: js,mjs,cjs,json
    [nodemon] starting `node src/index.js`
+   Waiting for mysql:3306.
+   Connected!
    Connected to mysql db at host mysql
    Listening on port 3000
    ```