How to get liveserver to render django templates?

user_13723045 0
Viewed 5397

I've been messing around with a tutorial site, and I found that my VS Code LiveServer plugin doesn't work properly when I try to open Django templates. The CSS I applied is missing (although everything renders correctly in my local development sever), and the template language code is actually printed to the screen rather than executed (see image below). My liveserver plugin appears to be working with html files outside of Django.

(1) Right now I'm right clicking and selecting "Open with Liveserver." Is this wrong for Django? The liveserver docs recommend trying to "visit the Actual Server Address: http://localhost/[workspace], not the VS Code extension's Live Server Address: http://127.0.0.1:5500/". I tried including the file path in place of [workspace], but no luck. What do I do here?

(2) I saw in another thread where someone recommended their own solution, here. I'm not sure where I'm supposed to run the './manage.py livereload' command, but it's not working in command prompt. What is the difference between './manage.py' and 'py manage.py'? And will this solution be any better than the VS Code plugin?

enter image description here

visual-studio-code server django-templates css django
4 Answers

I have had the same problem as you and managed to get it working with the link you included in point (2) of your post. You may have gotten sorted by now, but I thought I'd post it here in case.

First I went to my console and ran:

pip install livereload

which was installed successfully. Then I added 'livereload' to my installed apps in my settings.py file. E.g...

INSTALLED_APPS = [
        ...
    'livereload',
        ...
    ]

Then I went to the directory containing my manage.py file on the terminal and ran

./manage.py livereload

and this provided me with a link to a live update server. Previously I had been running a server with "python manage.py runserver", so this is to replace that command. Now when I save any changes I make in my IDE, they update live on the browser. Sorry that I haven't included any screenshot images for clarity, I wasn't able to for some reason.

user_141715730

I am working through Scrimba/VSchool tutorial, so I am wondering if you may have run into this problem through a similar path.
I believe Live Server and Django are incompatible - but if you find a fix, let me know.

Live server is acting as your web server (port 5500 by default), serving up files as your make changes. Django is also acting as a web server (port 8000 by default), interpreting Python code, and rendering the Django Template Language.

Unfortunately, as far as I can tell, live server cannot execute all this Python code, so all the Django Template Language will not render. This includes the {% load static %} method that Django uses to read the CSS & JS links in the html.

user_139701490

For those of you who tried the top answer, but still got stuck: you have to install dj-static, or whitenoise (as recommended by the dj-static github page) to serve the static files. I noticed that it's really slow though. Maybe it's just me, but I found it to be quite unworkable. I ended up writing an autohotkey script to activate my browser and then refresh. At least for me, that´s a lot quicker.

user_147116430

in your command line you have to run the server by the following command:

python manage.py runserver

but be sure that you are in the directory that has manage.py file. you don't need to type the port. because you will get the default port which is:8000

user_125600460
Related