I try to use Django-webpack-loader with Django and VueJs but I am not able to use correct settings with my complex project setup to load webpack bundle. My project layout is
Endofyogavidya
--dist/bundle.js
manage.py
webpack.config.js
--Yogavidya
----apps
----static
--------main.js
--------App.Vue
----templates
----settings
------base.py
------development.py
In my settings.py
PROJECT_ROOT = os.path.abspath(os.path.dirname(__file__))
STATIC_URL = '/public/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = (
os.path.join(PROJECT_ROOT, "dist"),
)
WEBPACK_LOADER = {
'DEFAULT': {
'CACHE': not DEBUG,
'BUNDLE_DIR_NAME': '',
'STATS_FILE': os.path.join(PROJECT_ROOT, 'webpack-stats.json'),
'POLL_INTERVAL': 0.1,
'TIMEOUT': None,
'IGNORE': ['.+\.hot-update.js', '.+\.map']
}
}
My index.html is not working because with these settings django tries collect my assets to '/home/ytsejam/public_html/endofyogavidya/yogavidya/settings/dist'. How can I adjust my folder settings correctly ?
Thanks
There is a nice tut on this. Follow the below link
https://medium.com/labcodes/configuring-django-with-react-4c599d1eae63
It is for ReactJS but hope you can relate it to the framework you are using.
Related
I wrote the code in settings.py as below, but the css was not reflected. I also ran $ heroku run python manage.py collectstatic, but when I looked at heroku run bash, there were no static files. Please tell me how to deal with it.
settings.py
from pathlib import Path
import os
MIDDLEWARE = [
'whitenoise.middleware.WhiteNoiseMiddleware',
]
from socket import gethostname
hostname = gethostname()
if "User-MacBookAir.local" in hostname:
DEBUG = True
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
ALLOWED_HOSTS = ['*']
else:
DEBUG = False
import dj_database_url
db_from_env = dj_database_url.config()
DATABASES = {
'default': dj_database_url.config()
}
ALLOWED_HOSTS = ['.herokuapp.com']
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
I have just deployed (first time ever) a Django project to a web server. Everything (including postgres) works flawlessly, except that static images won't load.
Here is the relevant part of the settings.py:
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.2/howto/static-files/
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "static/")
#STATICFILES_DIRS = [
# os.path.join(BASE_DIR, "static"),
#]
# Default primary key field type
# https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
LOGIN_REDIRECT_URL = 'home'
LOGIN_URL = 'login'
LOGOUT_URL = 'logout'
AUTH_USER_MODEL = 'account.CustomUser'
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
The error message I get is the following in the console:
"GET /static/images/logo.png HTTP/1.1" 404 1808
However, when checking the file path in the console I have the following:
root#melius:/django/melius/static/images#
In this folder the files are present.
Where is my mistake?
There can be two reaon your static files not working.
First of all, Django doesn't serve static files on production.
Also i notice your static settings are wrongly configured.
Make sure your setting.py is look like this:
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'YOUR STATIC FILE FOLDERS')]
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
If you run your application on Nginx or apache2please make sure you configured the.conf` file properly to serve the static files.
Also, there is a straightforward and easy solution, that is whitenoise
If you don't want to serve your static files with Nginx or a similar server.
You can try whitenoise
To use whitenoise, please install it first and update your settings.py file like this:
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
and add this in middlware before the sessionmiddleware
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'whitenoise.middleware.WhiteNoiseMiddleware', # Serve static in production without nginx or apache
'django.contrib.sessions.middleware.SessionMiddleware',
........
]
Hope the solution will solve your problem
Here you go for whitenoise docs: http://whitenoise.evans.io/en/stable/
Note: static root and static dirs shound't be same
Please be informed I researched Stack Overflow and ckeditor documentation and configured accordingly.
First I install ckeditor using
pip install django-ckeditor
Then I configured my settings.py as below
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.1/howto/static-files/
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
# media
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
# Static files (CSS, JavaScript, Images)
STATICFILES_FINDERS = [
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
]
CKEDITOR_BASEPATH = "/static/ckeditor/ckeditor"
# CKEditor settings
CKEDITOR_UPLOAD_PATH = "uploads/"
CKEDITOR_JQUERY_URL = '//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'
# This ensures you have all toolbar icons
CKEDITOR_CONFIGS = {
'default': {
'toolbar': None,
},
}
Then I configured my urls.py (project's url) as below
url(r'^ckeditor/', include('ckeditor_uploader.urls'))
Then I ran command collect static
ckeditor statics are collected in right location defined in settings which is /static/ckeditor/ckeditor
After that I imported and used ckeditor richtextfield in my model
from django.db import models
from ckeditor.fields import RichTextField
class Post(models.Model):
post = models.RichTextField()
While makemigrations i am getting the following error
AttributeError: module 'django.db.models' has no attribute 'RichTextField'
Change from:
post = models.RichTextField()
to:
post = RichTextField()
And in CKEDITOR_BASEPATH add "/" to the end.
CKEDITOR_BASEPATH = "/static/ckeditor/ckeditor/"
I've made a webpack file(as MainPage.js) in output folder which I set up on webpack.config.js However, when I access to my main page it says there is no MainPage.js. What's wrong with it?? (I'm using Django on backend and React on frontend)
Hierarchy of my folder
Cebula4
- back
- settings.py
- manage.py
- front
- webpack-stats.json
- webpack.config.js
- static
- bundles
- MainPage.js (I checked that it was existed)
Settings.py
...
BASE_DIR = "C:\\Users\\1Sun\\Cebula4"
STATIC_URL = '/static/'
STATICFILES_DIRS=[
os.path.join(BASE_DIR,'static'),
]
STATIC_ROOT=os.path.join(BASE_DIR,'staticfiles')
...
WEBPACK_LOADER = {
'DEFAULT' : {
'BUNDLE_DIR_NAME': 'bundles/',
'STATS_FILE': os.path.join(BASE_DIR, 'front/webpack-stats.json'),
}
}
...
I'm having trouble showing my CSS/Static files on my django app I just deployed on Heroku. It doesn't show any debugging errors, so I don't know where to start.
Here is my code:
SETTINGS_DIR = os.path.dirname(__file__)
PROJECT_PATH = os.path.join(SETTINGS_DIR, os.pardir)
PROJECT_PATH = os.path.abspath(PROJECT_PATH)
STATIC_PATH = os.path.join(PROJECT_PATH, 'static')
STATIC_ROOT = 'staticfiles'
STATIC_URL = '/static/'
STATICFILES_DIRS = (
STATIC_PATH,
)
Used WhiteNoise to collectstaticfiles. Thanks for helping.
https://devcenter.heroku.com/articles/django-assets for documentation.
Try setting an absolute path to your STATIC_ROOT. From Django documentation: Settings:
STATIC_ROOT
The absolute path to the directory where collectstatic will collect static files for deployment.
Then make sure that you run collectstatic.
Last, I usually set STATICFILES_DIRS to None for deployment.