Viewing Django and webpack built site on LAN

Question

I am trying to view my locally served site on other devices such as my phone or another laptop. On my current laptop the site works fine, I see everything (frontend) and I get 200s when I visit the site.

However, when I try to access the site with my iphone and second laptop, I do not see any frontend but I do get 200s when I try to access the site. The terminal on my working machine also tells me that there are requests coming in.

I use Django as a backend and I bundle/build my Javascript and CSS with webpack and serve it with webpack-dev-server.

When I run webpack I see this message:

http://0.0.0.0:3000/
webpack result is served from http://localhost:3000/public/bundle/
content is served from ./public

When I load my webpage on my working machine, the developer tools shows this:

and everything is working.

I run django with this command.

$ ./manage.py runserver 0.0.0.0:8000

My ifconfig gives me:

inet 192.168.1.102

With my second laptop, I visit 192.168.1.102:8000 and I see nothing on my page. I get a 200 on my machine with the site working meaning the requests has gone through. On my second laptop I see this in the developer tools:

Notice it doesnt have /public/ in the src and href

On my second machine if I visit 192.168.1.102:3000 I see an Interface and I am able to click around to 192.168.1.102:3000/bundle/main.js and see my webpack built javascript.

On my second machine, I tried to change the src and href in my developer tools to 192.168.1.102:3000/bundle/main.js. However nothing would change and I still see a blank screen

Here is a gist of my webpack config:

https://gist.github.com/liondancer/7685b53dffa50d7d102d

Answer 1

I believe your page is empty because the whole "app" is generated by javascript (it seems so in your two screenshots at least, assuming that the content of <div id="app"></div> is not generated by a django view) but the javascript file is not accessible to clients that are different from your development machine.

It's hard to guess why this is happening without your settings.py, urls.py and the code/template of the view generating your home page but we have some candidates that may be generating this issues: CORS, localhost "poisoning" and eventually STATIC_URL misconfiguration.

1. CORS: A request is considered cross-domain if any of the scheme, hostname, or port do not match. You are requesting file both from localhost:8000 (or 192.168.1.102:8000) and from localhost:3000. So CORS issues will rise if you request files from an external device/laptop;
2. localhost is the same machine as 192.168.1.102 on your "working computer" but it isn't on your second laptop or any other device in your network;
3. Do you generate the URLs for css and js files using {% url %} or {% static %} tags? It seems no, but still they look dynamically generated (i.e. the missing "public/" part of their URL). I'm not aware of a way to get different paths using vanilla Django and the same settings, so you should provide the source code of your view, at least, to get a precise answer.

Solutions (or, at least, hints :-) ):

1. Serve the bundle from the same port (add them to your STATIC path)
2. Replace every localhost reference in your html URLs (it may require to change your sites - see sites framework)
3. Use standard template tags/filters and avoid hard-coded URLs in templates and code.

or install https://github.com/owais/django-webpack-loader/ (pip install django-webpack-loader) and follow their README or http://owaislone.org/blog/webpack-plus-reactjs-and-django/ guide