Update CI and Dockerfile to support Angular v19 build output

.github/workflows/github-pages.yml

@@ -29,7 +29,7 @@ jobs:
         run: npm ci
 
       - name: Build Navigator
-        run: npm run build -- --configuration production,googleAnalytics --aot=false --build-optimizer=false --base-href=https://mitre-attack.github.io/attack-navigator/
+        run: npm run build -- --configuration production,googleAnalytics --aot=false --base-href=https://mitre-attack.github.io/attack-navigator/
 
       - name: Download and extract Navigator v2
         uses: robinraju/release-downloader@v1.10
@@ -40,7 +40,7 @@ jobs:
           extract: true
 
       - name: Move v2 to output directory
-        run: mv ../v2/ dist/
+        run: mv ../v2/ dist/browser/
 
       - name: Download and extract Navigator v3
         uses: robinraju/release-downloader@v1.10
@@ -51,14 +51,14 @@ jobs:
           extract: true
 
       - name: Move v3 to output directory
-        run: mv ../v3/ dist/
+        run: mv ../v3/ dist/browser/
 
       - name: Copy redirects
-        run: cp -r ./redirects/* ./dist/
+        run: cp -r ./redirects/* ./dist/browser/
 
       - name: Deploy
         uses: peaceiris/actions-gh-pages@v3
         if: ${{ github.ref == 'refs/heads/master' }}
         with:
           deploy_key: ${{ secrets.DEPLOY_KEY }}
-          publish_dir: ./nav-app/dist
+          publish_dir: ./nav-app/dist/browser

Dockerfile

@@ -1,27 +1,29 @@
-# Build stage
+FROM node:22 AS build
 
-FROM node:18
-
-ENV NODE_OPTIONS=--openssl-legacy-provider
-
-# install node packages - cache for faster future builds
 WORKDIR /src/nav-app
-COPY ./nav-app/package*.json ./
 
-# install packages and build 
-RUN npm install
+# install dependencies (cache)
+COPY ./nav-app/package.json ./
+COPY ./nav-app/package-lock.json ./
+RUN npm ci
 
-# copy over needed files
+# copy source and build
 COPY ./nav-app/ ./
+RUN npm run build -- --configuration production
 
-# copy layers directory
+# copy layers directory and in-app documentation
 WORKDIR /src
 COPY layers/ ./layers/
-
-# copy markdown files from root
 COPY *.md ./
 
-WORKDIR /src/nav-app
-EXPOSE 4200
+FROM nginx:alpine AS runtime
+
+# copy application bundles
+COPY --from=build /src/nav-app/dist/browser/ /usr/share/nginx/html/
+COPY --from=build /src/layers/ /usr/share/nginx/html/layers/
+COPY --from=build /src/*.md /usr/share/nginx/html/
+
+EXPOSE 80
 
-CMD npm start
+# run nginx in foreground
+CMD ["nginx", "-g", "daemon off;"]

Dockerfile.dev

@@ -0,0 +1,21 @@
+FROM node:22 AS dev
+
+WORKDIR /src/nav-app
+
+# install dependencies (cache)
+COPY ./nav-app/package.json ./
+COPY ./nav-app/package-lock.json ./
+RUN npm install
+
+# copy source
+COPY ./nav-app/ ./
+
+# copy layers directory and in-app documentation
+WORKDIR /src
+COPY layers/ ./layers/
+COPY *.md ./
+
+WORKDIR /src/nav-app
+EXPOSE 4200
+
+CMD ["npm", "start"]

README.md

@@ -44,30 +44,73 @@ Use our [GitHub Issue Tracker](https://github.com/mitre-attack/attack-navigator/
 
 ## Install and Run
 
-### First time
+### Initial Setup
 
-1. Navigate to the **nav-app** directory
-2. Run `npm install`
+1. Navigate to the **nav-app** directory:
 
-### Serve application on local machine
+```bash
+cd nav-app/
+```
+
+2. Install dependencies:
 
-1. Run `ng serve` within the **nav-app** directory
-2. Navigate to `localhost:4200` in browser
+```bash
+npm install
+```
 
-### Compile for use elsewhere
+### Development
 
-1. Run `ng build` within the **nav-app** directory
-2. Copy files from `nav-app/dist/` directory
+#### Local
 
-_Note: `ng build --configuration production` does not currently work for ATT&CK Navigator without additional flags. To build the production environment instead use `ng build --configuration production --aot=false --build-optimizer=false`._
+Start the Angular development server:
 
-### Running the Navigator offline
+```bash
+ng serve
+```
 
-1. Install the Navigator as per instructions above.
-2. Follow instructions under [loading content from local files](#Loading-content-from-local-files) to configure the Navigator to populate the matrix without an internet connection. The latest MITRE ATT&CK data files can be found here:
-	- [Enterprise ATT&CK](https://github.com/mitre-attack/attack-stix-data/raw/master/enterprise-attack/enterprise-attack.json).
-	- [Mobile ATT&CK](https://github.com/mitre-attack/attack-stix-data/raw/master/mobile-attack/mobile-attack.json).
-	- [ICS ATT&CK](https://github.com/mitre-attack/attack-stix-data/raw/master/ics-attack/ics-attack.json).
+Open <http://localhost:4200> in your browser.
+
+#### Using Docker
+
+Build and run the development Docker container:
+
+```bash
+docker build -f Dockerfile.dev -t nav-app-dev .
+docker run -p 4200:4200 nav-app-dev
+```
+
+Open <http://localhost:4200> in your browser.
+
+### Deployment
+
+#### Building for Deployment
+
+Compile the application:
+
+```bash
+ng build --configuration production
+```
+
+The output files will be located in `nav-app/dist/browser/`.
+
+#### Serve Using Docker
+
+Build and run a Docker container:
+
+```bash
+docker build -t nav-app-prod .
+docker run -p 8080:80 nav-app-prod
+```
+
+Open <http://localhost:8080> in your browser.
+
+### Running Offline
+
+Install or build the Navigator using one of the options above. Then, configure it to load content from local files (see [Loading Content from Local Files](#loading-content-from-local-files)). The latest MITRE ATT&CK data files can be found here:
+
+* [Enterprise ATT&CK](https://github.com/mitre-attack/attack-stix-data/raw/master/enterprise-attack/enterprise-attack.json)
+* [Mobile ATT&CK](https://github.com/mitre-attack/attack-stix-data/raw/master/mobile-attack/mobile-attack.json)
+* [ICS ATT&CK](https://github.com/mitre-attack/attack-stix-data/raw/master/ics-attack/ics-attack.json)
 
 ## Documentation
 
@@ -218,13 +261,6 @@ Navigator can be populated using files that consist of bundles of STIX objects,
 },
 ```
 
-## Running the Docker File
-
-1. Navigate to the directory where you checked out the git repository
-2. Run `docker build -t yourcustomname .`
-3. Run `docker run -p 4200:4200 yourcustomname`
-4. Navigate to `localhost:4200` in browser
-
 ## Loading Default Layers Upon Initialization
 
 The Navigator can be configured so as to load a set of layers upon initialization. These layers can be from the web and/or from local files.