timonweb / django-tailwind

Django + Tailwind CSS = 💚
https://django-tailwind.readthedocs.io
MIT License
1.43k stars 88 forks source link

Does not work with S3 #171

Open KWTechKevin opened 1 year ago

KWTechKevin commented 1 year ago

Tailwind fails to load when static files are handled through S3. All html are rendered without css.

Relevant settings are as follows

INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles',

#styling
'tailwind',
'theme',
'django_browser_reload',

#s3 stuff
'storages',

#custom apps
'base',

]

css stuff

TAILWIND_APP_NAME = 'theme'

node

NPM_BIN_PATH = '/usr/local/bin/npm'

S3 stuff

import os AWS_ACCESS_KEY_ID = 'XXXX' AWS_SECRET_ACCESS_KEY = 'XXXX' AWS_STORAGE_BUCKET_NAME = 'XXX-static' AWS_S3_CUSTOM_DOMAIN = '%s.s3.amazonaws.com' % AWS_STORAGE_BUCKET_NAME AWS_DEFAULT_ACL = 'public-read'

AWS_S3_OBJECT_PARAMETERS = { 'CacheControl': 'max-age=86400', }

AWS_QUERYSTRING_AUTH = False

AWS_HEADERS = { 'Access-Control-Allow-Origin': '*', }

STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), ]

AWS_LOCATION = 'static' AWS_MEDIA = 'media' STATIC_URL = 'https://%s/%s/' % (AWS_S3_CUSTOM_DOMAIN, AWS_LOCATION) MEDIA_URL = 'https://%s/%s/' % (AWS_S3_CUSTOM_DOMAIN, AWS_MEDIA)

STATIC_URL = 'theme/static/'

DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'

STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage' #media

end S3 stuff

My pip is as follows: pip freeze arrow==1.2.3 asgiref==3.7.2 binaryornot==0.4.4 boto3==1.26.150 botocore==1.29.150 certifi==2023.5.7 chardet==5.1.0 charset-normalizer==3.1.0 click==8.1.3 cookiecutter==2.1.1 Django==4.2.1 django-appconf==1.0.5 django-browser-reload==1.9.0 django-storages==1.13.2 django-tailwind==3.5.0 gunicorn==20.1.0 idna==3.4 Jinja2==3.1.2 jinja2-time==0.2.0 jmespath==1.0.1 mariadb==1.1.6 MarkupSafe==2.1.3 mysqlclient==2.1.1 packaging==23.1 Pillow==9.5.0 python-dateutil==2.8.2 python-slugify==8.0.1 PyYAML==6.0 rcssmin==1.1.1 requests==2.31.0 rjsmin==1.2.1 s3transfer==0.6.1 six==1.16.0 sqlparse==0.4.4 text-unidecode==1.3 typing_extensions==4.6.3 urllib3==1.26.16 uWSGI==2.0.21

pmyjavec commented 1 year ago

I'm having a similar problem, for some reason I don't think collectstatic is copying the CSS files to the S3 bucket.

I'm experiencing it with Google cloud storage, but the same behavior.

anefta commented 1 year ago

I am using Digital Ocean Space -- Not working also. Any ideas anyone?

pmyjavec commented 1 year ago

Just so you know, I was having a problem with deploying via the gcloud cli. I was "submitting" a build and deploy via the cli which would archive my workspace / django app and upload it to Google cloud build. I didn't realize but gcloud builds submit respects the .gitignore, which I had setup with a pre-generated ignore, ignoring dist/ directories. This is a problem because obviously, some tailwind assets are held in dist directories and they weren't being uploaded so it seemed like collectstatic was just ignoring files, but it wasn't, they just weren't there. It was highly confusing but unrelated to this library.

@anefta I skimmed your config, it looked ok to me. What do the "inspector" or developer tools in your browser tell you is happening ?

chrisking commented 4 months ago

@KWTechKevin did you ever resolve this issue? I've been using this library with S3 as my static file storage and it has been working really well. The only thing that I've had to do is ensure that I both build and collect static on my prod instance which updates the S3 locations.

KWTechKevin commented 4 months ago

@KWTechKevin did you ever resolve this issue? I've been using this library with S3 as my static file storage and it has been working really well. The only thing that I've had to do is ensure that I both build and collect static on my prod instance which updates the S3 locations.

Nope, never did manage to resolve it. Ended up decoupling the application.