I already have a Django project with many apps and one of them is demo_app. I have some views and templates added to the demo app but I want to start using tailwind in the demo_app templates. I have seen that to add tailwind I need to create the theme app using tailwind but I want to add it to the already existing demo_app. How can I do that?
You can create the theme app just like the documentation says and add the tags to your existing app. I followed the process in this link. The js config in the app already looks for the tailwind tags in other apps. The tags I used are
{% load static tailwind_tags %} and {% tailwind_css %}. I added them to the html template in my existing app.
{% load static tailwind_tags %} at the top of the template and {% tailwind_css %} in the <head>
What I did that worked for me was install tailwind-cli in the static folder of my Django app, check out the tailwind-cli installation guide Tailwind Documentation. And then load the CSS in the HTML template. Below is how I referenced the tailwind CSS.
{% load static %}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{% static 'main.css' %}" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold">
Hello, world!
</h1>
</body>
</html>
Related
I'm pretty sure that could be possible by customising the django admin site for that specific feature.
I'm trying to add this functionality using admin.py but no better luck since a week.
In the picture you can see I put a circle where I will like to add and icon that will show a tooltip saying information about that specific field or column.
List View Image
So is there any way to do it easily without customising it from templates. Because the List view is so much complex and we do not want to complicate the things doing it hard way.
I tried to find it online and in the django official docs but every time its about customising it from templates, also I can html from admin.py but it doesn't invokes the tooltip as I wanted.
The short answer is: No, django can not give you a popover inside of your ListView. Django takes care about the backend. Its purpose is to serve the content of the tooltip from database to your html template. The displaying part is the job of the frontend. Therefore you have to design your tooltip yourself using html, css and javascript.
A useful framework is bootstrap as it takes care about the javascript and css. I will give you an example.
models.py
class MyModel(models.Model):
info_field = models.CharField(max_length=50)
views.py
def my_list_view(request):
my_objects = MyModel.objects.all()
return render(request, 'my_app/list-view.html', context={'my_objects': my_objects})
list-view.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
{% for object in my_objects %}
<a tabindex="0" class="btn" role="button" data-bs-toggle="popover"
data-bs-trigger="focus" data-bs-content="{{ object.info_field }}" data-bs-html="true">
</a>
{% endfor %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
<script>
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl));
</script>
</body>
It looks like a very basic question and I'm confused by the fact that I cannot find any sensible tutorial on that. I'm trying to setup Django + React production build. After running all kinds of transpilation, minification etc. I end up having .js and .css bundles, index.html and several other files like favicon, service-worker.js etc. Now I need to serve this with Django.
All of these files are static files and should probably be served as static files by the http server (nginx in my case). The variant I came up with was to modify index.html to make it a valid Django template: {% load static %} in the beginning, replace all hardcoded links with {% static 'filepath' %} and serve it using TemplateView, other files are served by nginx. This works fine, however, modifying build results looks like a bad idea. Generated bundles contain a unique hash for each build and I would need to replace that hash in the template after each build. I obviously can automate it but it looks weird. I would prefer not to touch build results at all, but how should I serve static files then? nginx is configured to serve static files under /static/ path and cannot serve files like service-worker.js as static files.
So the question is how do I configure Django + React for production so that I don't have to manually modify build results and can serve static files properly using nginx?
The main problem to combine React and Django is that Django wants to render the templates by itself, but React wants also to execute the render, since it has been created for that. That's why there a lot of approximations that use django just as as REST API when working with react.
But, if you want django to Render the templates to avoid having a Single Page Application (as react provides) and to use all the other tools from django, the main flow that we use in our company is:
You create your components, in js files. For example: component.js
You use babel to compile the JSX files to native Javascript, and babels creates, for example, component.build.js. Django will serve this compiled files, so react is going to be used only in develop tasks because all React code will be transformed to JS before moving to production. For django, all the react components will be just JS code already compiled.
You can use Webpack to automatically move component.build.js to a folder where django can serve them, for example your_project/static/your_app/component.buid.js
You create a django template base.html which will be used as the base template that all your templates will extend. Here you put the header and all your common scripts and styles. For example, bootstrap should be here if used. Remember to leave blocks in this base template to use them in the templates that are going to extend the base.html. Here is the base.html that we use:
{% with version="2.0" %}
<!DOCTYPE html>
{% load static %}
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- base styles goes here -->
<!-- include here bootstrap or styles that are common to all your website -->
<link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}"/>
<!-- custom styles for each app go into this block-->
{% block app_styles %}
<!-- here will go the apps local styles -->
{% endblock %}
</head>
<body>
{% block app %}
<!-- This block will be used by the apps to load their react components -->
{% endblock %}
<!-- base js go here -->
<script src="{% static 'common/pluggins/jquery3.4.1.min.js' %}"></script>
</script>
<script src="{% static 'common/pluggins/fontawesome.js' %}"></script>
<script src="{% static 'common/scripts/base.js' %}?v={{version}}"></script> <!-- File for common utils -->
<!-- custom js for each app go here. You should define your Content() here -->
{% block local_scripts %}
<!-- here will go the app local scripts -->
{% endblock %}
</body>
</html>
{% endwith %}
Create the templates for each of your django apps, by extending the base.html. Remember to include here the <div> that is going to be used by react to render the content. Aslo, remember that this is the place to include the component.build.js compiled JS file that bable created before. Here there is an example that we use to build a dashboard.html in our website:
{% extends 'common/base.html' %}
{% load static %}
{% block app_styles %}
<link rel="stylesheet" href="{% static 'dashboard/styles/dashboard.css' %}?v={{version}}">
{% endblock %}
{% block app %}
<!-- Here is the div used by react -->
<div id="myreact-content"></div>
{% endblock %}
{% block local_scripts %}
<!-- IMPORTANT: Import here the compiled file -->
<script src="{% static 'component.build.js' %}"></script>
{% endblock %}
Set the correct urls.py in your projects and in your app
Set the correct configuration in setting.py to make accesible the static js/css files and the templates
Run your django server and You're done!
In this video you have a small guide on how to configure npm, babel and django. With a correct configuration, everything will be updated automatically when you change some code in your JSX (not compiled) files, so the develop tasks will be more friendly.
https://www.youtube.com/watch?v=Mx3ChaYA0Gw
I am new to Django, I am working in python 3.5, I linked CSS using Jinja but I am not able to see the CSS style within my HTML file, even thought I am getting 200 status in my network and the CSS file is loaded but the style is not working. Can you help me.
here is my html file
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>home</title>
<link rel="stylesheet" type="text/css" href="{%static
'posts/customstyle.css'%}">
</head>
<body>
<div class="container">
<h1>This is the HTML file</h1>
</div>
</body>
and my CSS file is also within 'static' folder within my project folder. I have tried changing the name but nothing is happening.
All I get in the console is:
Resource interpreted as Stylesheet but transferred with MIME type application/x-CSS.
While my network is pretty healthy and I am getting my files uploaded properly.
Here is what I am getting in console:
file uploads sucessfully
style showing but not working
I have an angular 2 front-end with already written links between html js, css and other files such as images, that I would like to serve using Django.
The structure from Angular 2 looks like following:
-->index.html
-->test.js
-->test.css
HTML file:
<!doctype html>
<html lang="en">
<head>
<link href="test.css" rel="stylesheet"/>
</head>
<body>
<script type="text/javascript" src="test.js">
</body>
I wouldn't like to change the given paths from the angular 2 app, instead I would like to know the workaround to serve this files in django without using "/static/< appname>/" or "/static/" prefix or template tags in every link.
Update
Trying to avoid
<!doctype html>
<html lang="en">
<head>
<link href="/static/test.css" rel="stylesheet"/>
</head>
<body>
<script type="text/javascript" src="/static/test.js">
</body>
and avoiding this:
{% load static %} <link href="{% static "example.jpg" %}" rel="stylesheet"/>
In other words, trying to adapt django builtin webserver to serve angular files without adapting ("static" prefix or tag) them to django.
Thank you in advance!
You say you want to "serve your files" from Django, but I think you really want to serve them from something like Nginx. For example,
location = /js/test.js {
root /path/to/js/;
}
in your nginx file. For the purposes of Angular2 URLs, you can pretend that Django doesn't exist.
Just started to learn Django and Twitter Bootstrap on some project.
I use external links to connect css and js files of bootstrap, but today I found Django-Bootstrap-Toolkit, so I wonder how to switch my project to it.
project folder:
myproject/
/bootstrap_toolkit/
/myproject/
/templates/
/someapp/
/manage.py
settings.py
INSTALLED_APPS = (
...
'someapp',
'bootstrap_toolkit',
...)
templates/base.html
{% load bootstrap_toolkit %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<!--CSS Bootstrap-->
<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">
<title>{% block title %}{% endblock %}</title>
</head>
<body>
...
</body>
</html>
So, if I'm deleting link tag, all the CSS disappears, so, I wonder what I've done wrong, and my toolkit is not connected?
If you're using bootstrap3, according to the documentation you should instead use this package: https://github.com/dyve/django-bootstrap3
Regarding the CSS files: I have never used either of those packages but you definitely have to have a link to the bootstrap static files somewhere. So just don't remove the link tag and you're fine!