I've built a simple SPA CRUD web app with Django, Vue and Docker(-compose).
Since I've finished developing the app, I'm now preparing for the production environment, that is, using bundle.js and bundle.css files.
When I try to load the main page, http://localhost:8000, no CSS or JS
are being loaded because I'm getting this error in the browser's console:
GET http://0.0.0.0:8080/bundle.css net::ERR_CONNECTION_REFUSED
GET http://0.0.0.0:8080/bundle.js net::ERR_CONNECTION_REFUSED
I really don't know why it is giving that error or how to fix it.
This is my vue.config.js file:
const webpack = require("webpack");
const BundleTracker = require("webpack-bundle-tracker");
module.exports = {
publicPath: "http://0.0.0.0:8080/",
outputDir: "./dist/",
filenameHashing: false,
configureWebpack: {
plugins: [
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
})
]
},
chainWebpack: config => {
config
.plugin("BundleTracker")
.use(BundleTracker, [{ filename: "./webpack-stats.json" }]);
config.output.filename("bundle.js");
config.optimization.splitChunks(false);
config.optimization.delete("splitChunks");
config.resolve.alias.set("__STATIC__", "static");
config.devServer
.hotOnly(true)
.watchOptions({ poll: 1000 })
.https(false)
.disableHostCheck(true)
.headers({ "Access-Control-Allow-Origin": ["*"] });
},
// uncomment before executing 'npm run build'
css: {
extract: {
filename: "bundle.css",
chunkFilename: "bundle.css"
}
}
};
This is part of my settings.py file:
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "assets"),
os.path.join(BASE_DIR, "frontend/dist"),
]
# STATIC_ROOT = "" # The absolute path to the dir for collectstatic
WEBPACK_LOADER = {
'DEFAULT': {
'BUNDLE_DIR_NAME': 'dist/',
'STATS_FILE': os.path.join(BASE_DIR, 'frontend', 'webpack-stats.json'),
}
}
When I run the npm run build command I get notified that both the bundle.css and the bundle.js files have been generated:
File Size Gzipped
dist/bundle.js 150.73 KiB 51.05 KiB
dist/bundle.css 192.06 KiB 26.89 KiB
Images and other types of assets omitted.
DONE Build complete. The dist directory is ready to be deployed.
INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
I really don't know why it is giving that ERR_CONNECTION_REFUSEDerror or how to fix it.
For production remove publicPath from your vue config file, I suppose you used that for development purposes, but in production you should only create the bundle and serve it to the user.
What's probably happening is that in your Docker setup you don't have the webpack dev server running (and you don't need it), thus you hit a connection refused error.
Related
I have configured cache in settings.py in my Django project as follows:
CACHE_MIDDLEWARE_ALIAS = 'Cache'
CACHE_MIDDLEWARE_SECONDS = 60
CACHE_MIDDLEWARE_KEY_PREFIX = ''
CACHES = {
'default': {
'BACKEND': 'django.core.cache.backends.memcached.MemcachedCache',
'LOCATION': '127.0.0.1:11211',
}
}
Cache service is running after I typed: $ memcached -p 11211 &
But when I try to run server, the following error shows up:
django.core.cache.backends.base.InvalidCacheBackendError: Could not find config for 'Cache' in settings.CACHES
What I am doing wrong?
The CACHE_MIDDLEWARE_ALIAS setting tells the django middleware which cache to use: https://docs.djangoproject.com/en/3.1/ref/settings/#cache-middleware-alias
Here it is set to 'Cache' but there is no cache of that name in your CACHES setting. You probably don't want a different alias and should just use the default of 'default' so just remove that setting.
I have just started to study Webpack and trying to setup development environment based on Webpack4.
I put one script for executing dev server in package.json like below.
# package.json
"scripts": {
"dev": "webpack-dev-server --mode development",
}
However, there was an error message like below when I execute'npm run dev' on my terminal.
ERROR in ./node_modules/destroy/index.js
Module not found: Error: Can't resolve 'fs' in 'D:\webpack-setup\node_modules\destroy'
# ./node_modules/destroy/index.js 14:17-30
So, I installed 'webpack-node-externals' and put configuration in 'webpack.config.js' like below.
# install webpack-node-externals module
# npm install --save-dev webpack-node-externals
# webpack.config.js
const nodeExternals = require('webpack-node-externals');
module.exports = {
target: 'web',
externals: [nodeExternals()],
devServer: {
host: 'localhost',
port: 3000,
open: true
}
};
When a browser was opened, there was an error on a browser like below.
Uncaught ReferenceError: require is not defined
at eval (external_"url":1)
at Object.url (main.js:289)
at __webpack_require__ (main.js:20)
at Object.eval (webpack:///(:3000/webpack)-dev-server/client?:6:11)
at eval (webpack:///(:3000/webpack)-dev-server/client?:249:30)
at Object../node_modules/webpack-dev-server/client/index.js?http://localhost:3000 (main.js:97)
at __webpack_require__ (main.js:20)
at eval (webpack:///multi_(:3000/webpack)-dev-server/client?:1:1)
at Object.0 (main.js:190)
at __webpack_require__ (main.js:20)
I'm not sure this error is related to 'webpack-node-externals' module or not,
but could I get some guide for solving this situation?
I think you have a problem in your config file. I ran a sample with this and it worked:
const nodeExternals = require('webpack-node-externals')
module.exports = {
target: 'web',
externals: [nodeExternals()],
devServer: {
host: 'localhost',
port: 3000,
open: true,
},
}
I want to use Webpack to compile files for my Django app on Heroku, and am using webpack-bundle-tracker to keep track of the modules created in webpack-stats.json. When I run webpack locally, it compiles all the files and bundles them into the output directory, no problem. But when I run webpack on Heroku, it shows me that all the chunks were emitted, but none of the files appear in the output directory. When I check the content of webpack-stats.json it always says "status" : "compiling".
Here's the content of my webpack.config.js.
var path = require('path')
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')
module.exports = {
context: __dirname,
entry: './assets/js/index',
output: {
path: path.resolve('./assets/bundles/'),
filename: '[name].js',
},
plugins: [
new BundleTracker({filename: './webpack-stats.json'}),
],
module: {
loaders: [
{ test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react']
}
}
]
},
resolve: {
modulesDirectories: ['node_modules', 'bower_components'],
extensions: ['', '.js', '.jsx'],
},
}
I want webpack to bundle my assets the same way on heroku as it does on my local machine. How can I accomplish that?
How can I set up collectfast for django on heroku?
This is assuming I've already successfully set up static files hosting and serving from Amazon S3.
1) To disable heroku's automatic collectstatic, run:
heroku config:set DISABLE_COLLECTSTATIC=1
2) Add the following to settings.py to use a table in your database for the collectfast's caching. Commit and push the change to heroku.
CACHES = {
'default': {
'BACKEND': 'django.core.cache.backends.locmem.LocMemCache',
},
'collectfast': {
'BACKEND': 'django.core.cache.backends.db.DatabaseCache',
'LOCATION': 'collectfast_cache',
'TIMEOUT': 60,
'OPTIONS': {
'MAX_ENTRIES': 10000
},
},
}
COLLECTFAST_CACHE = 'collectfast'
4) To create the required cache table in the database, run:
heroku run createcachetable
5) To restore heroku's automatic collectstatic, run:
heroku config:unset DISABLE_COLLECTSTATIC
Each deploy will now correctly use collectfast to collect modified static files to s3.
I'm used to building a asset compilation system with Grunt or Gulp. Using Gulp's livereload and the Chrome livereload plugin, I have a pretty sweet system where it watches for changes of certain file types and reloads only the file that were changed. With ember-cli, when I change a CSS file, it just reloads the entire page, rather than just reloading the CSS file. This gets to be a pain when I'm trying to style a deeply nested process. Any ideas/thoughts on how to get this working with Ember CLI correctly?
I believe this is still a work in progress with Ember CLI and is planned for a future release, or is depending on a fix in Broccoli. See https://github.com/stefanpenner/ember-cli/issues/2371
What I've done to get around this probably isn't ideal, but I end up using grunt, and use a shell command to run ember build, copy the output to a different directory that is being served by another server (in my case IIS express), and then just manually watch my files.
Here are the snippets from my grunt file. I'm sure you can accomplish the same using Gulp.
shell: {
prod: {
command: 'ember build --environment production'
},
dev: {
command: 'ember build'
}
},
copy: {
dev: {
files: [{
src: '**',
dest: '../Server/Content/js',
cwd: 'dist/content/js',
expand: true
}, {
src: '**',
dest: '../Server/content/css',
cwd: 'dist/content/css',
expand: true
}, {
src: 'dist/index.html',
dest: '../Server/Views/Home/Root.cshtml'
}]
}
},
watch: {
dev: {
files: [
'app/**/*.js', 'app/**/*.hbs'
],
tasks: ['_buildDev'],
options: {
livereload: true
}
},
less: {
files: [
'app/**/*.less'
],
tasks: ['shell:dev', 'copy:dev']
},
css: {
files: [
'../Server/Content/css/**/*'
],
options: {
livereload: true
}
}
}
Official support is in the works, meanwhile try this ember-addon https://www.npmjs.com/package/ember-cli-styles-reloader