[Solved]-Viewing Django and webpack built site on LAN

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