do not use i-frame for page content

[ThomasDeutsch]

Many pages from my development-server will have a X-FRAME-OPTIONS: SAMEORIGIN response header, so it is impossible to use the development-server, since the page are displayed in an i-frame.

Would it be possible to not use an i-frame?
Could it be done like livereload, where a script is added to the dom?

[ThomasDeutsch]

Server.prototype.serveContent = function(req, res, next) {
        var _path = req.path;
        if(_path === "/") _path = "";
        var target = this.contentBase + _path;
        if(/^(https?:)?\/\//.test(target)) {
                res.writeHead(302, {
                        'Location': target + (req._parsedUrl.search || "")
                });
                res.end();
        } else {

I would like to build a new live.js without the i-frame. For that, i need to rewrite the servers "serveContent" response to do this:

1. render the target
2. append a simple <div id="webpackuicontainer"></div> to the body of the rendered target
3. append the live.bundle.js to the body of the rendered target

Do you think that this would be a good solution?

[sokra]

This may work if contentBase is a directory or a file, but it will not work in the case where contentBase is a url. You cannot inject something into a redirect resp. the redirected page.

I would work with a browser extension or with a content script.

We could insert the logic into the bundle, like this:

{
  entry: ["webpack-dev-server?http://localhost:8080", "yourEntry"]
}

[ThomasDeutsch]

Why would the entry-array be a good place to insert that logic?

a livereload option for the webpack-dev-server could be placed into the config-file.
I think that a second script file in the content-html could also be fine.

[sokra]

A inlined mode is now supported. Means you can run the webpack-dev-server without GUI/iframe.

Two options to do this: (examples)

add it to the entry point

You need to pass the url to the dev-server (for socket.io connection).

{
  entry: ["webpack-dev-server/client?http://localhost:8080", "yourEntry"]
}

as script tag

add an additional script tag to the html page:

<script src="http://localhost:8080/webpack-dev-server.js"></script>

[NinjaSciurus]

I feel pretty stupid but I don't understand the inline mode configuration. I added

main: ["../client?http://localhost:8009", "./source/main"]

to the server.config.js and

<script src="https://localhost:8009/webpack-dev-server.js" type="text/javascript" charset="utf-8"></script>

to the aspx page.

When navigating to https://localhost:8009/webpack-dev-server/, I get

"Module not found: Error: Cannot resolve file or directory ../client in [PATH TO DEV FILES]"

What is this "client" path segment and how do I set it up correctly?

[sokra]

I need to do only one of these:

• webpack-dev-server/client?DEVSERVERURL as entry point (inline mode)
• <script> tag to DEVSERVERURL/webpack-dev-server.js (inline mode)
• Open DEVSERVERURL/webpack-dev-server/PATH (normal mode)

In inline mode you just open SERVERURL/PATH

Examples for
DEVSERVERURL = http://localhost:8009 (The url of the dev server)
PATH = index.aspx
SERVERURL = http://localhost:8080 (The url of your server)

[ThomasDeutsch]

The webpack-dev-server.js will try to connect to content-base instead of dev-server:

Scenario:
scripts are served from this url: http://localhost:8009
content-base is hosted on http://myserver.com/index.html

When i insert the script to my index.html

<script src="https://localhost:8009/webpack-dev-server.js" type="text/javascript" charset="utf-8"></script>

it will try to establish the socket.io connect to http://myserver.com (my content-base) instead of http://localhost:8009 (dev-server)

[NinjaSciurus]

It works with the following change in %APPDATA%\Roaming\npm\node_modules\webpack-dev-server\client\index.js:

io = io.connect(scriptElements[scriptElements.length-1].getAttribute("src").replace(/\/[^\/]+$/, ""));
//io = io.connect(typeof __resourceQuery === "string" ?
//  __resourceQuery : 
//  scriptElements[scriptElements.length-1].getAttribute("src").replace(/\/[^\/]+$/, "")
//);

This is because __resourceQuery is empty, so the resulting url to connect to is server-relative.

Unfortunately, running

npm run-script prepublish

with this configuration results in these errors:

ERROR in ./client/live.js
Module not found: Error: Cannot resolve module style in C:\Users\_______\AppData\Roaming\npm\node_modules\webpack-dev-server\client
 @ ./client/live.js 3:0-22

ERROR in ./client/live.js
Module not found: Error: Cannot resolve module jade in C:\Users\_______\AppData\Roaming\npm\node_modules\webpack-dev-server\client
 @ ./client/live.js 6:27-49

which effectively breaks the not-inline version of the webpack-dev-server. So I guess I am still doing something terribly wrong... 😟

[NinjaSciurus]

PS: npm install on the webpack-dev-server installation folder solved the prepublish script problem! All is good now. 😌

[jhnns]

Ahh nice! 👍

I prefer to run the app without an iframe which makes debugging and working in the browser feel more natural.

[mattdesl]

This is good since iFrame tends to break certain visual apps (e.g. window.innerWidth reports 0). 👍

Is there a way to disable iFrame with the 'magically generated' HTML page at /bundle? Maybe as a command line option? I don't want to set up a new HTML page and <script> tags for each module that I'm developing.

[sokra]

@mattdesl You can use the entry point mode:

{
  entry: ["webpack-dev-server/client?http://localhost:8080", "./your/entry"]
}

and use this url: http://localhost:8080/bundle

[sokra]

We could add a CLI parameter that adds this entry point automatically. That would be cool...