I compiled my C file to wasm using:
emcc main.c -s USE_SDL=2 -O3 -s WASM=1 -o main.js
I'm only using WASM to manipulate a canvas. There is no JS code other than the "glue" js code.
I now have a directory (outside of Django, just somewhere in my Documents folder) with these files:
- home.hml
- main.c
- main.js
- main.wasm
Which I can serve using whatever webserver eg
python3 -m http.server 8000 --bind 127.0.0.1
And view the animation in the browser. And it works. No problems so far.
I want to serve home.html from Django now. My URLs.py has:
path('', views.home, name='home'),
and views.py has:
def home(request):
context = {}
return render(request, 'app/home.html', context)
I have copied home.html to app/templates/app
I then copied main.js to app/static/app
Then I modified home.html to replace:
<script src="main.js"></script>
With
<script src="{% static 'app/main.js' %}" type="text/javascript"></script>
I don't know what to do with main.wasm. Should this also go into the static folder or into the project root? Do I need to add an explicit import somewhere for this? How can I get my home.html to behave the same as it was with a simplehttpserver, but when being served from Django?
Please note that all DOM elements in home.html are displaying correctly as it stands other than the canvas. So I'm relatively certain that everything is set up correctly, except for the fact that main.wasm is not accessible.
Check the HTTP requests made by the browser in the Network tab of the developer tools of the browser. Maybe the path in the URL is wrong or Django returns an incorrect Content-Type.
Related
I am trying to render a couple of files on Bottle web server. The first HTML file has a button which links to another file. So I need both of these to run on the server.
My (updated)Project structure is something like this
-app.py
-static
-css
bootstrap.css
bootstrap.min.css
-fonts
-js
jquery.js
etc etc
-index.html
-visualization.html
My index.html file has to be rendered first. From which the user has to option to click on a button which takes him to visualization.html.
My pages are not rendering. What could be the reason for this?
The routing snippet from app.py is as show below:
from bottle import route, run, template, static_file, response, request
#route('/noob')
def map():
return static_file('index.html',root = './static')
run(host='0.0.0.0', port='8030')
This is how I access those files in my index.html:
<script src="./static/js/jquery.js"></script>
<link href="./static/css/grayscale.css" rel="stylesheet">
I'm relatively new to Python and Bottle. Is this right? I get a 404 error
.
Also, how to I place two files on the bottle server. As explained above, a button in index.html links to visualization.html. So I'm guessing this should also be running on Bottle server. Do I run it in the same file? Different port?
Thanks in advance.
You need to put index.html in static folder.
-app.py
-static
various css and img files being used in my two html files
index.html
visualization.html
A better way for accessing static files and templates would be to rename index.html to index.tpl like this:
-app.py
-static
-js
bootstrap.min.js (example)
-css
-fonts
index.tpl
visualization.tpl
profile.tpl
And:
from bottle import route, run, template, static_file, response, request
#route('/noob')
def map():
return template('index.tpl')
#route('/profile')
def profile():
return template('profile.tpl')
#route('/static/<filepath:path>')
def server_static(filepath):
return static_file(filepath, root='./static/')
run(host='0.0.0.0', port='8030')
And in your tpl files use path like this:
<script src="/static/js/bootstrap.min.js"></script>
Hope this answers your question.
This is my folder structure
Music
-Music
-Feature
-static
-feature
core.css
-css
other css files
-js
-img
-templates
404.html
500.html
index.html
-feature
about.html
detail.html
template.html
manage.py
views.py
from django.shortcuts import render
def error404(request):
return render(request,'404.html')
urls.py
urlpatterns = [
url(r'^featured/(?P<pk>[0-9]+)/$', views.DetailView.as_view(), name='detail'),
url(r'^about/$', views.about, name='about'),
url(r'^FAQ/$', views.faq, name='faq'),
]
handler404 = 'mysite.views.error404'
The custom 404.html file gets rendered but with no css.And normally the css works fine on other pages but when I set debug=falseto check the custom 404 error page in settings.py the css for the entire project disappears. Something to do with folder structure or some other problem?
edit: core.css is the main css file and the part with other css files contains css for plugins
It's about serving static files. When you use DEBUG = True then django takes care about them otherwise your server should do it. Django in debug mode uses this view. The warning from there:
This view will only work if DEBUG is True.
That’s because this view is grossly inefficient and probably insecure.
This is only intended for local development, and should never be used
in production.
You can run your server with --insecure option just to test 404 error or you can explicilty create url for that page to check its styling:
Use the --insecure option to force serving of static files with the
staticfiles app even if the DEBUG setting is False. By using this you
acknowledge the fact that it’s grossly inefficient and probably
insecure. This is only intended for local development, should never be
used in production and is only available if the staticfiles app is in
your project’s INSTALLED_APPS setting. runserver --insecure doesn’t
work with CachedStaticFilesStorage.
Your handler404 and view are okay. But you don't need them. Just a custom 404 template is enough. See: https://docs.djangoproject.com/en/1.8/topics/http/views/#the-http404-exception
In order to use the Http404 exception to its fullest, you should
create a template that is displayed when a 404 error is raised. This
template should be called 404.html and located in the top level of
your template tree.
The template is in the right location. I think the problem is serving your static files. Open developer tools in your browser to see what resources fail to load (console, network or sources tab). Inspect the paths. Is there an external style sheet link in the head section of the 404 source? (elements tab or view source code).
https://docs.djangoproject.com/en/1.8/howto/static-files/
I'm trying to do the following:
Having a file structure like the following:
/app
/static
/start
/css
/js
- index.html
/templates
Id like to know how I can serve this index.html and make this load its CSS and JS without using url_for('static', filename='') or other kind of serving trough Flask.
Basically, I want to put http://local.com/start and trough Flask serve index.html which will load its own css and js like <link href="css/style.css" rel="stylesheet">
I tried send_from_directory('/static/start', "index.html") and app.send_static_file('index.html') but they don't work.
I also tried current_app.send_static_file('start/index.html') but this only serves the html. It doesn't make the index.html load its own CSS and JS.
I got the information from these links
How to serve static files in Flask
python flask - serving static files
Flask: How to serve static html?
They don't do what I want (or maybe I'm doing it wrong).
Thanks in advance, if there is more info needed just tell me.
You can load a regular html file as a jinja template. Just call render without any parameters.
The problem looks similiar to the problem here:
Pythonanywhere, how to use static files? url? ,but I cannot comment there.
I've started learning Django and when everything worked on localhost that on PythonAnywhere it does not.
At projectname/settings.py I've set:
STATIC_ROOT = "/home/*username*/*projectname*/Static/"
STATIC_URL = "/s/"
and even URL's from static folders in apps.
After trying to run
python3 manage.py collectstatic
every file *.js, *.css and images were coppied to the projectname/Static folder.
But... none of them were recognized after launch of the app.
I've set
{% load static %}
used tags
{% static "assets/css/theme.css" %}
At the source code I can see the proper link to css file:
<script src="/s/assets/js/seen.min.js"></script>
And everything would be fine, but the "/s/" isn't recognized by django and it tries to find the view in urls.py.
After opening the link to: username.pythonanywhere.com/s/assets/js/seen.min.js I've got standard, debug 404 page with the path of urls.py tries.
How to solve this annoying problem?
You need to add a static file mapping on the web app. Look for the "Static files" heading on the web app tab.
From what I can tell of your setup, you'd need to put "/s/" for the URL and "/home/*username*/*projectname*/Static/" for the directory.
Let's suppose I have an HTML page (base.html) that must include one JavaScript file.
<script type="text/javascript" src="/js/main.js"></script>
It is my understanding that a Django project is not hosted in a public folder. Rather, requests are routed to views.py which generates a response.
Let's suppose my project directory looks like this
- project
- project_app
- views, models, ecc…
- templates
- base.html
- css
- main.css
- js
- main.js
How come base.html can reference main.css and main.js? If I access myserver.com/js/main.js this should not return anything (as the template folder is not public). Yet the browser need to access those file and I need to include them.
Do I need to write a specific URL rule to redirect requests to /js/main.js to the actual js file or what sort of magic can make a simple html include works?
The usual method is to keep your CSS, javascript, and similar files in a static folder and serve them to your html. General Django documentation can be found here.
In a nutshell, your directory will look like this:
- project
- project_app
- views, models, ecc…
- templates
- base.html
- static
- css
- main.css
- js
- main.js
Then, your base.html will reference the file using:
<script type="text/javascript" src="/static/js/main.js"></script>
The docs I referenced at the top show how to serve static files in production. Lots of people use a content delivery network (CDN) to serve their static files. Amazon's S3 service is an example of this. Then, you'll change the STATIC_URL setting in your settings.py to your S3 bucket (or similar network). You can then reference the STATIC_URL in your templates.
{% load static %}
...
<script type="text/javascript" src="{% static 'js/main.js' %}"></script>
...
You'll use commands like ./manage.py collectstatic to collect your static files and move them to your CDN at certain times. Basics of collectstatic can be found here.
You need to put all your static files in STATIC_ROOT folder by using command django-admin.py collectstatic and serve this folder. More details and explanation you can find here:
https://docs.djangoproject.com/en/dev/howto/static-files/#managing-static-files-css-images