Fix: switch over to webpack-dev-server #105

airtonix · 2018-10-16T10:51:44Z

Fixes #104

airtonix · 2018-10-16T10:52:34Z

cli.js

@@ -52,7 +52,13 @@ const cli = meow(`
    },
    port: {
      type: 'string',
-      alias: 'p'
+      alias: 'p',
+      default: '8080'


needed to supply these because i think webpack-serve was previously providing this default

airtonix · 2018-10-16T10:53:06Z

cli.js

@@ -145,8 +151,7 @@ switch (cmd) {
    const dev = require('./lib/dev')
    dev(opts)
      .then(({ server }) => {
-        const { port } = server.options
-        const url = `http://localhost:${port}`
+        const url = `http://${server.host}:${server.port}`


now we report the listening host interface

lib/dev.js

airtonix · 2018-10-16T10:54:39Z

package.json

-    "start": "./cli.js docs",
-    "build": "./cli.js build docs",
+    "start": "node ./cli.js docs",
+    "build": "node ./cli.js build docs",


on windows 10, (powershell/cmd.exe) hashbangs have no effect.

airtonix · 2018-10-16T11:03:12Z

Not sure how to deal with the failing test. It's choking on classnames.

johno · 2018-10-17T21:50:53Z

Thanks @airtonix! This is looking great so far. I'm going to take this for a spin shortly. Btw, to fix the snapshot failure you can regenerate the snapshot with npm t -- -u.

airtonix · 2018-10-18T00:00:58Z

Cool, I'll try tackle that tonight. 10.30 am right now

…

On Thu, Oct 18, 2018, 8:20 AM John Otander ***@***.***> wrote: Thanks @airtonix <https://github.com/airtonix>! This is looking great so far. I'm going to take this for a spin shortly. Btw, to fix the snapshot failure you can regenerate the snapshot with npm t -- -u. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#105 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AADvKQ4GaAemGzthi7gEccy9KWaWeOXiks5ul6Y_gaJpZM4XeFum> .

airtonix · 2018-10-21T09:18:26Z

not sure why 5973ff1 failed. I updated the snapshots

airtonix · 2018-10-21T09:21:26Z

./stumped

zenobius@JADAKREN ~\Projects\Mine\x0 [feature/104-replace-webpack-serve-with-webpack-dev-server*]
$ npm run test:components

> @compositor/x0@6.0.7 test:components C:\Users\zenobius\Projects\Mine\x0
> nyc ava test/components.js

The above error occurred in the <Throws> component:
    in Throws
    in Catch

React will try to recreate this component tree from scratch using the error boundary you provided, Catch.
Warning: You cannot change <Router history>
Warning: You cannot change <Router history>
Warning: You cannot change <Router history>

  31 passed
  1 skipped
-------------------|----------|----------|----------|----------|-------------------|
File               |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-------------------|----------|----------|----------|----------|-------------------|
All files          |    89.62 |    58.46 |    75.61 |    93.06 |                   |
 Catch.js          |    66.67 |       50 |      100 |    71.43 |             13,14 |
 CenteredLayout.js |      100 |      100 |      100 |      100 |                   |
 FileList.js       |      100 |       50 |      100 |      100 |                 4 |
 Library.js        |      100 |       50 |      100 |      100 |                50 |
 LiveEditor.js     |    73.68 |        0 |        0 |     87.5 |             50,58 |
 LivePreview.js    |      100 |      100 |      100 |      100 |                   |
 ScopeProvider.js  |      100 |      100 |      100 |      100 |                   |
 ScrollTop.js      |    92.31 |       75 |      100 |      100 |              4,14 |
 SidebarLayout.js  |    88.73 |    59.38 |    70.83 |    91.49 |   230,251,285,288 |
 scope.js          |     93.1 |    77.78 |      100 |       92 |             53,55 |
-------------------|----------|----------|----------|----------|-------------------|
zenobius@JADAKREN ~\Projects\Mine\x0 [feature/104-replace-webpack-serve-with-webpack-dev-server*]
$ npm test

> @compositor/x0@6.0.7 test C:\Users\zenobius\Projects\Mine\x0
> nyc ava --timeout=60s

The above error occurred in the <Throws> component:
    in Throws
    in Catch

React will try to recreate this component tree from scratch using the error boundary you provided, Catch.
Warning: You cannot change <Router history>
Warning: You cannot change <Router history>
Warning: You cannot change <Router history>
[BABEL] Note: The code generator has deoptimised the styling of "C:/Users/zenobius/Projects/Mine/x0/test/output/TEMP/App.js" as it exceeds the max of "500KB".

  35 passed
  1 skipped
--------------------|----------|----------|----------|----------|-------------------|
File                |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
--------------------|----------|----------|----------|----------|-------------------|
All files           |    83.08 |    55.56 |    81.08 |    84.59 |                   |
 lib                |    74.65 |    53.16 |    87.88 |    74.59 |                   |
  build.js          |    69.49 |    43.55 |       84 |     69.9 |... 18,219,222,223 |
  config.js         |      100 |      100 |      100 |      100 |                   |
  createTemplate.js |      100 |      100 |      100 |      100 |                   |
  mdx-fm-loader.js  |      100 |    66.67 |      100 |      100 |                 5 |
  template.js       |      100 |    91.67 |      100 |      100 |                 2 |
 src                |    89.62 |    58.46 |    75.61 |    93.06 |                   |
  Catch.js          |    66.67 |       50 |      100 |    71.43 |             13,14 |
  CenteredLayout.js |      100 |      100 |      100 |      100 |                   |
  FileList.js       |      100 |       50 |      100 |      100 |                 4 |
  Library.js        |      100 |       50 |      100 |      100 |                50 |
  LiveEditor.js     |    73.68 |        0 |        0 |     87.5 |             50,58 |
  LivePreview.js    |      100 |      100 |      100 |      100 |                   |
  ScopeProvider.js  |      100 |      100 |      100 |      100 |                   |
  ScrollTop.js      |    92.31 |       75 |      100 |      100 |              4,14 |
  SidebarLayout.js  |    88.73 |    59.38 |    70.83 |    91.49 |   230,251,285,288 |
  scope.js          |     93.1 |    77.78 |      100 |       92 |             53,55 |
--------------------|----------|----------|----------|----------|-------------------|
zenobius@JADAKREN ~\Projects\Mine\x0 [feature/104-replace-webpack-serve-with-webpack-dev-server*]
$

…er' of github.com:airtonix/x0 into feature/104-replace-webpack-serve-with-webpack-dev-server

airtonix · 2018-10-23T11:54:03Z

Ok this works on my personal website, you can try it out:

http://github.com/airtonix/zenobi.us/tree/feature/x0

uses docker, npm run dev, uses docker image airtonix/zenobi.us:4.0.0-beta

airtonix · 2018-10-23T12:18:36Z

So learnings here:

tests are sensitive to node 8 vs node 10
webpack-dev-server requires the plugins in e761671, no need to inject hot client as entry points like did back in webpack 2 days.
devServer: {hot: true } is a thing. it's required.

@johno ready for you guys to code review.

johno · 2018-11-18T17:14:07Z

Thanks for this @airtonix 🙏! I'll be reviewing and testing this PR sometime this week and will get a release cut.

theRemix · 2019-01-22T23:07:32Z

@airtonix i tested out your branch and i think you need to add the webpack-hot-client dependency

Fix: switch over to webpack-dev-server

5361ff8

airtonix commented Oct 16, 2018

View reviewed changes

lib/dev.js Outdated Show resolved Hide resolved

airtonix commented Oct 16, 2018

View reviewed changes

airtonix added 2 commits October 16, 2018 21:26

Fix: remove koa-connect... no longer need it

4ad1882

Fix: use existing debug flag

94739c6

airtonix added 6 commits October 20, 2018 21:05

Fix: update snapshots

02c6842

Fix: downgrade react-live to avoid #108

32be9fc

Fix: work around remaining lack of HMR

00f6c9a

Fix: update snapshots

5973ff1

Fix: remove old snapshot

cd9d3bf

Fix: add new snapshot

198043b

airtonix added 4 commits October 23, 2018 22:00

Fix: connect frontend HMR with devserver middleware

e761671

Merge branch 'feature/104-replace-webpack-serve-with-webpack-dev-serv…

61e7c97

…er' of github.com:airtonix/x0 into feature/104-replace-webpack-serve-with-webpack-dev-server

Fix: remove HMR client injection. it's not required

024b084

Fix: use WDS provided HMR client bindings

831a61f

airtonix added 2 commits October 23, 2018 22:26

Fix: update snapshot

cb3ad96

Fix: update snapshots using node 10

a3ba7d7

johno mentioned this pull request Nov 18, 2018

v7 release #110

Open

10 tasks

airtonix closed this by deleting the head repository Oct 30, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix: switch over to webpack-dev-server #105

Fix: switch over to webpack-dev-server #105

airtonix commented Oct 16, 2018

airtonix Oct 16, 2018

airtonix Oct 16, 2018

airtonix Oct 16, 2018

airtonix commented Oct 16, 2018

johno commented Oct 17, 2018

airtonix commented Oct 18, 2018 via email

airtonix commented Oct 21, 2018

airtonix commented Oct 21, 2018

airtonix commented Oct 23, 2018 •

edited

airtonix commented Oct 23, 2018 •

edited

johno commented Nov 18, 2018

theRemix commented Jan 22, 2019

Fix: switch over to webpack-dev-server #105

Fix: switch over to webpack-dev-server #105

Conversation

airtonix commented Oct 16, 2018

airtonix Oct 16, 2018

Choose a reason for hiding this comment

airtonix Oct 16, 2018

Choose a reason for hiding this comment

airtonix Oct 16, 2018

Choose a reason for hiding this comment

airtonix commented Oct 16, 2018

johno commented Oct 17, 2018

airtonix commented Oct 18, 2018 via email

airtonix commented Oct 21, 2018

airtonix commented Oct 21, 2018

airtonix commented Oct 23, 2018 • edited

airtonix commented Oct 23, 2018 • edited

johno commented Nov 18, 2018

theRemix commented Jan 22, 2019

airtonix commented Oct 23, 2018 •

edited

airtonix commented Oct 23, 2018 •

edited