Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Running webpack-dev-server caches generated static html content #35

Closed
alicoding opened this issue Jun 16, 2015 · 5 comments
Closed

Running webpack-dev-server caches generated static html content #35

alicoding opened this issue Jun 16, 2015 · 5 comments
Labels
enhancement

Comments

@alicoding
Copy link

I'm using this example here https://github.com/HenrikJoreteg/hjs-webpack/tree/master/examples/prerendered-html-files

When I run npm start which is webpack-dev-server it doesn't seem to generate the static files */index.html for some reason. I had to run webpack first in order to get that work.
@alicoding
Copy link
Author

Additional problem here that I also notice with using webpack-dev-server is that it doesn't rebuild any of the static files or output file from webpack as well.

@lukekarrys
Copy link
Contributor

Hey @alicoding, thanks for the issue :)

The goal of webpack-dev-server is to not output anything to disk but instead to serve the files from the local development path. If you start the server you can see that the paths do return the html specified

> curl http://localhost:3000/index.html --ipv4
<!doctype html><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/></head><body><div class="container" data-reactid=".19quttyuio0" data-react-checksum="337254763"><header role="banner" data-reactid=".19quttyuio0.0"><h1 data-reactid=".19quttyuio0.0.0">Pre-rendering example</h1></header><a href="/other" data-reactid=".19quttyuio0.1">go to /other</a><p data-reactid=".19quttyuio0.2"><span data-reactid=".19quttyuio0.2.0">Note that navigating between these two pages also works </span><em data-reactid=".19quttyuio0.2.1"><strong data-reactid=".19quttyuio0.2.1.0">with JS off</strong></em></p><p data-reactid=".19quttyuio0.3">During dev things are handled by catchall/generated/live-reloaded dev-server</p><p data-reactid=".19quttyuio0.4"><span data-reactid=".19quttyuio0.4.0">During </span><strong data-reactid=".19quttyuio0.4.1">build</strong><span data-reactid=".19quttyuio0.4.2"> homepage and layout are pre-rendered.</span></p></div></body><script src="/app.js"></script>

> curl http://localhost:3000/other/index.html --ipv4
<!doctype html><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/></head><body><div class="container" data-reactid=".21jr312ihog" data-react-checksum="-1389279575"><header role="banner" data-reactid=".21jr312ihog.0"><h1 data-reactid=".21jr312ihog.0.0">Other page</h1></header><a href="/" data-reactid=".21jr312ihog.1">go to /</a></div></body><script src="/app.js"></script>

> curl http://localhost:3000/other/index2.html --ipv4
Cannot GET /other/index2.html

As for the second issue, I'm seeing the same thing. If I make changes to src/home-page.js and curl again, I get the same html as before I made the change. I think this can be fixed by hjs-webpack, but not sure how to go about doing that just yet. I think it has to do with lib/html-plugin.js knowing whether to cache its results as a webpack plugin. I'll look into this.

@lukekarrys lukekarrys changed the title Running webpack-dev-server doesn't generate static content Running webpack-dev-server caches generated static html content Jun 18, 2015
@lukekarrys
Copy link
Contributor

@alicoding Below is way too much info about this issue, but I wanted to document my findings at least.

So the issue is that the generating html portion of the process isn't using webpack loaders so it ends up being tied to the fact that node caches require calls.

Here's some code that ends up working for the html() function, but the code is pretty ugly and not a suitable long-term workaround IMO:

html: function (data) {
  var pages = {};
  var pageRequires = {
    'index.html': './src/home-page.js',
    'other/index.html' : './src/other-page.js'
  };

  Object.keys(pageRequires).forEach(function (page) {
    // Generate the full require path since that is what is used for the require.cache key
    var requirePath = path.resolve(__dirname, pageRequires[page])
    // Delete from the require cache
    delete require.cache[requirePath]
    // Require the page again
    pages[page] = data.defaultTemplate({
      html: React.renderToString(React.createElement(require(requirePath)))
    });
  });

  return pages;
}

We had discussed previously (#24 (comment)) using a different html plugin but looking at the issues for that project, it has an open issue for the same thing and also an open PR which might fix it.

I subscribed to that PR on GitHub so I'll keep tabs on when it gets merged. I propose that once that happens we take a look at implementing it within hjs-webpack.

@alicoding
Copy link
Author

Hey @lukekarrys :)

I end up using this plugin in the meanwhile https://www.npmjs.com/package/simple-html-precompiler for generating HTML... for now at least.

@HenrikJoreteg
Copy link
Owner

Hey folks, yeah. I agree this is all a bit wonky. Frankly, testing pre-rendering locally is a bit weird, just because it won't automatically be live-reloaded or even refreshed as you said. But... having said that. I've been building apps this way and I think this limitation is tolerable.

I've been using the serveCustomHtmlInDev option to just run everything live and not pre-rendered in dev. Basically i end up building the app logic and everything in dev mode and then testing the pre-rendering as part of making sure the build step does what I want it to do.

I'm closing this issue for now, until we've got some sort of actionable plan.

hsimah pushed a commit to hsimah/hjs-webpack that referenced this issue Jun 23, 2017
HenrikJoreteg#35 postcss-loader sourcemap default option
8629d50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@HenrikJoreteg @lukekarrys @alicoding