Turning MPA to SPA

Using Django Templates & Frontend
1

Hi, i have school project which i did as MultiPage application but later found out i have to turn into SinglePage application. Without ruining my code much i did something like this:

HttpResponse(render_to_string('index.html'))

instead of this:

render(request, 'index.html')

for returning from my views

and change my templates from this:

{% extends 'base.html' %}
{% block title %}Dashboard{% endblock %}
{% block app %}
  {% include "_nav.html" %}
{% endblock %}

to just include part that available in app class without macro

and inside my javascript code:

document.querySelectorAll('a[data-link]').forEach(link => {
    link.addEventListener('click', e => {
        e.preventDefault();
        const href = link.getAttribute('href');
        history.pushState({ path: href }, '', href);
        console.log("href: " + href);
        loadPage(href);
    });
});

function loadPage(path) {
    fetch(path)
    .then(response => response.text())
    .then(partHtml => {
            document.querySelector('.app').innerHTML = partHtml;
        })
        .catch(error => console.error('Error fetching additional part:', error));
}

This code works when i click button and swap the part in app class but my problem is when i enter path manually in the browser it just fetch part of the html for other paths, not fetching base html like extends and block macro to swap the part inside block.

So my questions is this approach correct or what is the other aproaches i should consider to turn into spa. I have to use plain Javascript and no third party framework or dependency is allowed. Thanks in advance.

1 Like
2

This isn’t a “problem”, it’s characteristic of an SPA.

You have a choice. A view either returns a full page or a partial page. If it returns a partial page, then it’s not generally suitable to be accessed directly from the browser as a URL.

3

How can i prevent to access to partial page and provide that page at the same time? Because i return that partial page from my views and there are associated url path for that views.

4

You can’t. If a user has access to a URL, and you are accessing that URL via JavaScript, there is no way to prevent a user from entering that URL in their browser. (Note: This is true regardless of the framework being used. Anyone trying to tell you otherwise is mistaken. It can be made more “difficult”, but cannot be prevented.)

5

So my only option is to include every html code from base to partials like extends macro. Ä°f i do that is it considered as Spa or not?

6

Not quite. What I’m actually saying is that it doesn’t make any sense to try and go to a page within your SPA directly from the browser.

SPA = Single Page application.

Referencing different URLs from the browser doesn’t make any sense. Now, having said that, when there are situations when it’s desirable to share the same information in and out of an SPA, then the appropriate solution is to create separate URLs. One that generates the html for the SPA, and another that creates a full-page representation.

1 Like
7

Hey Ken, We are doing project for school and temasictfic my teammate. We’re wondering about this, as you can see in the photo, it says that the back and forward buttons of web browsers should be available, is it possible that this is a SPA approach?

Ekran görüntüsü 2024-02-03 000214
Ekran görüntüsü 2024-02-03 000214722×158 9.62 KB

8

I know that there are ways to handle it, but I don’t know what they are. I would guess that it’s a JavaScript event you could use.

1 Like