2 years ago
#37155
Maksym Kokocinski
Static files doesn't work on heroku when using primary key in url
I have a problem, static files does not work when there is primary key in the url, problem occurs locally and on heroku. I tried many settings configs and always there was one problem or another.
you can check it, how it looks over this link - https://ibb.co/znv8Fqj
from pathlib import Path
import django_heroku
import dj_database_url
import os
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY ='smth'
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
ALLOWED_HOSTS = ['optifolio-dev.herokuapp.com','127.0.0.1','[*]']
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'optifolio',
]
MIDDLEWARE = [
'whitenoise.middleware.WhiteNoiseMiddleware',
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'OPI.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
WSGI_APPLICATION = 'OPI.wsgi.application'
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/3.1/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static/')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles/')
MEDIA_ROOT = os.path.join(BASE_DIR, 'static/images/')
django_heroku.settings(locals())
I bet that there is a problem with heroku config but I can't find it any help will be great!
my main html file:
<!DOCTYPE html>
<html>
<head>
<title>Optifolio</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
<link rel="stylesheet" type="text/css" href="..\static\css\main.css">
<link href="https://fonts.googleapis.com/css?family=Mulish&display=swap" rel="stylesheet" />
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- semantic UI -->
<link rel="stylesheet" type='text/css' href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.min.css">
<!--Chart js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" integrity="sha256-Uv9BNBucvCPipKQ2NS9wYpJmi8DTOEfTA/nH2aoJALw=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" integrity="sha256-aa0xaJgmK/X74WM224KMQeNQC2xYKwlAt08oZqjeF0E=" crossorigin="anonymous" />
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
{% include 'optifolio/navbar.html' %}
{% block content %}
{% endblock %}
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</html>
And html site where problem occur:
{% extends 'optifolio/main.html' %}
{% load static %}
{% block content %}
<br>
<div class="container" style="margin-left:230px;">
<div class="container-fluid">
<p class="text-md-left" style="font-size:36px;font-weight:bold;">Wizualizacja portfolio</p>
</div>
</div>
<div class="container" style="margin-left:230px;">
<nav class="navbar navbar-expand-sm">
<div class="container-fluid">
<div id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#"><button class="przyciskportf1" data-toggle="modal" data-target="#exampleModal"><div class="d-flex justify-content-center align-items-center">Dodaj transakcję</div></button></a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container" style="margin-left:250px;">
<a class="btn btn-sm btn-info" href="{% url 'add_transaction' %}">Dodaj</a>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Dodaj transakcję</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="/visualisationpage/#" method="POST">
{% csrf_token %}
{{ form.non_field_errors }}
<div class="form-group">
<label for="{{ form.title.id_for_label }}">Nazwa spółki</label>
<input type="text" name="title" class="form-control" placeholder="Podaj nazwę spółki">
{{ form.title.errors }}
</div>
<div class="form-group">
<label for="{{ form.buy_sell.id_for_label }}"></label>
<label for="buy">Kupno</label><br>
<input type="radio" id="buy" name="buy_sell" class="form-control" value="+">
<label for="sell">Sprzedaz</label><br>
<input type="radio" id="sell" name="buy_sell" class="form-control" value="-">
{{ form.buy_sell.errors }}
</div>
<div class="form-group">
<label for="{{ form.shares_number.id_for_label }}">Liczba akcji</label>
<input type="text" name="shares_number" class="form-control">
{{ form.shares_number.errors }}
</div>
<div class="form-group">
<label for="{{ form.course.id_for_label }}">Kurs</label>
<input type="text" name="course" class="form-control">
{{ form.course.errors }}
</div>
<div class="form-group">
<label for="{{ form.fare.id_for_label }}">Opłata transakcyjna</label>
<input type="text" name="fare" class="form-control">
{{ form.fare.errors }}
</div>
<div class="form-group">
<label for="{{ form.date.id_for_label }}">Data</label>
<input type="date" name="date" class="form-control">
{{ form.date.errors }}
</div>
<div class="form-group">
<label for="{{ form.hour.id_for_label }}">Godzina</label>
<input type="time" name="hour" class="form-control">
{{ form.hour.errors }}
</div>
<button type="submit" value="Zapisz zmiany" href="{% url 'visualisationpage' %}" class="btn btn-primary">Zapisz zmiany</button>
</form>
</div>
</div>
</div>
</div>
<div id="overlay"></div>
<div class="container" style="margin-left:250px;">
<table class="table table-bordered" style="max-width:700px;">
<thead>
<tr>
<th class="text-center">Nazwa</th>
<th class="text-center">Data</th>
<th class=" text-center">Godzina</th>
<th class=" text-center">Liczba akcji</th>
<th class=" text-center">Kwota</th>
<th class=" text-center">Opłata</th>
<th class=" text-center">Edytuj</th>
<th class=" text-center">Usuń</th>
</tr>
</thead>
<tbody>
{% for temp in visdata %}
<tr>
<th class=" text-center">{{ temp.title }}</th>
<td class=" text-center">{{ temp.date }}</td>
<td class=" text-center">{{ temp.hour }}</td>
<td class=" text-center">{{ temp.shares_number }}</td>
<td class=" text-center">{{ temp.course }}</td>
<td class=" text-center">{{ temp.fare }}</td>
<td><a class="btn btn-sm btn-info" href="{% url 'update_transaction' temp.visdata_id %}">Edytuj</a></td>
<td><a class="btn btn-sm btn-danger" href="{% url 'delete_transaction' temp.visdata_id %}">Usuń</a></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="container" style="margin-left:250px;">
<left>
<button class="wykres szarak" onclick="chartType('bar')">Bar</button>
<button class="wykres szarak" onclick="chartType('line')">Line</button>
<button class="wykres szarak" onclick="chartType('doughnut')">Doughnut</button>
<button class="wykres szarak" onclick="chartType('pie')">Pie</button>
<button class="wykres szarak" onclick="chartType('polarArea')">PolarArea</button>
</div>
<div class="chartCard"style="margin-left:250px;">
<div class="chartBox" style="max-width:800px">
<canvas id="myChart" width="50" height="20"></canvas>
</div>
</div>
<script>
const data = {
labels: [{% for item in visdata %}'{{item.title}}',{%endfor%}],
datasets: [{
label: 'Shares number',
data: [{% for item in visdata %}'{{item.shares_number}}',{%endfor%}],
backgroundColor: [
'rgba(255, 26, 104, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(0, 0, 0, 0.2)'
],
borderColor: [
'rgba(255, 26, 104, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(0, 0, 0, 1)'
],
borderWidth: 1
}]
};
// config
const config = {
type: 'line',
data,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
};
// config
const config2 = {
type: 'bar',
data,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
};
// config
const config3 = {
type: 'pie',
data,
options: {}
};
const config4 = {
type: 'doughnut',
data: data,
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
}
},
};
const config5 = {
type: 'polarArea',
data: data,
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Polar Area Chart'
}
}
},
};
// render init block
let myChart = new Chart(
document.getElementById('myChart'),
config
);
function chartType(type){
myChart.destroy();
if (type =='line'){
myChart = new Chart(
document.getElementById('myChart'),
config
);
}
if (type =='bar'){
myChart = new Chart(
document.getElementById('myChart'),
config2
);
}
if (type =='pie'){
myChart = new Chart(
document.getElementById('myChart'),
config3
);
}
if (type =='doughnut'){
myChart = new Chart(
document.getElementById('myChart'),
config4
);
}
if (type =='polarArea'){
myChart = new Chart(
document.getElementById('myChart'),
config5
);
}
}
</script>
</div>
{% endblock %}
```[enter image description here][1]
[1]: https://i.stack.imgur.com/RPe1A.png
python
django
heroku
settings
primary-key
python
django
heroku
settings
primary-key
0 Answers
Your Answer