Merge pull request #1571 from weather-gov/mgwalker/1494-build-svg

Make it simpler to build CSS and sprites

Dockerfile.uswds

@@ -0,0 +1,13 @@
+FROM node:20
+
+COPY zscaler-root.pem /etc/ssl/certs/zscaler-root.pem
+RUN c_rehash
+ENV NODE_EXTRA_CA_CERTS=/etc/ssl/certs/zscaler-root.pem
+
+RUN mkdir /app
+WORKDIR /app
+
+ADD ./web/themes/new_weather_theme/package.json .
+ADD ./web/themes/new_weather_theme/package-lock.json .
+
+RUN npm ci

Dockerfile.utility-node

@@ -0,0 +1,13 @@
+FROM node:20
+
+COPY zscaler-root.pem /etc/ssl/certs/zscaler-root.pem
+RUN c_rehash
+ENV NODE_EXTRA_CA_CERTS=/etc/ssl/certs/zscaler-root.pem
+
+RUN mkdir /app
+WORKDIR /app
+
+ADD ./package.json .
+ADD ./package-lock.json .
+
+RUN npm ci

Makefile

@@ -97,11 +97,15 @@ scorched-earth: ## A tool to reset your Docker Desktop.
 
 ### CSS
 build-css: # Build CSS
-	cd web/themes/new_weather_theme && npx gulp compile
+	docker compose run --rm uswds npx gulp compile
+
+### Build sprites
+build-sprites: # Build sprites
+	docker compose run --rm utility-node npm run compile-svg
 
 ### Spatial data
 load-spatial: # Load spatial data into the database
-	docker compose run spatial node load-shapefiles.js
+	docker compose run --rm spatial node load-shapefiles.js
 
 ### Testing
 a11y: accessibility-test

docker-compose.yml

@@ -91,6 +91,28 @@ services:
       - 8180:8080
     profiles: ["utilities"]
 
+  utility-node:
+    build:
+      context: .
+      dockerfile: Dockerfile.utility-node
+    profiles: ["utility"]
+    networks:
+      - weather.gov
+    links:
+      - database
+    volumes:
+      - ./:/app
+      - /app/node_modules
+
+  uswds:
+    build:
+      context: ./
+      dockerfile: Dockerfile.uswds
+    profiles: ["utility"]
+    volumes:
+      - ./web/themes/new_weather_theme/:/app
+      - /app/node_modules
+
   spatial:
       build:
         context: ./spatial-data