CODEWITHSUNDEEP
javascripthtmldjango
Gerard
Gerard

Reputation: 11

Host a "non-django app" (a folder with index.html, some .js and .css) in a django website

Short brief:

I have some “non-django html apps” (a folder with a index.html, some .js files and a .css file) and I want to execute them in a django website without touching their code. How can I do it?

How can I make work inside django a non-django app (a folder with an index.html, some .js and .css) withou touching the code of the app?

Details:

I'm building a website with Django where i want to host some Construct3 games (it allows you to create HTML5 through a GUI).

When you export a Construct3 game to HTML it creates the following structure:

C3App
|_ appmanifest.json
|_ c2runtime.js
|_ data.js
|_ index.html
|_ offline.js
|_ offlineClient.js
|_ register-sw.js
|_ start.js
|_ style.css
|_ sw.js
|_ icons
|   |_ icon1.png
|_ images
    |_ image1.png

That is what I have tried:

1.- In my Django website I dropped the C3App in my template folder and created a view and called index.html. As a result i got a blank page with not found errors (404) for: appmanifest.json, icon1.png, style.css, c2runtime.js, start.js and register-sw.js. That is the external files called in index.html.

2.- As that dindn't work, I moved C3App to my static folder and I created a template with the same content of index.html but changing the references.

So I changed this lines:

<link rel="manifest" href="appmanifest.json" />
<link rel="icon" type="image/png" href="icons/icon-512.png" />
<link rel="stylesheet" href="style.css"/>
<script src="c2runtime.js"></script>
<script src="start.js"></script>
<script src="register-sw.js"></script>

To this others:

{% load static %}
<link rel="manifest" href="{% static 'games/C3App/appmanifest.json' %}" />
<link rel="icon" type="image/png" href="{% static 'games/C3App/icons/icon-512.png' %}" />
<link rel="stylesheet" href="{% static 'games/C3App/style.css' %}"/>
<script src="{% static 'games/C3App/c2runtime.js' %}"></script>
<script src="{% static 'games/C3App/start.js' %}"></script>
<script src="{% static 'games/C3App/register-sw.js' %}"></script>

After the changes I got 2 not found errors for: data.js and offlineClient.js. Two files called several times in c2runtime.js.

So c2runtime.js needs to be touched too. And this starts to become too dirty, I'm modifying more than one file, in more than one place. So every time I will want to make an update for a game I will need to modify all that files again. Sounds like stupid work and an easy way to introduce bugs.

The perfect scenario would be drag the folder (exported game) and work. Is there a way to do that posible? Any idea?

How can I make work inside django a non-django app (a folder with an index.html, some .js and .css) withou touching the code of the app?

Upvotes: 0

Views: 124

Answers (1)

e4c5
e4c5

Reputation: 53774

I have some “non-django html apps” (a folder with a index.html, some .js files and a .css file) and I want to execute them in a django website without touching their code. How can I do it?

There a lot's of ways in which you can, but you shouldn't

How can I make work inside django a non-django app (a folder with an index.html, some .js and .css) withou touching the code of the app?

As above, if this is a static non django app (or even a dynamic one). Don't mix it with django. It should be the responsibility of the webserver (Nginx, Apache) etc to route the django app related urls to your WSGI server. And to route the non django app urls to whatever that hosts it.

ps: You should not run the dev server in production as it's unsafe. The nature of your question gives the impression that you maybe doing so.

Upvotes: 2

Related Questions