Page not found (404) Request Method: GET Request URL: http://18.222.182.68/index.html Using the URLconf defined

My main page loads fine, but then when i click a button that's supposed to take me to index.html i get the error posted below. When running this locally it works fine, but when depolying onto AWS (EC2, using nginx and gunicorn) its not working and giving me the error below. im new to using django and AWS, any feedback is appreciated.

error:

Request Method:    GET
Request URL:    http://18.222.182.68/index.html
Using the URLconf defined in LectureLingo.urls, Django tried these URL patterns, in this order:

[name='index']
admin/
The current path, index.html, didn’t match any of these.

You’re seeing this error because you have DEBUG = True in your Django settings file. Change that to False, and Django will display a standard 404 page.

views.py code

def index_view(request):
    return render(request, 'index.html')

urls.py code

from django.urls import path
from . import views

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

Main urls.py code

from django.conf.urls import include
from django.contrib import admin
from django.urls import path

urlpatterns = [
    path('', include('transcript.urls')),
    path('admin/', admin.site.urls),
]

index.html code

{% load static %}<!DOCTYPE html>
<html>
    <head>
        <title>Chat</title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <link rel="stylesheet" href="{% static 'indexstyles.css' %}">
    </head>
    <body>
        <p id="status">Connection status will go here</p>
        <div class="custom-tooltip" style="display:none;"></div>
        <p id="transcript"></p>
        <script src="{% static 'IndexJS.js' %}"></script>
    </body>
</html>

Main html:

{% load static %}<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'homestyles.css' %}">
    <title>Home Page</title>
</head>
<body>
    <div class="text">LectureLingo</div>
    <div class="container">
        <div class="dropdown-container">
            <div class="dropdown-label">
                <div class="label">Translate from:</div>
                <select class="dropdown" id="dropdown1" required>
                            <option value="" disabled selected hidden>Select...</option>
                            <option value="cs">Czech</option>
                </select>
            </div>
        <div class="dropdown-label">
                <div class="label">Translate To:</div>
                <select class="dropdown" id="dropdown2" required>
                        <option value="" disabled selected hidden>Select...</option>
                        <option value="af">Afrikaans</option>
                    </select>
        </div>
    </div>
        <button id="sendButton" onclick="checkDropdowns()">Start</button>
</div>
<script src="{% static 'homeJS.js' %}"></script>
</body>
</html>

Main Javascript (only button):

document.querySelector('#sendButton').onclick = function() {
        // Check if both dropdowns have selections
        var dropdownFrom = document.getElementById('dropdown1').value;
        var dropdownTo = document.getElementById('dropdown2').value;

        if (dropdownFrom !== "" && dropdownTo !== "") {
            // Send data through WebSocket
            websocket.send(JSON.stringify({
                'dropdown1': dropdownFrom,
                'dropdown2': dropdownTo
            }));
            localStorage.setItem('detectedLanguage', dropdownTo);
            window.location.href = 'index.html';
        } else {
            alert('Please select options from both dropdowns.');
        }
    };

Back to Top