So I have created a project which has its frontend in angularjs and backend in Django rest framework. now I have created a django login page which should authorize all other angular pages.
so how can we extend the base.html in angularjs pages with static files.
my tree structure is as follows:
project
|
|
application
templates
manage.py
project
|
settings.py
urls.py
public
|
static
html files
Hope to get answer to this.
thanks
I suggest the following.
In you templates folder add a file base.html. In this file import all css and js files. The base.html will have the ng-app, ng-view (or whatever your are using). For example:
<html ng-app="raceApp">
.
.
<div>
<nav-bar></nav-bar>
<section ng-view autoscroll="true">
</section>
</div>
</html>
Then in the static files you could have a folder static/js will all the angular files. Inside this folder (js) you should follow a structure based on the way you are writing angular. For example i am using components (totally recommend) so each folder represents a different component.
/static/js/user-login/
/static/js/user-login/user-login.component.js
/static/js/user-login/user-login.module.js
/static/js/user-login/user-login.services.js
/static/js/user-login/user-login.template.html
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.
I'm just starting out with Flask, and I was wondering what the best method for
dealing with how flask deals with static files when trying to use a premade CSS template.
Basically, I have downloaded a CSS template that I liked off the internet, but when if I simply drag the files into my flask application folder the CSS, JS, and image files do not work since they are not located in the static folder.
But if I move all the static files into the static folder, then I have to go through all the code and change the link urls, which is very time consuming.
The CSS Template I am using has an index.html that uses links like
<link rel = "stylesheet" href = "css/style.css" >
I have set both the static_folder = ""
and the static_url_path = "" in my flask app and I have moved the css, js, and image folders from the downloaded template into the base folder for the application, but the links are still not working.
Is there a better way to deal with using premade CSS templates with flask? Can I override the need to put css and js and image files in the static folder somehow? Thanks for your help!
(Sorry for opening this old post, but I'm on a badge hunt :])
There are several possible solutions, but the one I would recommend is to move the file style.css to folder <server_root>/static/css/.
Then create the flask app like app = Flask(__name__, static_url_path=''), what means that it still serves static files from the static/ folder, but on path / (so <server_root>/static/css/style.css is served on /css/style.css).
With this setup, your links href="/css/style.css" will work.
However, it's strongly recommended to use flask.url_for('endpoint', param='value') instead of /endpoint/url/value both in code and templates (surrounded with {{ ... }}) for all URLs - static files ('static', filename='css/style.css') and your own endpoints. So if your endpoint looks like this,
#app.route('/some/path/<variable>')
def some_endpoint(variable):
# do something and return response...
... you can use url_for('some_endpoint, variable='something') no matter what the actual URL (/some/path/something/ in this case) is. (Tested python 3.6.7; flask 1.0.2)
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.
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
I need to make an app where i have the ready made standalone html templates avaialbe in my
app/ready_templates/template1
Now i have made an view where i display the name , thumbnail of that template to show to users
But there is demo link there which i want tthem to see the whole template.
basically if they click on demo then i want to redirect them to
template1/index.html so they can see all the templates images , js etc without linking anything to django views
So your requirement seems pretty straightforward. You can do this using the static files feature in Django. Basically whenever you have a bunch of static content like html, css, js images you put it in a folder in your app called static. For example the admin app that ships with Django has all it's static content in django/contrib/admin/static. Then you could place something simple like the below into your django template to link to the static content. You of course don't have to hard code each name like template1 you could have it dynamically generated in your django template.
{% load static from staticfiles %}
<a href="{% static "template1/index.html" %}" />template1</a>