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'),
}
}
...
Related
I am deploying an Django App, which runs on google server but it does not load the static files, so that App does not load the css and images.
I checked the bucket I created but there is no files in the bucket.
Here is settings.py
STATIC_URL = '/static/'
STATIC_ROOT = "static"
PRODUCTION = True
if PRODUCTION:
# Define static storage via django-storages[google]
GS_BUCKET_NAME = env("GS_BUCKET_NAME")
STATIC_URL = "/static/"
DEFAULT_FILE_STORAGE = "storages.backends.gcloud.GoogleCloudStorage"
STATICFILES_STORAGE = "storages.backends.gcloud.GoogleCloudStorage"
GS_DEFAULT_ACL = "publicRead"
else:
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
Here is app.yaml file.
runtime: python38
handlers:
- url: /static
static_dir: static/
- url: /.*
script: auto
Here is urls.py.
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
When I deploy the app, it was done successfully. but the static files does not deploy into the bucket.
As well I run this bellow command.
python manage.py collectstatic
I followed this tutorial.
Here is structure of static directory.
I created a project with Django as backend and Vue js as frontend. Initially I ran Django on one server(8000) and Vue js on another (8080) with node.js . Then, I integrated Both to the same server with proxy changes in vue.config.js. Then I ran the command NPM RUN BUILD on terminal and I moved the dist folder to Django's static folder to render. This worked perfectly in local development environment but I'm getting 404 error for static files while deploying the project in Azure web services through git-hub. Thanks for any fix or sugesstions.
Here is my settings.py file. I have also tried commenting STATIC_ROOT
STATIC_URL = '/static/'
# Vue assets directory (assetsDir)
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
Here is my vue.config.js
module.exports = {
devServer: {
proxy: {
'^/api/': {
target: 'http://127.0.0.1:8000/api/',
ws: false,
}
}
},
// outputDir must be added to Django's TEMPLATE_DIRS
outputDir: './dist/',
// assetsDir must match Django's STATIC_URL
assetsDir: 'static',
publicPath: '',
baseUrl: '',
}
Here is my project file structure
Here is the error in my console
If you are running on production server, static files are served differently from dev server. Additional changes has to be made in main urls and settings. Docs link
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
# your url patterns
]
# for serving static files
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
# for serving media files (files that were uploaded through your project application)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Obviously, you have to add STATIC_URL, STATIC_ROOT, MEDIA_URL, MEDIA_ROOT in project settings.py file.
Also, you need to run python manage.py collectstatic after setting STATIC_ROOT. Docs link 1 and link 2
As I said in the title I can't import my css file in TINYMCE_DEFAULT_CONFIG variable 'content_css'.
I'm using django-tinymce4-lite package and setting 'content_css' in my settings.py file
I've tried with the boostrap cdn like this:
'content_css': 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'
and it worked but if I do something like this:
"content_css": os.path.join(STATIC_URL, "css/style.css")
I have the following 404 error:
"GET /static/css/style.css HTTP/1.1" 404 1764
my css file is in a static folder located in the root directory of my project like this:
/static/css/style.css
and my Static conf is:
settings.py
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = "/static/"
STATIC_ROOT = os.path.join(BASE_DIR, "static/")
urls.py
urlpatterns = [
path("grappelli/", include("grappelli.urls")),
path("admin/", admin.site.urls),
path("admin/filebrowser/", site.urls),
path("tinymce/", include("tinymce.urls")),
path("page/", include("pages.urls")),
]
if settings.DEBUG:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
It's been a whole day looking for a solution, even the smallest clue is welcome.
Thanks
EDIT:
I'm in DEBUG mode running 'python manage.py runserver'
Pipfile
[[source]]
name = "pypi"
url = "https://pypi.org/simple"
verify_ssl = true
[dev-packages]
[packages]
django = "*"
black = "*"
psycopg2-binary = "*"
pillow = "*"
django-tinymce4-lite = "*"
django-filebrowser-no-grappelli = "*"
[requires]
python_version = "3.6"
Add STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"), ) to your settings.
Also remove STATIC_ROOT for your development settings or change it to something that's outside the project directory, for example one level higher:
STATIC_ROOT = os.path.abspath(os.path.join(BASE_DIR, '..', 'static'))
This will make django collect static files to a static directory next to your project directory (but it could be a different location altogether, where your webserver will fetch them directly when you don't run runserver)
Note I wrote a more thorough explanation of the various settings, especially when deploying to production here on SO and here in a blog post
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.
My enviroment is with Django 1.10.7, PostgreSQL 9.4 and Nginx 1.6 with Gunicorn
I have a global folder called static for common static files to use in sub apps, then i set another folder for production mode with the name 'static_root':
in my settings.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static_root')
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static")
]
in my urls.py:
from django.conf import settings
from django.conf.urls.static import static
if settings.DEBUG:
urlpatterns += (static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT))
urlpatterns += (static(settings.STATIC_URL, document_root=settings.STATIC_ROOT))
when debug is true all work perfect, but in production mode the site not see the static files
i set the location in nginx configuration too
thank!
i found the answer to my question,
the problem was that i set in the nginx configuration: root
location /static {
root /var/projects/project/static_root;
}
the correct way is: alias
location /static {
alias /var/projects/project/static_root;
}