Webpack not compiling files on Heroku - django

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?

Related

ERR_CONNECTION_REFUSED with Django and Vue.js bundle files

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.

ERROR in multi (webpack)-dev-server/client?http://localhost:8080 ./src when use webpack4.2.0

when i use webpack4.2.0, play 'run start', show errors follow:
WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.
ERROR in multi (webpack)-dev-server/client?http://localhost:8001 ./src
Module not found: Error: Can't resolve './src' in '/Users/xudengwei/projects/xudengwei/myOpenGithub/angular5-scaffold'
# multi (webpack)-dev-server/client?http://localhost:8001 ./src
ℹ 「wdm」: Failed to compile.
#
my configure as follow:
webpack.common.js:
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/app/main.ts'
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader"
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
inject: true
})
]
};
webpack.dev.js:
var path = require('path');
var webpackMerge = require('webpack-merge');
var commonConfig = require('./webpack.common.js');
module.exports = webpackMerge(commonConfig, {
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
chunkFilename: '[id].chunk.js'
},
module: {
rules: []
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
inject: true
})
],
devServer: {
devServer: {
contentBase: './dist'
},
}
});
someone knows the reason?thanks
I also just get this error like you got and its was solved when i specify webpack config file. Try to add --config when you run webpack-dev-server. Ex. webpack-dev-server --config webpack.dev.js
what command did you run in the terminal? It looks to me like you used run start ./src and so it's complaining that it can't find the location ./scr
Try just running run start with no additional arguments. That did the trick for me

Visual Studio 2017 .Net Core 2.0 Angular Publish Fails

I am running a Windows 7 Professional PC, using Visual Studio 2017 version 15.4.5. When I created a .Net Core 2.0 project and selected the type of Angular, it ran fine out of the box.
Then I added font awesome and primeng (https://www.primefaces.org/primeng/#/) in what I think is the standard way, i.e., adding references to the package.json file, then to the nonTreeShakableModules section of the webpack.config.vendor.js file, then adding modules to app.module.shared.ts. This was primeng version 5.0.2 and font-awesome version 4.7.0.
In development, all is good - everything is running fine. However, when I try to publish, I see the following lines in the Output window:
npm install
removed 3 packages in 3.389s
node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod
What? Why would it remove 3 packages?
And then the publish attempt fails. After the failure, I see that 3 of my npm packages have been UNINSTALLED:
1) #types/jquery
2) font-awesome
3) primeng
And I see a bunch of "Module not found" errors - of course they are not found, because they were just removed!
I looked at the .csproj file, and I see the following:
<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
<Exec Command="npm install" />
<Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod" />
<Exec Command="node node_modules/webpack/bin/webpack.js --env.prod" />
So, as far as I can tell, the "npm install" command, or something triggered by that command, is removing these modules. I have to re-install them after every Publish attempt.
So, my question: Why are these packages being removed, and what can I do about it?
My package.json file:
{
"name": "CaseManagementReporting",
"private": true,
"version": "0.0.0",
"scripts": {
"test": "karma start ClientApp/test/karma.conf.js"
},
"dependencies": {
"#angular/animations": "4.2.5",
"#angular/common": "4.2.5",
"#angular/compiler": "4.2.5",
"#angular/compiler-cli": "4.2.5",
"#angular/core": "4.2.5",
"#angular/forms": "4.2.5",
"#angular/http": "4.2.5",
"#angular/platform-browser": "4.2.5",
"#angular/platform-browser-dynamic": "4.2.5",
"#angular/platform-server": "4.2.5",
"#angular/router": "4.2.5",
"#ngtools/webpack": "1.5.0",
"#types/webpack-env": "1.13.0",
"angular2-template-loader": "0.6.2",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.1",
"awesome-typescript-loader": "3.2.1",
"bootstrap": "3.3.7",
"css": "2.2.1",
"css-loader": "0.28.4",
"es6-shim": "0.35.3",
"event-source-polyfill": "0.0.9",
"expose-loader": "0.7.3",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"font-awesome": "4.7.0",
"html-loader": "0.4.5",
"isomorphic-fetch": "2.2.1",
"jquery": "3.2.1",
"json-loader": "0.5.4",
"preboot": "4.5.2",
"primeng": "5.0.2",
"raw-loader": "0.5.1",
"reflect-metadata": "0.1.10",
"rxjs": "5.4.2",
"style-loader": "0.18.2",
"to-string-loader": "1.1.5",
"typescript": "2.4.1",
"url-loader": "0.5.9",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.2",
"webpack-merge": "4.1.0",
"zone.js": "0.8.12"
},
"devDependencies": {
"#types/chai": "4.0.1",
"#types/jasmine": "2.5.53",
"#types/jquery": "3.2.1",
"chai": "4.0.2",
"jasmine-core": "2.6.4",
"karma": "1.7.0",
"karma-chai": "0.1.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-jasmine": "1.1.0",
"karma-webpack": "2.0.3"
}
}
My tsconfig.json file:
{
"compilerOptions": {
"module": "es2015",
"moduleResolution": "node",
"target": "es5",
"sourceMap": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"skipDefaultLibCheck": true,
"skipLibCheck": true, // Workaround for https://github.com/angular/angular/issues/17863. Remove this if you upgrade to a fixed version of Angular.
"strict": true,
"lib": [ "es6", "dom" ],
"types": [ "webpack-env", "jquery" ]
},
"exclude": [ "bin", "node_modules" ],
"atom": { "rewriteTsconfig": false }
}
My webpack.config.vendor.js file:
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');
const treeShakableModules = [
'#angular/animations',
'#angular/common',
'#angular/compiler',
'#angular/core',
'#angular/forms',
'#angular/http',
'#angular/platform-browser',
'#angular/platform-browser-dynamic',
'#angular/router',
'zone.js'
];
const nonTreeShakableModules = [
'bootstrap',
'bootstrap/dist/css/bootstrap.css',
'es6-promise',
'es6-shim',
'event-source-polyfill',
'jquery',
'font-awesome/css/font-awesome.css',
'primeng/resources/themes/bootstrap/theme.css',
'primeng/resources/primeng.min.css',
'primeng/primeng'
];
const allModules = treeShakableModules.concat(nonTreeShakableModules);
module.exports = (env) => {
const extractCSS = new ExtractTextPlugin('vendor.css');
const isDevBuild = !(env && env.prod);
const sharedConfig = {
stats: { modules: false },
resolve: { extensions: [ '.js' ] },
module: {
rules: [
{ test: /\.(png|woff|woff2|eot|ttf|svg|jpg|jpeg|gif)(\?|$)/, use: 'url-loader?limit=100000' }
]
},
output: {
publicPath: 'dist/',
filename: '[name].js',
library: '[name]_[hash]'
},
plugins: [
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
new webpack.ContextReplacementPlugin(/\#angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580
new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)#angular/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/14898
new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100
]
};
const clientBundleConfig = merge(sharedConfig, {
entry: {
// To keep development builds fast, include all vendor dependencies in the vendor bundle.
// But for production builds, leave the tree-shakable ones out so the AOT compiler can produce a smaller bundle.
vendor: isDevBuild ? allModules : nonTreeShakableModules
},
output: { path: path.join(__dirname, 'wwwroot', 'dist') },
module: {
rules: [
{ test: /\.css(\?|$)/, use: extractCSS.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }) }
]
},
plugins: [
extractCSS,
new webpack.DllPlugin({
path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
name: '[name]_[hash]'
})
].concat(isDevBuild ? [] : [
new webpack.optimize.UglifyJsPlugin()
])
});
const serverBundleConfig = merge(sharedConfig, {
target: 'node',
resolve: { mainFields: ['main'] },
entry: { vendor: allModules.concat(['aspnet-prerendering']) },
output: {
path: path.join(__dirname, 'ClientApp', 'dist'),
libraryTarget: 'commonjs2',
},
module: {
rules: [
{ test: /\.css(\?|$)/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize'] }
]
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, 'ClientApp', 'dist', '[name]-manifest.json'),
name: '[name]_[hash]'
})
]
});
return [clientBundleConfig, serverBundleConfig];
}
My webpack.config.js file:
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const AotPlugin = require('#ngtools/webpack').AotPlugin;
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
module.exports = (env) => {
// Configuration in common to both client-side and server-side bundles
const isDevBuild = !(env && env.prod);
const sharedConfig = {
stats: { modules: false },
context: __dirname,
resolve: { extensions: [ '.js', '.ts' ] },
output: {
filename: '[name].js',
publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
},
module: {
rules: [
{ test: /\.ts$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '#ngtools/webpack' },
{ test: /\.html$/, use: 'html-loader?minimize=false' },
{ test: /\.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
]
},
plugins: [new CheckerPlugin()]
};
// Configuration for client-side bundle suitable for running in browsers
const clientBundleOutputDir = './wwwroot/dist';
const clientBundleConfig = merge(sharedConfig, {
entry: { 'main-client': './ClientApp/boot.browser.ts' },
output: { path: path.join(__dirname, clientBundleOutputDir) },
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
})
].concat(isDevBuild ? [
// Plugins that apply in development builds only
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
] : [
// Plugins that apply in production builds only
new webpack.optimize.UglifyJsPlugin(),
new AotPlugin({
tsConfigPath: './tsconfig.json',
entryModule: path.join(__dirname, 'ClientApp/app/app.module.browser#AppModule'),
exclude: ['./**/*.server.ts']
})
])
});
// Configuration for server-side (prerendering) bundle suitable for running in Node
const serverBundleConfig = merge(sharedConfig, {
resolve: { mainFields: ['main'] },
entry: { 'main-server': './ClientApp/boot.server.ts' },
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./ClientApp/dist/vendor-manifest.json'),
sourceType: 'commonjs2',
name: './vendor'
})
].concat(isDevBuild ? [] : [
// Plugins that apply in production builds only
new AotPlugin({
tsConfigPath: './tsconfig.json',
entryModule: path.join(__dirname, 'ClientApp/app/app.module.server#AppModule'),
exclude: ['./**/*.browser.ts']
})
]),
output: {
libraryTarget: 'commonjs',
path: path.join(__dirname, './ClientApp/dist')
},
target: 'node',
devtool: 'inline-source-map'
});
return [clientBundleConfig, serverBundleConfig];
};
I found a solution for this problem (which sadly just led to another, but...).
I believe that this was/is a bug in the version of NPM which I was using. I had npm version 5.0.3 installed. After hours of searching, I came across this GitHub discussion: here in which many people complained about the npm install command actually removing modules. I downgraded my npm instance from 5.0.3 to 3.10.3 (which is what my home environment was using), and I found that the packages were no longer removed. (Why anybody would write something that would remove packages with a command like "npm install" is utterly beyond me, but read the linked article and you will see the frustration this has caused!)
As a .Net developer, of course, I did not even know how to downgrade my npm instance, so I had to look that up. For those who might be helped, the command is: npm install -g npm#3.10.3. I found that here
So, now my publish process runs without deleting packages, which is what I asked about in my question. That issue is resolved, so I am treating this as an answer.
But this is not to say that the downgrade solved all of my problems. When I attempted to publish, I got new errors, which I think are unrelated to the npm version:
Can't resolve './../$$_gendir/ClientApp/app/app.module.browser.ngfactory' in 'C:\Projects\ForthrightProjects\CaseManagementReporting\CaseManagementReporting\ClientApp' CaseManagementReporting Module not found 0
Can't resolve './../$$_gendir/ClientApp/app/app.module.server.ngfactory' in 'C:\Projects\ForthrightProjects\CaseManagementReporting\CaseManagementReporting\ClientApp' CaseManagementReporting Module not found 0
Yet more Googling found this article: here
which suggests commenting out this line in the webpack.config.js file:
// { test: /.ts$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '#ngtools/webpack' },
Or, alternatively, changing it to this:
{ test: /.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },
I tried both options, and both of them worked to get past the errors above. HOWEVER, I now am faced with yet another error in attempting to publish:
ERROR in Metadata version mismatch for module: C:/Projects/ForthrightProjects/CaseManagementReporting/CaseManagementReporting/node_modules/primeng/components/dom/domhandler.d.ts, found version 4, expected 3
So, after some additional searching and trials and errors, I came across this link: here
One of the suggestions there was to change the primeng entry in the project.json file to this: "primeng": "^4.2.4"
Amazingly enough, this actually worked. I am now able to publish. Hopefully successful deployment of the published files will not be so terribly painful.
To .Net developers: Remember back when you just added a package with NuGet, and everything just worked? Sigh...

Livereload with Ember-CLI; only reload changed assets

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

require.js project optimization: can't find the dir value

Here is my project folder structure:
project
|--Gruntfile.js
|--build
|--public
|--|--js
|-----|--lib
|-----|--module
|-----|--main.js
my build config is in the Gruntfile.js
requirejs: {
compileProject: {
baseUrl: 'js',
appDir: 'public',
dir: 'build',
modules: [
{ name: 'main'}
],
paths: {
main: 'main',
jquery: 'lib/jquery-1.10.0.min.js'
}
}
}
but when I run it, the terminal tell me wrong:
Running "requirejs:compileProject" (requirejs) task
[Error: Error: Missing either an "out" or "dir" config value. If using "appDir" for a full project optimization, use "dir". If you want to optimize to one file, use "out".
however I have already set the dir value, so what's wrong with my code?
Your requirejs options should be specified within options:
requirejs: {
compileProject: {
options : {
baseUrl: 'js',
appDir: 'public',
dir: 'build',
modules: [
{ name: 'main'}
],
paths: {
main: 'main',
jquery: 'lib/jquery-1.10.0.min.js'
}
}
}
}