Javascript code cannot be run

Using Django Mystery Errors
1

Hello
It is my first django project so i am sorry for any glaring issues.

I have a basic app which has a templates folder which contains an html file and a javascript file. When I cd to the project and paste python manage.py runserver and open it in my browser (Firefox), i get this warning and javascript does not print anything in the console.

Error:

Loading failed for the with source “http://127.0.0.1:8000/index.js”.

Here is the file structure (i didnt add the default files):

project
    app
        templates
            index.html
            index.js
    urls.py
    views.py

urls.py

from django.urls import path
from . import views

urlpatterns = [
    path("", views.home, name="home"),
    path('index views.index')
]

views.py

from django.shortcuts import render, HttpResponse

# Create your views here.
def home(request):
    return render(request, 'index.html',)

index.html


<!DOCTYPE html>
<html>

<script src='../index.js'></script>
<body>

<button onclick="myFunction()">Click me!</button>

</body>
</html>

index.js

console.log('hello world');
function myFunction() {
    alert("Hello from a static file!");
  }
2

Your JavaScript files aren’t templates, they belong in your staticfiles directory. Also, the url would (usually) be constructed with the static tag.

See the work you would have done at Writing your first Django app, part 6 | Django documentation | Django in the official Django tutorial, along with the docs referenced on that page.

If you haven’t worked your way through either the Official Django Tutorial or the Django Girls Tutorial, that really should be your starting point.

3

Thanks for that!
I have been following a youtube tutorial and was stuck as i couldn’t figure out why my files would not load. I have used the static tag but i omitted it here as i thought it wasnt the culprit. I added it back to get

<script src="{% static 'myapp/index.js' %}" ></script>

instead of

<script src="{% static '/index.js' %}" ></script>

…which solved my issue!