I've been hung up on deploying my React/Django app to GAE for the last two days and I think I've isolated the issue, but I've been unable to come up with a solution that works. When I first deployed I was running into issues with mimetypes with each of my JS and CSS files embedded in my index.html being blocked with error messages like these leading me to believe it found the files but didn't handle them correctly:
(file) was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
My understanding from browsing SO and doing research was that GAE was treating these as html files and not executing them properly. I started playing with the .yaml to enforce mime types due to some settings I saw in the references for GAE and now I can't deploy and get error message:
ERROR: (gcloud.app.deploy) An error occurred while parsing file: [(mysite)\app.yaml]
Unknown url handler type.
<URLMap
static_files=None
upload=None
application_readable=None
static_dir=None
mime_type=text/css
expiration=None
require_matching_file=None
http_headers=None
position=None
api_endpoint=None
redirect_http_response_code=None
url=/static/css\.css
login=optional
auth_fail_action=redirect
secure=default
script=None
>
in "(mysite)/app.yaml", line 8, column 1
I've been playing around with the files in the browser and I've found that I get 404 errors when I try to pull up the files despite knowing that they're in the directory. IE navigating here: https://acptconstruction.appspot.com/backend/static/js/2.738f0ca9.chunk.js yields a 404, but I can see it with the exact filename in the directory. Because of that and the error message on deployment, I think that maybe GAE is having trouble parsing the filenames because of all of the periods? The filenames were built when I ran npm run-scripts build after I was finished with the front end app, but regardless, I tried to deploy copying that file to homepage.js and including using that exact filename with the path without success.
I don't know if I was on a better track with the first yaml file, where it could "find" them (I think) and not grock them or with the second yaml where they couldn't be found? The issue might be as simple as copying all the js files and changing their names to like homepage.js and homepage2.js but I am nervous that I might break everything if I go down that path. Any help is appreciated!
Files:
Originally, my app.yaml file looked like this:
runtime: python38
handlers:
- url: /static
static_dir: static/
- url: /.*
script: auto
Updated YAML that gives the deployment errors:
runtime: python38
handlers:
- url: /static/css/(.*)
mime_type: text/css
- url: /static/js/(.*)
mime_type: text/javascript
index.html:
<!doctype html><html lang="en" style="background-color:#f1f1f1"><head><base href="/"> <meta charset="utf-8"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="ACPT Construction"/><link rel="manifest" href="/manifest.json"/><title>ACPT Construction</title><link type="text/css" href="/backend/static/css/2.89e89512.chunk.css" rel="stylesheet"><link type="text/css" href="/backend/static/css/main.cfd2a7ed.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root" style="min-height:1000px"></div><script>!function(e){function t(t){for(var n,c,i=t[0],l=t[1],a=t[2],f=0,s=[];f<i.length;f++)c=i[f],Object.prototype.hasOwnProperty.call(o,c)&&o[c]&&s.push(o[c][0]),o[c]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(p&&p(t);s.length;)s.shift()();return u.push.apply(u,a||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,i=1;i<r.length;i++){var l=r[i];0!==o[l]&&(n=!1)}n&&(u.splice(t--,1),e=c(c.s=r[0]))}return e}var n={},o={1:0},u=[];function c(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,c),r.l=!0,r.exports}c.m=e,c.c=n,c.d=function(e,t,r){c.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},c.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.t=function(e,t){if(1&t&&(e=c(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(c.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)c.d(r,n,function(t){return e[t]}.bind(null,n));return r},c.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(t,"a",t),t},c.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},c.p="/";var i=this.webpackJsonpacptconstruction=this.webpackJsonpacptconstruction||[],l=i.push.bind(i);i.push=t,i=i.slice();for(var a=0;a<i.length;a++)t(i[a]);var p=l;r()}([])</script><script type="application/javascript" src="/backend/static/js/2.738f0ca9.chunk.js"></script><script type="application/javascript" src="/backend/static/js/main.b160e3e4.chunk.js"></script></body></html>
File structure:
acptconstruction
backend
settings.py
manage.py (command to run server is python manage.py runserver)
backend
views.py (heres where index.html gets called)
urls.py (url structure)
acptconstruction (front end)
build
index.html
manifest.json
app.yaml
static
css
js
media
settings.py:
import os
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/1.11/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY =
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = False
ALLOWED_HOSTS = ['*']
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework',
'emailcontactform',
'corsheaders'
]
MIDDLEWARE = [
'whitenoise.middleware.WhiteNoiseMiddleware',
'corsheaders.middleware.CorsMiddleware',
'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 = 'backend.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'acptconstruction')],
'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 = 'backend.wsgi.application'
# Database
# https://docs.djangoproject.com/en/1.11/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
# Password validation
# https://docs.djangoproject.com/en/1.11/ref/settings/#auth-password-validators
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/1.11/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/1.11/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'acptconstruction', 'build', 'static'),
]
if DEBUG:
STATIC_ROOT = os.path.join(BASE_DIR, 'backend','/static')
else:
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'smtp.gmail.com'
EMAIL_USE_TLS = True
EMAIL_PORT =
EMAIL_HOST_USER =
EMAIL_HOST_PASSWORD =
CORS_ORIGIN_WHITELIST = [
'http://localhost:3000',
'http://localhost:8000',
'http://localhost:8080',
]
https://your_app.appspot.com/backend/static/js/2.738f0ca9.chunk.js does not match any pattern in your app.yaml. Either get rid of the /backend/ part of the url, or add the handler to your app.yaml:
handlers:
- url: /static/css
static_dir: static/css
- url: /backend/static/css
static_dir: static/css
- url: /static/js
static_dir: static/js
- url: /backend/static/js
static_dir: static/js
And the mime_type error you saw was probably due to your tags in the template.html file. The proper tags are:
<link rel="stylesheet" href="styles.css">
or:
<link rel="stylesheet" type="text/css" href="styles.css">
You don't want to put text/html in those tags.
Related
When i imported os at first and write at the most bottom of settings.py
STATICFILES_DIRS =[
os.path.join(BASE_DIR,
'static')
]
To run my static folder which contains test.txt
But when I tried to run it on Opera it shows Page not foun 404.
Please tell what Can be the issue in this Django program.
You need to run the following command to collect static files first
python manage.py collectstatic
Your settings.py file must include
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'))
After this you import static method in your urls.py file of project and then add
from django.conf.urls.static import static
urlpatterns = [ ]+
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
I want to assign/add a simple static HTML site to my django site. I know that's not what django is for but at the beginning I just want to create a simple site with a href to the other directories on the project.
For e.g.
index.html
<html>
<head></head>
<body>
anzeige<br />
Speiseplan <br />
Menu1<br />
Menu2<br />
Menu3<br />
</body>
</html>
Now I want to add this site to urls.py. I read that it shoud be possible with TemplateView.
I already tried this:
urlpatterns = [
path('', TemplateView.as_view(template_name="/templates/speiseleitsystem/index.html")),
path('speiseplan/', views.speiseplan_Anzeige, name='speiseplan_Anzeige'),
path('speiseplanEdit/', views.speiseplan_Eintragen, name='speiseplan_Eintragen'),
path('menu1/', views.speiseplan_menu1, name='speiseplan_menu1'),
path('menu2/', views.speiseplan_Anzeige, name='speiseplan_menu2'),
path('menu3/', views.speiseplan_Anzeige, name='speiseplan_menu3'),
]
My error code:
TemplateDoesNotExist at /
/templates/speiseleitsystem/index.html
Request Method: GET
Request URL: http://127.0.0.1:8000/
Django Version: 3.1.6
Exception Type: TemplateDoesNotExist
Exception Value:
/templates/speiseleitsystem/index.html
Exception Location: C:\Users\xxxxx\AppData\Local\Programs\Python\Python39\lib\site-packages\django\template\loader.py, line 47, in select_template
Python Executable: C:\Users\xxxx\AppData\Local\Programs\Python\Python39\python.exe
Python Version: 3.9.0
Python Path:
['C:\\Users\\xxxx\\Documents\\GitHub\\speiseplan\\speiseplan',
'C:\\Users\\xxxx\\AppData\\Local\\Programs\\Python\\Python39\\python39.zip',
'C:\\Users\\xxx\\AppData\\Local\\Programs\\Python\\Python39\\DLLs',
'C:\\Users\\xxx\\AppData\\Local\\Programs\\Python\\Python39\\lib',
'C:\\Users\\xxx\\AppData\\Local\\Programs\\Python\\Python39',
'C:\\Users\\xxxx\\AppData\\Local\\Programs\\Python\\Python39\\lib\\site-packages']
Server time: Thu, 18 Feb 2021 15:15:06 +0000
Did I missed something?
Depending on your project structure and settings, this might work:
In your url patterns, you have this line:
path('', TemplateView.as_view(template_name="/templates/speiseleitsystem/index.html")),
Change it to :
path('', TemplateView.as_view(template_name="speiseleitsystem/index.html")),
Django already knows that it has to look inside templates folder, given that your structure is something like this:
-project
- speiseleitsystem
\templates
\speiseleitsystem
\index.html
Remove /template/ from the url pattern and django will look in the correct place.
Currently it is looking for this directory:
project/speiseleitsystem/templates/speiseleitsystem/templates/speiseleitsystem/index.html
Which is surely not what you want it.
In case anyone will struggle with the same problem, the solution is a mix of all answers here.
Add the template directory into the setting.py inside TEMPLATES and there DIRS
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': ['speiseleitsystem/templates'],
'APP_DIRS': True,
'OPTIONS': {
],
},
},
]`
Note: Depending on the project structure only 'templates' is needed in DIRS
Add the right path to urls.py (as MoPo mentioned)
urlpatterns = [
path('', TemplateView.as_view(template_name="speiseleitsystem/index.html")),
]
Because of the template directory in setting.py templates/... is not needed here.
I'm working on a project in which I used frontend template from online website .
but I think i have put every file in correct places but instead I'm getting static file not found error.
below are important file :
setting.py
import os
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
SECRET_KEY = 'lj6ra=$c5t!2kkin(qvuk3o(wui!m(%%wktf%my!c_gbl6(7ap'
DEBUG = True
ALLOWED_HOSTS = ['*']
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'Gym/static/'),
)
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'Gym',
]
MIDDLEWARE = [
'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 = 'Gym.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR,'templates')],
'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 = 'Gym.wsgi.application'
# Database
# https://docs.djangoproject.com/en/3.0/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
# Password validation
# https://docs.djangoproject.com/en/3.0/ref/settings/#auth-password-validators
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.0/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.0/howto/static-files/
STATIC_URL = '/static/'
urls.py:
from django.contrib import admin
from django.urls import path,include
from . import views
from django.conf.urls.static import static
from django.conf import settings
urlpatterns = [
path('admin/', admin.site.urls),
path('',views.index),
]
index.html :
...
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/font-awesome.min.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/elegant-icons.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/nice-select.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/owl.carousel.min.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/slicknav.min.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css">
...
Error i'm getting :
"""[02/Aug/2020 04:34:09] "GET /css/font-awesome.min.css HTTP/1.1" 404 2108
Not Found: /css/magnific-popup.css
Not Found: /css/nice-select.css
[02/Aug/2020 04:34:09] "GET /css/magnific-popup.css HTTP/1.1" 404 2102
Not Found: /css/owl.carousel.min.css
Not Found: /css/bootstrap.min.css
[02/Aug/2020 04:34:09] "GET /css/nice-select.css HTTP/1.1" 404 2093
Not Found: /css/elegant-icons.css
[02/Aug/2020 04:34:09] "GET /css/owl.carousel.min.css HTTP/1.1" 404 2108
[02/Aug/2020 04:34:09] "GET /css/bootstrap.min.css HTTP/1.1" 404 2099
Not Found: /css/slicknav.min.css
[02/Aug/2020 04:34:09] "GET /css/elegant-icons.css HTTP/1.1" 404 2099
[02/Aug/2020 04:34:09] "GET /css/slicknav.min.css HTTP/1.1" 404 20
"""
I also tried STATICFILES_URL but its not working , please help I'm going crazy
i have also try collectstatic but nothing happens , i dont understand the problem please help
Can you try placing css files under Gym/static/Gym/#place css files here
and in index.html use below
<link rel="stylesheet" href="{% static 'Gym/bootstrap.min.css' %}" type="text/css">
I am new to webpack and I got the babel loader and css loader to work and project compiles successfully but when I try to access via browser I get the below error. It looks as if PUBLIC_URL is not recognized. I believe I don't know how to configure this.
I appreciate your valuable comments.
Thanks
ℹ ｢wdm｣: Compiled successfully. URIError: Failed to decode param
'/%PUBLIC_URL%/favicon.ico' at decodeURIComponent (<anonymous>) at
decode_param (/home/mike/finance-
grapher/node_modules/express/lib/router/layer.js:172:12) at Layer.match
(/home/mike/finance-
grapher/node_modules/express/lib/router/layer.js:123:27) at matchLayer
(/home/mike/finance-
grapher/node_modules/express/lib/router/index.js:574:18) at next
(/home/mike/finance-
grapher/node_modules/express/lib/router/index.js:220:15) at expressInit
(/home/mike/finance-
grapher/node_modules/express/lib/middleware/init.js:40:5) at Layer.handle
[as handle_request] (/home/mike/finance-
grapher/node_modules/express/lib/router/layer.js:95:5) at trim_prefix
(/home/mike/finance-
grapher/node_modules/express/lib/router/index.js:317:13) at
/home/mike/finance-grapher/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/home/mike/finance-
grapher/node_modules/express/lib/router/index.js:335:12)
Webpack.config.js
.babelrc
package.json
project folder structure
Quick fix
What if you were to replace %PUBLIC_URL% with the actual path. I think that Babel is having issues transpiling the %. Try replacing %PUBLIC_URL%/favicon.ico with /public/favicon.ico and the issue is resolved.
Better fix
Add a new rule to your webpack.config.js.
//...
{
test: /\.(png|svg|jpg|jpeg|gif|ico)$/,
exclude: /node_modules/,
use: ['file-loader?name=[name].[ext]'] // ?name=[name].[ext] is only necessary to preserve the original file name
}
//...
Then have the .ico resource copied to the dist directory by adding an import in your App.js. import '../public/favicon.ico';
In your index.html; <link rel="shortcut icon" href="favicon.ico"> to make use of your icon. No longer need to provide a path since it will be copied to the dist directory
OR:
In addition to the rule added to the webpack.config.js mentioned above, adding plugins to the webpack config may be a better way to go depending on your setup.
For me this looks like adding the npm package html-webpack-plugin to the project. Then requiring it in the webpack config; const HtmlWebpackPlugin = require('html-webpack-plugin');. Then adding plugins to the module.exports.
//...
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
filename: './index.html',
favicon: './public/favicon.ico'
})
]
//...
Going this route and doing the work in the webpack config means the line added to the App.js to import the favicon.ico will no longer be necessary.
EDIT: As mentioned by #Tolumide
Don't forget to configure the webpack.config appropriately per environment.
I had the same issue and fixed it with the following:
Inside webpack.config.js in the plugins array, add HtmlWebpackPlugin and InterpolateHtmlPlugin
new HtmlWebpackPlugin(
Object.assign(
{},
{
inject: true,
template: paths.appHtml,
},
isEnvProduction
? {
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}
: undefined
)
),
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw)
This is the documentation of InterpolateHtmlPlugin
Makes some environment variables available in index.html.
The public URL is available as %PUBLIC_URL% in index.html, e.g.:
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
In production, it will be an empty string unless you specify "homepage"
in `package.json`, in which case it will be the pathname of that URL.
In development, this will be an empty string.
Problem fixed
step 1)
remove %PUBLIC_URL% with the actual path. %PUBLIC_URL%/favicon.ico with favicon.ico
Before <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
After <link rel="icon" href="favicon.ico" />
step 2) add this rule to the webpack.config.js
plugins: [new HtmlWebpackPlugin({ template: path.resolve(__dirname, "public", "index.html"),
favicon: "./public/favicon.ico",
filename: "index.html",
manifest: "./public/manifest.json",
})]
step 3) add svg support in webpack(important)
install svg-url-loader package
{
test: /\.svg$/,
use: [
{
loader: 'svg-url-loader',
options: {
limit: 10000,
},
},
],
}
Solution
npm install interpolate-html-plugin --save-dev
Add to list of plugins in webpack config
new InterpolateHtmlPlugin({PUBLIC_URL: 'static })
<link href="<%= htmlWebpackPlugin.options.favicon %>" rel="shortcut icon">
and
new HtmlWebpackPlugin({
favicon: "image/favicon.ico",
})
and
{
test: /\.(jpe?g|gif|png|ico)$/,
use: ['file-loader?name=[name].[ext]']
},
I was getting this error from create-react-app when I was serving the page from express server. It was because I was serving static pages from public folder instead of build folder.
Not working:
app.use('/', express.static(path.join(__dirname, '../public')));
Working
app.use('/', express.static(path.join(__dirname, '../build')));
Installing HtmlWebpackPlugin then import the plugin into webpack.config.js and add this into plugins section worked for me.
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
filename: './index.html',
favicon: './public/favicon.png'
}),
]
My project with py3 and django worked well in win10. But when I tried to make it work in linux, a 404 eror of static file appeared.
The error message is below.
[28/Sep/2017 09:32:57] "GET /static/home/cys/prj/.../cls_demo/static/c73f33679ff4328816dee4450044174e.jpg HTTP/1.1" 404 1955
** Settings.py **
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'collected_static')
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
os.path.join(BASE_DIR, "clsapp", "static"),
]
STATICFILES_FINDERS = (
"django.contrib.staticfiles.finders.FileSystemFinder",
"django.contrib.staticfiles.finders.AppDirectoriesFinder"
)
**Sample of how I call static files through my templates**
{% load staticfiles %}
<div class="img" style="background-image: url('{% static img_path %}')">
</div>
There is different code between win10 version and linux version. Why did this error appear? How to fix it...