HDDS-9563. Containerize website development server (#50)

.dockerignore

@@ -0,0 +1,6 @@
+node_modules
+build
+.docusaurus
+.cache-loader
+.git
+.gitignore

Dockerfile

@@ -0,0 +1,30 @@
+# Licensed to the Apache Software Foundation (ASF) under one or more
+# contributor license agreements.  See the NOTICE file distributed with
+# this work for additional information regarding copyright ownership.
+# The ASF licenses this file to You under the Apache License, Version 2.0
+# (the "License"); you may not use this file except in compliance with
+# the License.  You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+# See https://pnpm.io/docker
+
+ARG NODE_VERSION=20
+FROM node:${NODE_VERSION}-slim AS base
+# Creates store at /pnpm/store by default.
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+
+# Install dependencies to /ozone-site/node_modules as part of the image.
+WORKDIR /ozone-site
+COPY package.json .
+COPY pnpm-lock.yaml .
+# Lockfile should not be changed when installing dependencies, hence freezing it.
+RUN pnpm install --frozen-lockfile

README.md

@@ -34,26 +34,50 @@ Welcome to the development branch of the new and improved Apache Ozone website.
 
 ## Local Development
 
-### Setup
+Docusaurus supports previewing the website locally. Below are various options to launch a preview of the site at `localhost:3000` on your machine.
+
+### Option 1: Docker (Recommended)
+
+The project includes a `Dockerfile` and a `compose.yml` file to build and run the website in a containerized environment. This creates a docker image called `ozone-site-dev` with all the dependencies included, and uses it to run the [Docusaurus development server](https://docusaurus.io/docs/installation#running-the-development-server).
+
+1. Install [docker](https://docs.docker.com/engine/install/).
+
+2. Install [docker compose](https://docs.docker.com/compose/install/).
+
+3. Run `docker compose up` from the repository root.
+
+4. Preview the website at `localhost:3000` in your browser.
+
+  - Any changes made in the repository will be reflected in the preview.
+
+5. Press `Ctrl+C` or run `docker compose down` to stop the preview.
+
+### Option 2: pnpm
+
+Build and run the website locally with the `pnpm` package manager.
 
 1. Install [pnpm](https://pnpm.io/installation), which will be used to build the site.
 
 2. Install dependencies required to build the website by running `pnpm install` at the website root.
 
-### Preview
+- [**Development Server**](https://docusaurus.io/docs/installation#running-the-development-server): This option will start the Docusaurus development server, which allows updates to website files to be displayed in the browser in real time. It will not produce a `build` directory with build artifacts.
 
-Once installed, there are two ways to preview the website locally. Each option will launch the site at `localhost:3000` on your machine.
+  1. Run `pnpm start` from the repository root to start the development server.
 
-- **Development Server** (See [Docusaurus docs](https://docusaurus.io/docs/installation#running-the-development-server)): This option will start the Docusaurus development server. It will not produce a `build` directory with build artifacts, and allows updates to website files to be displayed in the browser in real time.
+  2. Preview the website at `localhost:3000` in your browser.
 
-  1. Run `pnpm start` from the repository root to start the development server.
+  3. Press `Ctrl+C` to stop the preview.
 
-- **Local Build** (See [Docusaurus docs](https://docusaurus.io/docs/installation#build)): This option will do a production build, putting artifacts in the `build` directory. This can still be previewed locally, but will not automatically reflect changes to website files.
+- [**Local Build**](https://docusaurus.io/docs/installation#build): This option will do a production build, putting artifacts in the `build` directory. This can still be previewed locally, but will not automatically reflect changes to website files.
 
   1. Run `pnpm build` from the repository root to build the content.
 
   2. Run `pnpm serve` to preview the built website locally.
 
+  3. Preview the website at `localhost:3000` in your browser.
+
+  4. Press `Ctrl+C` to stop the preview.
+
 ### Updating the Website
 
 The following files can be modified to change various aspects of the website:
@@ -79,4 +103,4 @@ The following files can be modified to change various aspects of the website:
 
 - `src/pages`
   - Static pages outside of the documentation section.
-  - See https://docusaurus.io/docs/creating-pages
+  - See https://docusaurus.io/docs/creating-pages

compose.yml

@@ -0,0 +1,31 @@
+# Licensed to the Apache Software Foundation (ASF) under one or more
+# contributor license agreements.  See the NOTICE file distributed with
+# this work for additional information regarding copyright ownership.
+# The ASF licenses this file to You under the Apache License, Version 2.0
+# (the "License"); you may not use this file except in compliance with
+# the License.  You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+version: "3"
+
+services:
+  site:
+    build: "."
+    image: "ozone-site-dev"
+    ports:
+      - 3000:3000
+    volumes:
+      - ".:/ozone-site"
+      # The below option is used to prevent overwriting the node_modules directory in the docker image
+      # with the node_modules present in the mounted volume.
+      # This will create an empty node_modules directory in the working directory of the host if it is not already present.
+      - /ozone-site/node_modules/
+    working_dir: "/ozone-site"
+    command: pnpm start --host '0.0.0.0'

package.json

@@ -1,5 +1,5 @@
 {
-  "packageManager": "pnpm@7.33.6",
+  "packageManager": "pnpm@8.7.1",
   "name": "doc-site",
   "version": "0.1.0",
   "private": true,