feature: Prerender using webpack #71

rkostrzewski · 2017-05-29T17:07:29Z

Prerender fails when webpack specific stuff is in js code (described here #43, here #39, here #62 and possibly other places).

This fixes that by creating separate webpack bundle just for prerender with commonjs2 target.

This adds some overhead when building, but I couldn't use webpack's multiple compiler with two configs because some plugins failed. 😢

WIP because I must fully test this & wanted to hear early feedback.

developit · 2017-05-29T23:21:18Z

A thought I had: could we produce a UMD bundle that would be usable in both the client and the server? Definitely interested in any way to avoid the overhead of 2 concurrent builds. I think the closest prior art I know of here would be static-site-generator-webpack-plugin - maybe their technique would work. Or maybe a webpack bundle that can detect if its running under node/cjs and do a module.exports, otherwise performs a client render.

developit · 2017-05-29T23:25:20Z

src/lib/run-webpack.js

+		newConfig.output.libraryTarget = 'commonjs2';
+
+		let asyncLoaderIndex = newConfig.module.loaders
+			.findIndex(l => l.loader === path.resolve(__dirname, 'async-component-loader'));


might be able to just alias this to a dummy / passthrough loader

Yeah it would be better + whenever someone uses import Component from 'async!./components/...' currently it won't work

developit · 2017-05-29T23:26:11Z

If you don't mind I might also take a stab at this with the UMD approach. I'm curious, but it might not work at all so I don't want to waste your time 😇

rkostrzewski · 2017-05-30T07:02:51Z

@developit go ahead! 😄

Also, I'm thinking about using some in memory file system (memfs for example) for webpack builds so that there won't be some magic folder called in npm module (+using normal fs breaks concurrency) 😄

rkostrzewski · 2017-05-30T09:44:51Z

@developit I didn't see your first comment.

A thought I had: could we produce a UMD bundle that would be usable in both the client and the server? Definitely interested in any way to avoid the overhead of 2 concurrent builds. I think the closest prior art I know of here would be static-site-generator-webpack-plugin - maybe their technique would work. Or maybe a webpack bundle that can detect if its running under node/cjs and do a module.exports, otherwise performs a client render.

Technically possible. Passing two configs to webpack with two entries (sth like webpack([{ entry: 'index.js', rules: ... }, { entry: 'App.js', rules: ... }]) doesn't add overhead and webpack doesn't seem to process same file twice (at least based on time it takes to compile). However, there is a problem with some plugins (just a guess) that are applied twice and throw errors. I want to investigate that and possibly exclude those plugins in SSR build.

rkostrzewski · 2017-05-30T16:25:01Z

I've been able to pinpoint location of the erroneous plugin 😄, this: goldhand/sw-precache-webpack-plugin#78 will enable us to use single webpack compiler pass & reduce overhead. 🎉

…lient & server separate configs

…n dist directory

rkostrzewski · 2017-05-31T15:00:43Z

All wrapped up & tested.
Chosen not to use any memory filesystem (require doesn't work) and webpack creates ssr-build folder with bundle for SSR - this will be convenient when we will be working for server-side integration of rendering routes.

@developit if you haven't started yet & have some ideas for further work on this, feel free to work on this branch. 😄

I'm thinking about writing some tests that would be able to verify the CLI works correctly (not only running builds, but running built bundles & watch mode).

lukeed · 2017-05-31T21:35:28Z

@rkostrzewski I think we should bump the sw-precache dependency now that your PR there has been merged.

kurtextrem · 2017-06-01T10:32:35Z

I haven't tried the code yet, but is polyfilling history and location enough? Where do the other things Preact uses (such as document.createElement) come from?

# Conflicts: # src/lib/run-webpack.js

developit · 2017-06-01T14:05:27Z

@kurtextrem During SSR, only h() is actually invoked from Preact. It knows to avoid any DOM mutation :)

@rkostrzewski I didn't get a chance to test out yet, so I'll just check this branch out and try some things.

hassanbazzi · 2017-06-02T00:25:38Z

src/lib/webpack/webpack-base-config.js


 		customConfig({
 			resolve: {
 				modules: [
 					'node_modules',
-					resolve(__dirname, '../../node_modules')
+					resolve(__dirname, '../../../node_modules')


We should just be using NODE_PATH for this wherever possible. Actually, anywhere we have node_modules references for resolving, we should add NODE_PATH. That'll make us future proof.

As a variable inside the file const NODE_PATH = resolve(__dirname, '../../node_modules') or via CLI?

I thought NODE_PATH pointed to the global node_modules directory?

@developit Correct, which is what you want. It's basically used when people decide not to put node_modules inside their root dir but rather somewhere else.

right but that assumes global - preact-cli installs itself as a local dep and this is looking there. I had wondered if there was a way to get to that path... maybe something like:

path.join(require.resolve('preact-cli'), 'node_modules')

Refactor, testing build size

Headless chrome, all commands tested

# Conflicts: # src/commands/build.js # src/commands/watch.js

CR changes

Try no 1

prateekbh · 2017-06-15T15:09:13Z

just an fyi, i just debugged
#42 is also being caused due to prerender, i am trying to dig deeper, will post if any finding comes up

# Conflicts: # .gitignore

# Conflicts: # .travis.yml

hassanbazzi · 2017-06-21T06:21:33Z

I just tried this branch on my site and I got the following error:

(undefined) Template execution failed: Error: Cannot find module '/Users/mypath/build/ssr-build/ssr-bundle.js'
(undefined)   Error: Cannot find module '/Users/mypath/build/ssr-build/ssr-bundle.js'
  
  - module.js:20 require
    internal/module.js:20:19
  
  - prerender.js:17 prerender
    [website]/[preact-cli]/lib/lib/webpack/prerender.js:17:10
  
  - webpack-client-config.js:156 Object.ssr
    [website]/[preact-cli]/lib/lib/webpack/webpack-client-config.js:156:54
  
  - template.html:109 EM6I.module.exports
    [website]/[preact-cli]/lib/resources/template.html:109:37
  
  - index.js:265 
    [website]/[html-webpack-plugin]/index.js:265:16
  
  - util.js:16 tryCatcher
    [website]/[html-webpack-plugin]/[bluebird]/js/release/util.js:16:23
  
  - promise.js:512 Promise._settlePromiseFromHandler
    [website]/[html-webpack-plugin]/[bluebird]/js/release/promise.js:512:31
  
  - promise.js:569 Promise._settlePromise
    [website]/[html-webpack-plugin]/[bluebird]/js/release/promise.js:569:18
  
  - promise.js:606 Promise._settlePromiseCtx
    [website]/[html-webpack-plugin]/[bluebird]/js/release/promise.js:606:10
  
  - async.js:138 Async._drainQueue
    [website]/[html-webpack-plugin]/[bluebird]/js/release/async.js:138:12
  
  - async.js:143 Async._drainQueues
    [website]/[html-webpack-plugin]/[bluebird]/js/release/async.js:143:10
  
  - async.js:17 Immediate.Async.drainQueues
    [website]/[html-webpack-plugin]/[bluebird]/js/release/async.js:17:14

# Conflicts: # src/commands/watch.js # src/lib/prerender.js # src/lib/webpack/webpack-base-config.js

…re/webpack-ssr

hassanbazzi · 2017-06-22T23:10:29Z

LGTM! I just went through and tested this super thoroughly. Also tried using the few config options differently for templates and such. :)

# Conflicts: # package.json # tests/build.snapshot.js # tests/build.test.js # tests/lib/chrome.js # tests/lib/cli.js # tests/lib/output.js # tests/serve.test.js

# Conflicts: # src/lib/webpack/webpack-base-config.js

hassanbazzi · 2017-06-26T22:30:46Z

teaaaam let's put this in master yo

ethanroday · 2017-06-26T22:47:10Z

@hassanbazzi +1 but looks like tests are failing?

rkostrzewski · 2017-06-27T04:57:48Z

Seems like snapshots have different sizes on CI.

# Conflicts: # package.json # tests/build.snapshot.js # tests/build.test.js

# Conflicts: # package.json # src/commands/build.js # src/commands/watch.js # src/lib/webpack/webpack-base-config.js # tests/build.snapshot.js # tests/build.test.js

hassanbazzi · 2017-06-28T16:47:51Z

tests/build.test.js

 test(`preact build - should use custom .babelrc.`, options, async t => {
 	// app with custom .babelrc enabling async functions
 	let app = await fromSubject('custom-babelrc');

 	// UglifyJS throws error when generator is encountered
-	// TODO: Remove '--no-prederender' once #71 is merged - babel-register problem
-	await build(app, ['--no-prerender']);
+	await build(app);


Nice! Got it to work with uglify?

hassanbazzi · 2017-06-28T17:59:39Z

LGTM :)

rkostrzewski added 2 commits May 29, 2017 15:46

Merge remote-tracking branch 'developit/master'

eb9f9c1

feat(WebpackSSR): Prerender using webpack bundled code

5615460

Merge branch 'master' into feature/webpack-ssr

bd01055

developit reviewed May 29, 2017

View reviewed changes

developit mentioned this pull request May 29, 2017

Custom server support #70

Closed

feat(WebpackSSR): Single webpack compiler pass

63e745a

rkostrzewski added 2 commits May 30, 2017 20:41

refacotr(WebpackSSR): Move webpack stuff to webpack folder & create c…

b18db39

…lient & server separate configs

feat(WebpackSSR): Async component loading for server & build output i…

22e93c5

…n dist directory

rkostrzewski changed the title ~~[WIP] feature: Prerender using webpack~~ feature: Prerender using webpack May 31, 2017

fix: JSON stats for new webpack build with two configs

b47314d

chore: update sw-precache-webpack-plugin to 0.11.2

318c90f

Merge remote-tracking branch 'developit/master' into feature/webpack-ssr

881e476

# Conflicts: # src/lib/run-webpack.js

hassanbazzi reviewed Jun 2, 2017

View reviewed changes

rkostrzewski added 8 commits June 7, 2017 21:44

test: Preact CLI tests [WIP]

864e55c

test: Preact CLI tests [WIP]

8d5d286

Refactor, testing build size

test: Preact CLI tests

a70e062

Headless chrome, all commands tested

Remove yarn.lock

f0b2020

Merge remote-tracking branch 'developit/master' into feature/webpack-ssr

5287818

# Conflicts: # src/commands/build.js # src/commands/watch.js

refactor: Preact CLI tests

69829bb

CR changes

chore: Setup Travis CI

7800035

fix: Setup test timeouts for travis

2197b93

Try no 1

rkostrzewski added 6 commits June 15, 2017 17:12

Merge branch 'master' into feature/cli-tests

7a3f7bd

# Conflicts: # .gitignore

tests: Use chrome-launcher npm package instead of lighthouse

bf1b859

tests: Remove cert install

1f74d82

tests: New way of handling SSL certificates

ecb762e

tests: New way of handling SSL certificates

4e0ec76

Merge branch 'master' into feature/cli-tests

94038b7

# Conflicts: # .travis.yml

developit mentioned this pull request Jun 21, 2017

Request for a how-to guide - use React component #120

Closed

rkostrzewski added 4 commits June 22, 2017 14:11

Merge developit/master

22b3641

# Conflicts: # src/commands/watch.js # src/lib/prerender.js # src/lib/webpack/webpack-base-config.js

Merge remote-tracking branch 'developit/feature/cli-tests' into featu…

2b6cf54

…re/webpack-ssr

fix: Failing tests for webpack SSR

c1d3635

tests: Add test for webpack prerender

778524d

rkostrzewski added 4 commits June 23, 2017 18:09

Merge remote-tracking branch 'developit/master' into feature/webpack-ssr

9e5d587

# Conflicts: # package.json # tests/build.snapshot.js # tests/build.test.js # tests/lib/chrome.js # tests/lib/cli.js # tests/lib/output.js # tests/serve.test.js

Merge remote-tracking branch 'developit/master' into feature/webpack-ssr

4d0ce1a

# Conflicts: # src/lib/webpack/webpack-base-config.js

Merge remote-tracking branch 'developit/master' into feature/webpack-ssr

9205759

# Conflicts: # src/lib/webpack/webpack-base-config.js

Merge remote-tracking branch 'developit/master' into feature/webpack-ssr

5072e1b

# Conflicts: # src/lib/webpack/webpack-base-config.js

rkostrzewski added 5 commits June 27, 2017 20:36

Merge remote-tracking branch 'developit/master' into feature/webpack-ssr

65a93d9

# Conflicts: # package.json # tests/build.snapshot.js # tests/build.test.js

Merge remote-tracking branch 'developit/master' into feature/webpack-ssr

0de7bf9

# Conflicts: # package.json # src/commands/build.js # src/commands/watch.js # src/lib/webpack/webpack-base-config.js # tests/build.snapshot.js # tests/build.test.js

chore: Remove pacakge-lock.json [ci skip]

8759601

feat: transform config

a1d4ed7

Merge remote-tracking branch 'developit/master' into feature/webpack-ssr

5ffc9fc

hassanbazzi reviewed Jun 28, 2017

View reviewed changes

hassanbazzi approved these changes Jun 28, 2017

View reviewed changes

hassanbazzi merged commit aaebfaf into preactjs:master Jun 28, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feature: Prerender using webpack #71

feature: Prerender using webpack #71

rkostrzewski commented May 29, 2017

developit commented May 29, 2017 •

edited

Loading

developit May 29, 2017

rkostrzewski May 30, 2017

developit commented May 29, 2017 •

edited

Loading

rkostrzewski commented May 30, 2017

rkostrzewski commented May 30, 2017

rkostrzewski commented May 30, 2017

rkostrzewski commented May 31, 2017

lukeed commented May 31, 2017

kurtextrem commented Jun 1, 2017

developit commented Jun 1, 2017 •

edited

Loading

hassanbazzi Jun 2, 2017

rkostrzewski Jun 27, 2017

developit Jun 27, 2017

hassanbazzi Jun 28, 2017

developit Jun 28, 2017 •

edited

Loading

prateekbh commented Jun 15, 2017

hassanbazzi commented Jun 21, 2017

hassanbazzi commented Jun 22, 2017

hassanbazzi commented Jun 26, 2017

ethanroday commented Jun 26, 2017

rkostrzewski commented Jun 27, 2017

hassanbazzi Jun 28, 2017

hassanbazzi commented Jun 28, 2017

feature: Prerender using webpack #71

feature: Prerender using webpack #71

Conversation

rkostrzewski commented May 29, 2017

developit commented May 29, 2017 • edited Loading

developit May 29, 2017

Choose a reason for hiding this comment

rkostrzewski May 30, 2017

Choose a reason for hiding this comment

developit commented May 29, 2017 • edited Loading

rkostrzewski commented May 30, 2017

rkostrzewski commented May 30, 2017

rkostrzewski commented May 30, 2017

rkostrzewski commented May 31, 2017

lukeed commented May 31, 2017

kurtextrem commented Jun 1, 2017

developit commented Jun 1, 2017 • edited Loading

hassanbazzi Jun 2, 2017

Choose a reason for hiding this comment

rkostrzewski Jun 27, 2017

Choose a reason for hiding this comment

developit Jun 27, 2017

Choose a reason for hiding this comment

hassanbazzi Jun 28, 2017

Choose a reason for hiding this comment

developit Jun 28, 2017 • edited Loading

Choose a reason for hiding this comment

prateekbh commented Jun 15, 2017

hassanbazzi commented Jun 21, 2017

hassanbazzi commented Jun 22, 2017

hassanbazzi commented Jun 26, 2017

ethanroday commented Jun 26, 2017

rkostrzewski commented Jun 27, 2017

hassanbazzi Jun 28, 2017

Choose a reason for hiding this comment

hassanbazzi commented Jun 28, 2017

developit commented May 29, 2017 •

edited

Loading

developit commented May 29, 2017 •

edited

Loading

developit commented Jun 1, 2017 •

edited

Loading

developit Jun 28, 2017 •

edited

Loading