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
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.
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;
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;
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 :-) ):
Serve the bundle from the same port (add them to your STATIC path)
Replace every localhost reference in your html URLs (it may require to change your sites - see sites framework)
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
Related
I have a site build in site123 (site123 is a WYSIWYG and it dose not support code export). I use it as a nice designed landing page and product's catalog. so I have:
https://app.site123.com/?w=my_site this site has no back-end (not supported by site123). and I have another site build in django for payments and other stuff like this I host it on pythonanywhere, So I also have http://my_website_with_backed.pythonanywhere.com/.
Now, I buy a domain from GoDaddy and I would like to know if there is a way to connect the 2 websites under the same url??. like:
site123 website: www.catalog.my_own_url.com
django website: www.payment.my_own_url.com
Thank you
You can do a redirect from the subdomains to your page but in this case you will have the 3rd party URL displayed and not your subdomain.
You can probably use a simple HTML structure with iFrames to include your page. Like connecting your subdomains with a server and hosting there a HTML page which loads your python or WYSIWYG page.
If site123 is a static landing page without many changes or dynamic elements, I would think about scraping it with a script and transfer it to a server which also supports python (e.g. Amazon AWS). In this case you can get rid of pythonanymwhere and use your subdomains.
Then you can either use site123 (and scrape it every night for example) or use another WYSIWYG editor to build a page and deploy it to your server.
This post has to do with deploying AirBnBs knowledge repo app.
We are hosting our knowledge-repo on a sub-route of our server - for example https://aws.our-server-uri.com/knowledge-repo and I'm running into issues with loading static content and redirects.
In summary, I have no way of making the knowledge_repo Flask app aware that the app is running on a sub-route.
The issues
The first issue I ran into was making gunicorn aware of the context route in order to successfully locate the static files, which are now at /knowledge-repo/static/... and not relative to the root url. I solved this by setting the SCRIPT_NAME environment variable to /knowledge-repo before running knowledge_repo --repo . deploy. I'm including this for reference of what I've tried and for potential recommendations of a better solution.
The second issue, which is unresolved, is dynamically prepending our context route to the redirect urls generated by the web app. For example, the Home button in the top navigation bar redirects the user to the root url (https://aws.our-server-uri.com/ in our example case). I need the flask app to be aware of my context route and append /knowledge-repo/ to the page root for all links generated.
What I've tried:
I want to avoid forking and modifying this repo, so I've focussed on ways that do not involve editing the Flask app html, such as setting a <base> tag.
I've set the SCRIPT_NAME environment variable before deploying, but to no avail.
I've played around with setting some variables in a config.py which I passed using the --config config.py flag when running knowledge_repo deploy, but can't seem to find anything that does the trick.
I made some code changes to make it work:
Gave URL prefix to the static content.
Adding URL prefix to the blueprints in flask.
User URL_for with jinja templating to access the routes across HTML and JavaScript.
Here are the code changes.
I have a simple portfolio website with some html and css files in the root directory of the site hosted by Dreamhost. I also have a Django app that I'd like to place in a subdomain of this same website. However, Heroku will be serving the django app. I'm confused about how to organize and configure the whole portfolio/django website. How would the system work using two different hosts? Should I integrate the static portfolio site into the django project? Or do I keep them completely seperate and have them live on their own servers? Sorry if my question doesn't make sense. I'm very confused.
As far as the internet's concerned, a subdomain is a completely separate website. You can point a subdomain at whatever address you like; the internet doesn't care that it's a completely separate host. You can host your system however you like: both on Dreamhost, both on Heroku, or one on each. The latter setup is the most complex, so we'll walk through that one here.
Let's say your site is example.com and you want the portfolio site to be portfolio.example.com. If your app's running on Heroku, it'll have a name similar to yourportfolio.herokuapp.com. So we need to do two things: tell Heroku that your app is served from portfolio.example.com, and tell the DNS system to point from your subdomain from Heroku.
Pointing the subdomain to Heroku
Presuming your domain name is hosted on Dreamhost, go to the Domains section of the control panel, then Manage Domains. Under example.com is a link called DNS. You need to add a custom CNAME record; set name to portfolio, type to CNAME, and value to yourportfolio.herokuapp.com.. CNAMEs are a way of setting up aliases on the web; they mean "this site is also known as foo".
Telling Heroku to serve your app
Within your Heroku project, run heroku domains:add portfolio.example.com.
Heroku has documentation about subdomains here, which is a useful overview of the process as well as giving details of more complex setups.
TinyMCE is working just fine, all except for the popup windows. They come up blank, and after a little bit of Google searching, apparently it has something to do with cross domain errors with Firefox and Django. I tried using document.domain, but I have a feeling that it doesn't work when you're using the Django development server (http://127.0.0.1:8000).
There's nothing wrong with 127.0.0.1 as a domain. The problem is that it's different to your media domain localhost, although they both point to the same thing.
TinyMCE doesn't like different domains for the media, which is why having a relative MEDIA_URL would work. Using the URL http://localhost:8000/ to access your server would also work, because the domain would be the same as the MEDIA_URL, so too would setting your MEDIA_URL to 127.0.0.1:8000/m/ and accessing it with http://127.0.0.1:8000/.
Instead of using 127.0.0.1:8000, if I use localhost:8000, everything seems to work perfectly. I'm not sure why. Maybe it's because localhost:8000 is a domain and 127.0.0.1:800 is not.
I am trying to mock-up an API and am using separate apps within Django to represent different web services. I would like App A to take in a link that corresponds to App B and parse the json response.
Is there a way to dynamically construct the url to App B so that I can test the code in development and not change to much before going into production? The problem is that I can't use localhost as part of a link.
I am currently using urllib, but eventually I would like to do something less hacky and better fitting with the web services REST paradigm.
You could do something like
if settings.DEBUG:
other = "localhost"
else:
other = "somehost"
and use other to build the external URL. Generally you code in DEBUG mode and deploy in non-DEBUG mode. settings.DEBUG is a 'standard' Django thing.
By "separate apps within Django" do you mean separate applications with a common settings? That is to say, two applications within the same Django site (or project)?
If so, the {% url %} tag will generate a proper absolute URL to any of the apps listed in the settings file.
If there are separate Django servers with separate settings, you have the standard internet problem of URI design. Your URI's can be consistent with only the hostname changing.
- http://localhost/some/path - development
- http://123.45.67.78/some/path - someone's laptop who's running a server for testing
- http://qa.mysite.com/some/path - QA
- http://www.mysite.com/some/path - production
You never need to provide the host information, so all of your links are <A HREF="/some/path/">.
This, generally, works out the best. You have can someone's random laptop being a test server; you can get the IP address using ifconfig.