Unit 3 Chapter 1: Official Docusaurus Tutorial Part 1

In this chapter, you will use Docker to execute the Official Docusaurus Tutorial for creating a new Docusaurus app. The Official Docusaurus Tutorial assumes that you're doing your software development in a MacOS host environment. This chapter adapts that exercise to a Docker environment.

Topics Covered

• Sharing files between the Docker and host environments
• Port assignments
• Viewing apps in the local browser

Starting the Docker Container

• In a shell terminal, enter the following commands:

cd
mkdir -p docker-docu
cd docker-docu

• Enter the following command to start up and enter a new Docker container:

docker run -i -t --rm -p 3000:3000 -p 35729:35729 -w /myapp -v ${PWD}:/myapp node:latest bash

• Note that there are two port assignments. The "-p 3000:3000" part of the above command specifies that port 3000 in the Docker container correspond to port 3000 in the host environment. The "-p 35729:35729" part of the above command specifies that port 35729 in the Docker container correspond to port 35729 in the host environment.
• Note that the "-w /myapp" part of the above command specifies the /myapp directory as the working directory. When you start up the Docker container, you end up in the working directory by default.
• Note that the "-v ${PWD}:/myapp" establishes file sharing. The present working directory in your host OS corresponds to the /myapp directory in the Docker container. Any file created in one of these two directories is automatically created in the other. Any file edited in one of these directories is automatically edited in the other. Any file deleted in one of these directories is automatically deleted in the other.
• After the Docker container is built, the screen output should look something like this:

Unable to find image 'node:latest' locally
latest: Pulling from library/node
81fc19181915: Pull complete 
ee49ee6a23d1: Pull complete 
828510924538: Pull complete 
a8f58c4fcca0: Pull complete 
33699d7df21e: Pull complete 
923705ffa8f8: Pull complete 
7867af19f69c: Pull complete 
6fa330d99257: Pull complete 
48582f1cafc0: Pull complete 
Digest: sha256:9193685132fbf5d2f1ec6998c12c8bfd9fbd4b20aa759b544a736a2ba39e0d55
Status: Downloaded newer image for node:latest

• You should now be in the Docker container. The prompt should look something like this:

root@c9ccc42f4601:/myapp# 

• Open a new shell terminal tab for entering commands in your host environment.
• In this host shell terminal tab, enter the docker ps -a to list the Docker containers. The screen output should look something like this:

CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                                              NAMES
c9ccc42f4601        node:latest         "docker-entrypoint.s…"   48 seconds ago      Up 47 seconds       0.0.0.0:3000->3000/tcp, 0.0.0.0:35729->35729/tcp   dreamy_davinci

• Enter the command docker images -a to list the Docker images. The screen output should look something like this:

REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
node                latest              37ad18cd8bd1        24 hours ago        943MB

Creating the New Docusaurus App

• In the Docker container, enter the following command to install Docusaurus:

npm install --global docusaurus-init

• After Docusaurus has been installed, you should see something like this:

/usr/local/bin/docusaurus-init -> /usr/local/lib/node_modules/docusaurus-init/initialize.js
+ docusaurus-init@1.14.1
added 24 packages from 14 contributors in 2.977s

• In the Docker container, enter the following commands to create your new Docusaurus Tutorial app:

mkdir docusaurus-tutorial
cd docusaurus-tutorial
docusaurus-init

• Congratulations! Your new Docusaurus app will be ready in a few minutes. When the creation process is finished, you'll be ready to move on to the next step.
• Enter the command "ls -l". The screen output should look something like this:

total 16
-rw-r--r-- 1 root root  145 Jul  2 20:30 Dockerfile
-rw-r--r-- 1 root root  497 Jul  2 20:30 docker-compose.yml
drwxr-xr-x 2 root root 4096 Jul  2 20:30 docs
drwxr-xr-x 7 root root 4096 Jul  2 20:30 website

• Open the file manager in your host system. You should find the docusaurus-tutorial directory within the docker-docu directory. The above files should be within the docusaurus-tutorial directory.

Viewing the Docusaurus App

• In the Docker container, enter the following commands:

cd website
npm start # Start the Docusaurus server

• Open your web browser, and go to the URL http://localhost:3000/ on your host system. Your new Docusaurus app should appear.
• Open your web browser and go to the URL http://localhost:35729/ on your host sytem. You'll see something similar to this:

{"tinylr":"Welcome","version":"1.1.1"}

• Seeing content (instead of an error message) in your browser's view of the LiveReload server confirms that the LiveReload feature is working. The LiveReload feature automatically refreshes the page when you edit the content of *.md pages in the docs or website directories.

Cleaning Up

• Do NOT delete this tutorial app, because you will need it in the next chapter.
• In the Docker container, press "Ctrl-C" to stop the Docusaurus server.
• In your Docker container, enter the command exit to return to the host system.
• To delete all Docker networks, enter the command docker network prune -f..
• To delete all of the Docker containers, enter the following commands:

for i in $(docker ps -a -q)
do
  docker kill $i; wait;
  docker rm -f $i; wait;
done;

• To view the list of Docker containers, enter the command docker ps -a. This list should now be empty.
• To view the list of Docker images, enter the command docker images -a.
• To delete all of these Docker images, enter the following commands:

for i in $(docker images -a -q)
do
  docker kill $i; wait;
  docker rmi -f $i; wait;
done;

• To view the list of Docker images, enter the command docker images -a. This list should now be empty.