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.

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

HtmlWebpackPlugin + webpack-dev-middleware other pathname than / #145

Closed
Sigura opened this Issue Dec 17, 2015 · 29 comments

Comments

Projects
None yet
@Sigura
Copy link

Sigura commented Dec 17, 2015

Hello,

First, thank you for your wonderful work!

Second ,) My issue, I tried to use HtmlWebpackPlugin with dev server as middleware.
All is fine when path / but when path is /login webpack-dev-middleware return 404

Then I need something like:

app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'index.html'));
});

but for HtmlWebpackPlugin or may be if it's possible, fix it by option of HtmlWebpackPlugin.

@jantimon

This comment has been minimized.

Copy link
Owner

jantimon commented Dec 17, 2015

The reason is that webpack-dev-middle ware doesn't write the index.html on disk but keeps it in memory for better performance.

You could try:

new HtmlWebpackPlugin({
  filename: 'login/index.html'
})
@Sigura

This comment has been minimized.

Copy link

Sigura commented Dec 17, 2015

I know ,) It's good for dev process of course.

And yes, of course, I tried. But plugin do not write index.html when webpack-dev-middle work.

The is the reason why I make issue.

@jantimon

This comment has been minimized.

Copy link
Owner

jantimon commented Dec 17, 2015

Did you try the proposed solution?

@jantimon jantimon added the question label Dec 17, 2015

@Sigura

This comment has been minimized.

Copy link

Sigura commented Dec 17, 2015

I thought about it. It's really not a bug.

But sorry may be my suggestion is not great. I hope you can make better.

But anyway.

// file like HtmlWebpackPlugin.config.js
export default {
  filename: '..',
  minify: {...}
}
// webpack.config.js
import htmlConfig from HtmlWebpackPlugin.config
...
  plugins: [
    ...,
    new HtmlWebpackPlugin(htmlConfig)
 ]
...
// webpack-dev-server.js
...
app.use(new HtmlWebpackPlugin(htmlConfig).middleware)
@Sigura

This comment has been minimized.

Copy link

Sigura commented Dec 17, 2015

Maybe it's separate package like webpack-html-middleware. I'm really not sure ,))

@jantimon jantimon closed this Jan 6, 2016

@mbektimirov

This comment has been minimized.

Copy link

mbektimirov commented Jan 10, 2016

@jantimon Your solution doesn't work. Still have 404 error. My configuration:
dev-server.js:

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler));

app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'index.html'));
});

webpack.config.js:

plugins: [
     new HtmlWebpackPlugin({
      template: 'src/index.html',
      filename: 'index.html',
      inject: 'body'
    }),
  ]
@jantimon

This comment has been minimized.

Copy link
Owner

jantimon commented Jan 11, 2016

Hi,

I found a solution which should solve it for you: next('route');
This will tell express to execute the route again:

app.get('*', function (req, res, next) {
    req.url = 'index.html';
    next('route');
});

from: http://stackoverflow.com/a/22081112/159319

@mbektimirov

This comment has been minimized.

Copy link

mbektimirov commented Jan 11, 2016

Now it says: Cannot GET /. Maybe it is because the generated file is virtual? As @Sigura mentioned above some middleware for html-webpack-plugin may solve this issue.

@Sigura

This comment has been minimized.

Copy link

Sigura commented Jan 11, 2016

Hello @jantimon,

I tried this way before. Unfortunately does not work (for me).

req.url = 'index.html';
// and
req.url = '/';

and etc. result is: Cannot GET /bla-bla-bla

@jantimon

This comment has been minimized.

Copy link
Owner

jantimon commented Jan 11, 2016

var express = require('express');
var app = express();
var webpack = require('webpack');
var path = require('path');

var compiler = webpack(require('./webpack.config.js'));

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: '/'
}));

app.use('*', function (req, res, next) {
  var filename = path.join(compiler.outputPath,'index.html');
  compiler.outputFileSystem.readFile(filename, function(err, result){
    if (err) {
      return next(err);
    }
    res.set('content-type','text/html');
    res.send(result);
    res.end();
  });
});

app.listen(3000);
@Sigura

This comment has been minimized.

Copy link

Sigura commented Jan 11, 2016

@jantimon Sorry, it's work.

Thank-you!

ps: I missed compiler.outputFileSystem before

@mbektimirov

This comment has been minimized.

Copy link

mbektimirov commented Jan 11, 2016

It works! Thank you @jantimon. This solution should go to README.

@jantimon

This comment has been minimized.

Copy link
Owner

jantimon commented Jan 11, 2016

Well actually it is just webpack-dev-server.. This is just a plugin ;)
Better post this on stackoverflow and google will find it - if someone has the use case.

@Duan112358

This comment has been minimized.

Copy link

Duan112358 commented May 5, 2016

this solution is awesome, thks @jantimon

@alwayrun

This comment has been minimized.

Copy link

alwayrun commented May 8, 2016

thks! @jantimon

1 similar comment
@geraldchen890806

This comment has been minimized.

Copy link

geraldchen890806 commented Jul 8, 2016

thks! @jantimon

@londonbarrett

This comment has been minimized.

Copy link

londonbarrett commented Oct 9, 2016

sweet! @jantimon

@jcto

This comment has been minimized.

Copy link

jcto commented Nov 11, 2016

谢谢!@jantimon

@dentuzhik

This comment has been minimized.

Copy link

dentuzhik commented Nov 17, 2016

This was so hard to find, thanks a lot @jantimon.

@PavelPolyakov

This comment has been minimized.

Copy link

PavelPolyakov commented Apr 9, 2017

@jantimon
thanks for the solution, I see it works for the people, however, in my case for some reason it tells that file doesn't exist:

    Error: Uncaught error: no such file or directory
    at MemoryFileSystem.readFileSync (/Users/PavelPolyakov/Sites/webpack-react-pure/node_modules/memory-fs/lib/MemoryFileSystem.js:107:10)
    at MemoryFileSystem.(anonymous function) [as readFile] (/Users/PavelPolyakov/Sites/webpack-react-pure/node_modules/memory-fs/lib/MemoryFileSystem.js:300:34)

however, I'm sure that the file is there, because it works for the urls which are not 404.

My OS is macOS, but I don't think it's a reason for something.

Any suggestion is appreciated.

Regards,

@ericlau-solid

This comment has been minimized.

Copy link

ericlau-solid commented May 19, 2017

Wow ... I searched for hours until I find this snippet. @jantimon THANK YOU! it is crazy how hard it is to find this. Saved my bacon! Probably hard to find because it is missing keywords like express, SPA, routing.

@dentuzhik

This comment has been minimized.

Copy link

dentuzhik commented May 22, 2017

Considering the fact how much upvotes this issue still gets, adding this to docs might be a good idea :)

@jameshulse

This comment has been minimized.

Copy link

jameshulse commented Jul 4, 2017

Because my express URL path (/) didn't match a filename known to webpack the webpack-dev-middleware was passing through the request even if it hadn't finished building my bundle. This led to 'file not found' issues. I was able to fix this by calling waitUntilValid on the middleware instance.

var express = require('express');
var app = express();
var webpack = require('webpack');
var path = require('path');

var compiler = webpack(require('./webpack.config.js'));

var devMiddleware = require('webpack-dev-middleware');

app.use(devMiddleware(compiler, {
  noInfo: true,
  publicPath: '/'
}));

app.use('*', function (req, res, next) {
  var filename = path.join(compiler.outputPath,'index.html');
  devMiddleware.waitUntilValid(() => {
    compiler.outputFileSystem.readFile(filename, function(err, result){
      if (err) {
        return next(err);
      }
      res.set('content-type','text/html');
      res.send(result);
      res.end();
    });
  });
});

app.listen(3000);
@developer239

This comment has been minimized.

Copy link

developer239 commented Sep 18, 2017

@jantimon I love you thank you so much.

@walandemar

This comment has been minimized.

Copy link

walandemar commented Nov 16, 2017

Use html-webpack-harddisk-plugin after HtmlWebpackPlugin. It keeps index.html at hard disk, so that you can simply doing this:

plugins: [
  new HtmlWebpackPlugin({
    alwaysWriteToDisk: true
  }),
  new HtmlWebpackHarddiskPlugin()
]

...achieve this:

app.get('*', (req, res) => {
  // for example
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
})
@esausilva

This comment has been minimized.

Copy link

esausilva commented Jan 20, 2018

@walandemar Thank you. That works great.

@fengmiaosen

This comment has been minimized.

Copy link

fengmiaosen commented Jan 25, 2018

@walandemar Thank you,it works for me!!!

@ramintagizade

This comment has been minimized.

Copy link

ramintagizade commented Apr 1, 2018

Error: no such file or directory
at MemoryFileSystem.readFileSync (/Users/ramintaghizada/ReactJS/VotingApp/node_modules/memory-fs/lib/MemoryFileSystem.js:114:10)
at app.get (/Users/ramintaghizada/ReactJS/VotingApp/server.js:51:29)
at Layer.handle [as handle_request] (/Users/ramintaghizada/ReactJS/VotingApp/node_modules/express/lib/router/layer.js:95:5)
at next (/Users/ramintaghizada/ReactJS/VotingApp/node_modules/express/lib/router/route.js:137:13)
at Route.dispatch (/Users/ramintaghizada/ReactJS/VotingApp/node_modules/express/lib/router/route.js:112:3)
at Layer.handle [as handle_request] (/Users/ramintaghizada/ReactJS/VotingApp/node_modules/express/lib/router/layer.js:95:5)
at /Users/ramintaghizada/ReactJS/VotingApp/node_modules/express/lib/router/index.js:281:22
at param (/Users/ramintaghizada/ReactJS/VotingApp/node_modules/express/lib/router/index.js:354:14)
at param (/Users/ramintaghizada/ReactJS/VotingApp/node_modules/express/lib/router/index.js:365:14)
at Function.process_params (/Users/ramintaghizada/ReactJS/VotingApp/node_modules/express/lib/router/index.js:410:3)

@lock

This comment has been minimized.

Copy link

lock bot commented May 31, 2018

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@lock lock bot locked as resolved and limited conversation to collaborators May 31, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.