Removing webpack build step (github#20405)

* removing webpack build step

* keep copywebpackplugin and add fonts to assets/fonts

* update marketing font path

* update font path

* update font

* remove builtAssets

* remove copying front end code with dist

* move Inter fonts to /assets/fonts/inter

* move copy-webpack-plugin back to deps

Co-authored-by: Mike Surowiec <[email protected]>

.gitignore

@@ -7,14 +7,13 @@ npm-debug.log
 coverage/
 .linkinator
 /assets/images/early-access
+/assets/fonts/inter
 /content/early-access
 /data/early-access
-dist
 .next
 .eslintcache
 
 # blc: broken link checker
 blc_output.log
 blc_output_internal.log
-/dist/
 broken_links.md

Dockerfile

@@ -46,7 +46,6 @@ COPY lib ./lib
 # one part of the build relies on this content file to pull all-products
 COPY content/index.md ./content/index.md
 
-COPY webpack.config.js ./webpack.config.js
 COPY next.config.js ./next.config.js
 COPY tsconfig.json ./tsconfig.json
 
@@ -73,7 +72,6 @@ USER node
 COPY --chown=node:node --from=prod_deps /usr/src/docs/node_modules /usr/src/docs/node_modules
 
 # Copy our front-end code
-COPY --chown=node:node --from=builder /usr/src/docs/dist /usr/src/docs/dist
 COPY --chown=node:node --from=builder /usr/src/docs/.next /usr/src/docs/.next
 
 # We should always be running in production mode

middleware/context.js

@@ -6,7 +6,6 @@ import xPathUtils from '../lib/path-utils.js'
 import productNames from '../lib/product-names.js'
 import warmServer from '../lib/warm-server.js'
 import readJsonFile from '../lib/read-json-file.js'
-import builtAssets from '../lib/built-asset-urls.js'
 import searchVersions from '../lib/search/versions.js'
 import nonEnterpriseDefaultVersion from '../lib/non-enterprise-default-version.js'
 const activeProducts = Object.values(productMap).filter(
@@ -58,9 +57,6 @@ export default async function contextualize(req, res, next) {
   req.context.siteTree = siteTree
   req.context.pages = pageMap
 
-  // JS + CSS asset paths
-  req.context.builtAssets = builtAssets
-
   // Object exposing selected variables to client
   req.context.expose = JSON.stringify({
     // Languages and versions for search

middleware/handle-errors.js

@@ -1,6 +1,5 @@
 import FailBot from '../lib/failbot.js'
 import loadSiteData from '../lib/site-data.js'
-import builtAssets from '../lib/built-asset-urls.js'
 import { nextApp } from './next.js'
 
 function shouldLogException(error) {
@@ -42,9 +41,8 @@ export default async function handleError(error, req, res, next) {
     // set req.context.site here so we can pass data/ui.yml text to the 500 layout
     if (!req.context) {
       const site = await loadSiteData()
-      req.context = { site: site[req.language || 'en'].site, builtAssets }
+      req.context = { site: site[req.language || 'en'].site }
     }
-
     // display error on the page in development and staging, but not in production
     if (req.context && process.env.HEROKU_PRODUCTION_APP !== 'true') {
       req.context.error = error

next.config.js

@@ -3,17 +3,30 @@
 
 const fs = require('fs')
 const frontmatter = require('gray-matter')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
 const path = require('path')
 const homepage = path.posix.join(process.cwd(), 'content/index.md')
 const { data } = frontmatter(fs.readFileSync(homepage, 'utf8'))
 const productIds = data.children
 
 module.exports = {
+  webpack: (config, { isServer }) => {
+    if (isServer) {
+      config.plugins.push(
+        new CopyWebpackPlugin({
+          patterns: [
+            {
+              from: path.join(__dirname, 'node_modules/@primer/css/fonts'),
+              to: path.join(__dirname, 'assets/fonts/inter'),
+            },
+          ],
+        })
+      )
+    }
+    return config
+  },
   // speed up production `next build` by ignoring typechecking during that step of build.
   // type-checking still occurs in the Dockerfile build
-  future: {
-    webpack: 5,
-  },
   typescript: {
     ignoreBuildErrors: true,
   },