Fix webpack docs example #2869

colinrotherham · 2022-09-21T09:03:14Z

Splitting out the "Fix webpack docs" commit from #2863 into this one

I've made these changes by hand so needs a bit of scrutiny

romaricpascal · 2022-09-26T15:02:08Z

Unrelated to the changes, but from giving it a quick go on my machine, I've had to make a few updates for npm install to run OK in the example folder:

update webpack's version to "^4.6.0" to not have conflicting versions
change node-sass to "sass": "^1.55.0" to have sass install OK with Node 16 (Node 14 was OK)

After that, however:

npm run dev doesn't boot a server at all and just exits
npm run build does build a main.js file in the public folder. Serving the folder with npx serve doesn't manage to load the styles (as it pulls them from ../../public/app.css

Looks like there's a few more things to do to get the Webpack example back on its feet (and maybe up to date with the latest Webpack versions?)

colinrotherham · 2022-09-26T15:48:28Z

@romaricpascal Thanks for digging into this. I'll make it a draft as I only really fixed paths and named imports

@36degrees Perhaps we could add tests for various bundlers?

36degrees · 2022-09-28T09:49:06Z

I've added this to the agenda to discuss at tomorrow's dev catch up.

colinrotherham · 2022-09-29T09:27:58Z

@36degrees @romaricpascal I've also fixed webpack (including the CSS) ready for catch up

colinrotherham · 2022-10-06T14:35:37Z

docs/examples/webpack/webpack.config.js

+            loader: 'sass-loader',
+            options: {
+              sassOptions: {
+                quietDeps: true


Silence deprecation warnings from dependencies in Dart Sass
https://frontend.design-system.service.gov.uk/importing-css-assets-and-javascript/#silence-deprecation-warnings-from-dependencies-in-dart-sass

colinrotherham · 2022-10-10T13:32:38Z

package.json

@@ -7,6 +7,10 @@
    "npm": "^8.5.0"
  },
  "license": "MIT",
+  "workspaces": [
+    "docs/examples/*",


This line makes sure npm install and npm ci also install webpack's dependencies

quibble Is that something we absolutely need for the example running? I'd rather we only brought example dependencies when trying to run the example rather than at every install.

Thanks @romaricpascal

This was to stop the example(s) going stale or getting out of sync again.

Enables things like:

npm run dev --workspace ./docs/examples/webpack

It's possible of course, but then we'd need an extra lockfile (per example) and have to rely on file:// package paths to the parent govuk-frontend. We'd also opt out of:

Package updates + auditing

Dependabot dependency updates

Automatic package deduplication

Postinstall "npm ls --depth=0" check

Example gets a symlink to govuk-frontend

I'd recommend the same approach for:

./app/package.json ./tasks/package.json

☝️ Not yet of course, but each "area" should manage its own packages and tests

Makes sense. Thanks for clarifying 😄 I like the idea of properly separating the app and tasks as well, that sounds pretty neat 😄

Yeah 100%

Deployment to Heroku doesn't need all our developer/test tooling etc 😊

colinrotherham · 2022-10-10T13:34:33Z

package.json

@@ -7,6 +7,10 @@
    "npm": "^8.5.0"
  },
  "license": "MIT",
+  "workspaces": [
+    "docs/examples/*",
+    "package"


Whilst ./package/package.json doesn't have any dependencies, it also creates a symbolic link from ./node_modules/govuk-frontend → ./package

This makes sure webpack's example can "find" the local govuk-frontend

import { Button } from 'govuk-frontend'

romaricpascal

The demo is working 🎉 Thanks for putting it back on its feet 🙌🏻

Only little quibble is with the installation for the examples dependency with the project's npm install (unless I misunderstood what it did), which I'd prefer to bring only when running the examples. It's not blocking for me if there's no other easy way 😄

romaricpascal · 2022-10-18T16:02:06Z

package.json

@@ -7,6 +7,10 @@
    "npm": "^8.5.0"
  },
  "license": "MIT",
+  "workspaces": [
+    "docs/examples/*",


quibble Is that something we absolutely need for the example running? I'd rather we only brought example dependencies when trying to run the example rather than at every install.

colinrotherham · 2022-10-18T16:29:36Z

Thanks @romaricpascal

I'll link up to the reply (to your concern) as it's useful #2869 (comment)

colinrotherham added documentation User requests new documentation or improvements to existing documentation javascript squad labels Sep 21, 2022

colinrotherham mentioned this pull request Sep 21, 2022

Separate out CSS/JS lint tasks from copy-assets #2863

Merged

colinrotherham marked this pull request as draft September 26, 2022 15:48

colinrotherham force-pushed the fix-webpack-example branch from 4f594a9 to 0349af0 Compare September 29, 2022 09:17

colinrotherham marked this pull request as ready for review September 29, 2022 09:26

colinrotherham force-pushed the fix-webpack-example branch 3 times, most recently from 343aac2 to 39c2725 Compare October 6, 2022 14:32

colinrotherham commented Oct 6, 2022

View reviewed changes

colinrotherham force-pushed the fix-webpack-example branch from 39c2725 to 25fc0f5 Compare October 6, 2022 14:40

colinrotherham commented Oct 10, 2022

View reviewed changes

colinrotherham force-pushed the fix-webpack-example branch 2 times, most recently from deefa44 to d5ed72c Compare October 11, 2022 10:54

colinrotherham force-pushed the fix-webpack-example branch from d5ed72c to ae47856 Compare October 17, 2022 17:50

colinrotherham mentioned this pull request Oct 17, 2022

Add postcss.config.js/.browserslistrc configs #2881

Merged

colinrotherham force-pushed the fix-webpack-example branch from ae47856 to f170dd1 Compare October 17, 2022 18:11

colinrotherham changed the base branch from main to babel-for-tests October 17, 2022 18:21

colinrotherham force-pushed the babel-for-tests branch from 78bd8ad to 702b6e5 Compare October 18, 2022 11:43

colinrotherham force-pushed the fix-webpack-example branch from f170dd1 to 87e2c9e Compare October 18, 2022 11:45

colinrotherham force-pushed the babel-for-tests branch from 702b6e5 to a4061af Compare October 18, 2022 14:18

colinrotherham force-pushed the fix-webpack-example branch from 87e2c9e to ab0d575 Compare October 18, 2022 14:18

Base automatically changed from babel-for-tests to main October 18, 2022 14:23

Fix webpack docs example

5e3a6de

colinrotherham force-pushed the fix-webpack-example branch from ab0d575 to 5e3a6de Compare October 18, 2022 14:43

romaricpascal approved these changes Oct 18, 2022

View reviewed changes

36degrees approved these changes Oct 19, 2022

View reviewed changes

colinrotherham merged commit b4c5065 into main Oct 19, 2022

colinrotherham deleted the fix-webpack-example branch October 19, 2022 08:50

colinrotherham linked an issue Nov 29, 2022 that may be closed by this pull request

Split project into separate app, config, lib and tasks packages #2886

Closed

7 tasks

colinrotherham mentioned this pull request Jan 16, 2023

chore(webpack): remove ie8 #3165

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix webpack docs example #2869

Fix webpack docs example #2869

colinrotherham commented Sep 21, 2022

romaricpascal commented Sep 26, 2022

colinrotherham commented Sep 26, 2022

36degrees commented Sep 28, 2022

colinrotherham commented Sep 29, 2022

colinrotherham Oct 6, 2022 •

edited

Loading

colinrotherham Oct 10, 2022

romaricpascal Oct 18, 2022

colinrotherham Oct 18, 2022

romaricpascal Oct 18, 2022

colinrotherham Oct 18, 2022

colinrotherham Oct 10, 2022

romaricpascal left a comment

romaricpascal Oct 18, 2022

colinrotherham commented Oct 18, 2022

Fix webpack docs example #2869

Fix webpack docs example #2869

Conversation

colinrotherham commented Sep 21, 2022

romaricpascal commented Sep 26, 2022

colinrotherham commented Sep 26, 2022

36degrees commented Sep 28, 2022

colinrotherham commented Sep 29, 2022

colinrotherham Oct 6, 2022 • edited Loading

Choose a reason for hiding this comment

colinrotherham Oct 10, 2022

Choose a reason for hiding this comment

romaricpascal Oct 18, 2022

Choose a reason for hiding this comment

colinrotherham Oct 18, 2022

Choose a reason for hiding this comment

romaricpascal Oct 18, 2022

Choose a reason for hiding this comment

colinrotherham Oct 18, 2022

Choose a reason for hiding this comment

colinrotherham Oct 10, 2022

Choose a reason for hiding this comment

romaricpascal left a comment

Choose a reason for hiding this comment

romaricpascal Oct 18, 2022

Choose a reason for hiding this comment

colinrotherham commented Oct 18, 2022

colinrotherham Oct 6, 2022 •

edited

Loading