We Keep Coding

How do you upgrade webpack-dev-server from v3 to v4?

I have been struggling with an issue with hot reloading where making edits in certain files would reload the app without those changes.
My initial solution was to update webpack and related modules. The first module I updated was webpack-dev-server. I went from v3 to v4 which immediately broke the app. All images and json files were getting 404'd when running the dev server.
Here is the original package.json:
{
...
"scripts": {
"dev": "set NODE_ENV=development && webpack serve --config config/webpack.dev.js --open",
"build": "set NODE_ENV=production && webpack --config config/webpack.prod.js",
"beatmarkers": "babel-node fetchAndFormatData/fetchAndFormatBeatMarkers.js"
},
"devDependencies": {
"#babel/cli": "^7.14.3",
"#babel/core": "^7.14.3",
"#babel/node": "^7.14.2",
"#babel/preset-env": "^7.14.4",
"clean-webpack-plugin": "^4.0.0-alpha.0",
"css-loader": "^5.2.6",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.1",
"lodash.clonedeep": "^4.5.0",
"node-fetch": "^2.6.1",
"node-sass": "^6.0.0",
"sass-loader": "^11.1.1",
"style-loader": "^2.0.0",
"webpack": "^5.38.1",
"webpack-cli": "^4.7.0",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.7.3"
},
"dependencies": {
"bezier-easing": "^2.1.0",
"howler": "^2.2.3",
"pixi.js": "^6.2.0"
}
}
Here are the original webpack config files:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../src/template.html')
})
],
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg|ico|pvr|mp3|fnt)$/,
type: 'asset/resource'
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
}
};
const { merge } = require('webpack-merge');
const common = require('./webpack.common');
module.exports = merge(common, {
mode: 'development',
devServer: {
historyApiFallback: true,
},
output: {
publicPath: '/'
},
devtool: "source-map"
});
This configuration produces a sources structure in chrome that looks like this:
localhost:8080
main.js
(index)
assets/images
animations
fonts
interface
When I updated webpack-dev-server to the latest version, 4.11.1, the assets/images folder no longer exists. I haven't be able to figure out how to get it back. Any help would be deeply appreciated.

Webpack breaking changes for builtin modules on Gatsby site

I've tried deploying my Gatsby site to Netlify, but I keep getting these errors for various node modules whenever I try to deploy. I've tried making a webpack.config.js file and including both of the suggested solutions to no avail. I've also tried using alias instead of fallback, adding a browser section to the package.json file which sets the modules to false, and adding a target property in the webpack.config.js file as some other stackoverflow answers have suggested, but I'm still pretty stuck. I don't have any prior experience to webpack and have been doing my best to look for answers. Is there some sort of special configuration for this with Gatsby that I'm missing?
Error message
10:37:20 AM: error Generating JavaScript bundles failed
10:37:20 AM: Can't resolve 'stream' in '/opt/build/repo/node_modules/cipher-base'
10:37:20 AM: If you're trying to use a package make sure that 'stream' is installed. If you're trying to use a local file make sure that the path is correct.
10:37:20 AM: BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
10:37:20 AM: This is no longer the case. Verify if you need this module and configure a polyfill for it.
10:37:20 AM: If you want to include a polyfill, you need to:
10:37:20 AM: - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
10:37:20 AM: - install 'stream-browserify'
10:37:20 AM: If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }
webpack.config.js
module.exports = {
target: 'node14.17',
resolve: {
fallback: {
assert: require.resolve("assert/"),
crypto: require.resolve("crypto-browserify"),
http: require.resolve("stream-http"),
https: require.resolve("https-browserify"),
os: require.resolve("os-browserify/browser"),
stream: require.resolve("stream-browserify"),
},
},
}
package.json
{
"name": "gatsby-starter-default",
"private": true,
"description": "A simple starter to get up and developing quickly with Gatsby",
"version": "0.1.0",
"author": "Kyle Mathews <mathews.kyle#gmail.com>",
"dependencies": {
"crypto-browserify": "^3.12.0",
"ethers": "^5.4.5",
"gatsby": "^3.11.1",
"gatsby-plugin-gatsby-cloud": "^2.11.0",
"gatsby-plugin-google-fonts": "^1.0.1",
"gatsby-plugin-image": "^1.11.0",
"gatsby-plugin-manifest": "^3.11.0",
"gatsby-plugin-offline": "^4.11.0",
"gatsby-plugin-react-helmet": "^4.11.0",
"gatsby-plugin-sharp": "^3.11.0",
"gatsby-source-filesystem": "^3.11.0",
"gatsby-transformer-sharp": "^3.11.0",
"https-browserify": "^1.0.0",
"os-browserify": "^0.3.0",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"web3": "^1.5.2"
},
"devDependencies": {
"prettier": "2.3.2"
},
"browser": {
"assert": false,
"crypto": false,
"http": false,
"https": false
},
"keywords": [
"gatsby"
],
"license": "0BSD",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}

In Gatsby, you can't define the webpack configuration like you did because Gatsby ships its own webpack.config.js as you can read in Gatsby's glossary.
However, Gatsby allows you to add a custom webpack configuration by exposing onCreateWebpackConfig method in your gatsby-node.js file.
So:
module.exports = {
target: 'node14.17',
resolve: {
fallback: {
assert: require.resolve("assert/"),
crypto: require.resolve("crypto-browserify"),
http: require.resolve("stream-http"),
https: require.resolve("https-browserify"),
os: require.resolve("os-browserify/browser"),
stream: require.resolve("stream-browserify"),
},
},
}
Should become:
exports.onCreateWebpackConfig = ({ actions }) => {
actions.setWebpackConfig({
resolve: {
fallback: {
assert: require.resolve("assert/"),
crypto: require.resolve("crypto-browserify"),
http: require.resolve("stream-http"),
https: require.resolve("https-browserify"),
os: require.resolve("os-browserify/browser"),
stream: require.resolve("stream-browserify"),
},
},
})
}
As I said, onCreateWebpackConfig is a method exposed only in the gatsby-node.js file so that snippet must be placed there.

Showing error while running application in production mode of electron react boilorplate

I am geeting the follwoing error when I try to run the application in production mode.
Running in development is working fine.Whe I try to run the app on production mode it is showing error.Error is file not found but file is already in the particular location.
at rejectAndCleanup (electron/js2c/browser_init.js:217:1457)
at Object.failListener (electron/js2c/browser_init.js:217:1670)
at Object.emit (events.js:315:20) {
errno: -6,
code: 'ERR_FILE_NOT_FOUND',
My package.json file
{
"name": "electron-react-webpack-boilerplate",
"version": "1.15.0",
"description": "Minimal Electron, React, PostCSS and Webpack boilerplate to help you get started with building your next app.",
"license": "MIT",
"private": false,
"repository": {
"type": "git",
"url": "https://github.com/alexdevero/electron-react-webpack-boilerplate.git"
},
"homepage": "",
"bugs": {
"url": "https://github.com/alexdevero/electron-react-webpack-boilerplate/issues"
},
"author": {
"name": "Alex Devero",
"email": "deveroalex#gmail.com",
"url": "https://github.com/alexdevero"
},
"keywords": [
"app",
"boilerplate",
"electron",
"open",
"open-source",
"postcss",
"react",
"reactjs",
"source",
"webpack"
],
"engines": {
"node": ">=9.0.0",
"npm": ">=5.0.0",
"yarn": ">=1.0.0"
},
"browserslist": [
"last 4 versions"
],
"main": "index.js",
"scripts": {
"prod": "cross-env NODE_ENV=production webpack --mode production --config webpack.build.config.js && electron --noDevServer .",
"start": "cross-env NODE_ENV=development webpack serve --hot --host 0.0.0.0 --config=./webpack.dev.config.js --mode development",
"build": "cross-env NODE_ENV=production webpack --config webpack.build.config.js --mode production",
"package": "npm run build",
"postpackage-windows": "electron-packager ./dist --out=./builds --platform=win32",
"postpackage": "electron-packager ./ --out=./builds"
},
"dependencies": {
"#material-ui/core": "^4.11.3",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.57",
"ffmpeg-static": "^4.2.8",
"fluent-ffmpeg": "^2.1.2",
"material-ui-dropzone": "^3.5.0",
"material-ui-image": "^3.3.1",
"postcss": "^8.2.8",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-player": "^2.9.0",
"react-router-dom": "^5.2.0",
"react-window": "^1.8.6",
"validator": "^13.5.2"
},
"devDependencies": {
"#babel/core": "^7.13.10",
"#babel/preset-env": "^7.13.10",
"#babel/preset-react": "^7.12.13",
"babel-loader": "^8.2.2",
"cross-env": "^7.0.3",
"css-loader": "^5.1.1",
"electron": "^12.0.0",
"electron-devtools-installer": "^3.1.1",
"electron-packager": "^15.2.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.1",
"mini-css-extract-plugin": "^1.3.9",
"notistack": "^1.0.5",
"postcss-import": "^14.0.0",
"postcss-loader": "^5.1.0",
"postcss-nested": "^5.0.5",
"postcss-preset-env": "^6.7.0",
"postcss-pxtorem": "^5.1.1",
"style-loader": "^2.0.0",
"webpack": "^5.24.4",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2"
}
}
and electron main file
'use strict'
// Import parts of electron to use
const { app, BrowserWindow,protocol } = require('electron')
const path = require('path')
const url = require('url')
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow
// Keep a reference for dev mode
let dev = false
// Broken:
// if (process.defaultApp || /[\\/]electron-prebuilt[\\/]/.test(process.execPath) || /[\\/]electron[\\/]/.test(process.execPath)) {
// dev = true
// }
if (process.env.NODE_ENV !== undefined && process.env.NODE_ENV === 'development') {
dev = true
}
// Temporary fix broken high-dpi scale factor on Windows (125% scaling)
// info: https://github.com/electron/electron/issues/9691
if (process.platform === 'win32') {
app.commandLine.appendSwitch('high-dpi-support', 'true')
app.commandLine.appendSwitch('force-device-scale-factor', '1')
}
function createWindow() {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 1024,
height: 768,
show: false,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule:true,
webSecurity:false
}
})
// and load the index.html of the app.
let indexPath
if (dev && process.argv.indexOf('--noDevServer') === -1) {
indexPath = url.format({
protocol: 'http:',
host: 'localhost:8080',
pathname: 'index.html',
slashes: true
})
}
else {
indexPath = url.format({
protocol: 'file:',
pathname: path.join(__dirname, 'dist', 'index.html'),
slashes: true
})
console.log('prod')
}
mainWindow.loadURL(indexPath).catch(err=>{
console.log(err)
})
// Don't show until we are ready and loaded
mainWindow.once('ready-to-show', () => {
mainWindow.show()
// Open the DevTools automatically if developing
if (dev) {
const { default: installExtension, REACT_DEVELOPER_TOOLS } = require('electron-devtools-installer')
installExtension(REACT_DEVELOPER_TOOLS)
.catch(err => console.log('Error loading React DevTools: ', err))
// mainWindow.webContents.openDevTools()
}
})
// Emitted when the window is closed.
mainWindow.on('closed', function() {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
protocol.interceptFileProtocol('file', (request, callback) => {
const url = request.url.substr(7) /* all urls start with 'file://' */
callback({ path: path.normalize(`${__dirname}/${url}`)})
}, (err) => {
if (err) console.error('Failed to register protocol')
})
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) {
createWindow()
}
})

Angular Fire with Universal SSR | Everything works, but the problem is while building my app [duplicate]

I'm dealing with this issue for almost two weeks now. I tried a lot of workarounds but none seems to be working. I've installed angular-fire and firebase to its latest version, tried ng add #angular/fire, configured custom webpack.config.ts, tried rolling back to every suggested previous version. None fixed this issue.
The Actual Error:
de-10#de10-LIFEBOOK-A555:~/Desktop$ node dist/server.js
internal/modules/cjs/loader.js:797
throw err;
^
Error: Cannot find module 'firebase/app'
Require stack:
- /home/de-10/Desktop/dist/server.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)
at Function.Module._load (internal/modules/cjs/loader.js:687:27)
at Module.require (internal/modules/cjs/loader.js:849:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object.<anonymous> (/home/de-10/Desktop/dist/server.js:125276:18)
at __webpack_require__ (/home/de-10/Desktop/dist/server.js:20:30)
at Module.<anonymous> (/home/de-10/Desktop/dist/server.js:125199:70)
at __webpack_require__ (/home/de-10/Desktop/dist/server.js:20:30)
at Module.<anonymous> (/home/de-10/Desktop/dist/server.js:124984:78)
at __webpack_require__ (/home/de-10/Desktop/dist/server.js:20:30) {
code: 'MODULE_NOT_FOUND',
requireStack: [ '/home/de-10/Desktop/dist/server.js' ]
}
And I can't let go of Firebase cause then I face:
ERROR in ../node_modules/#angular/fire/auth/auth.d.ts:4:28 - error TS2307: Cannot find module 'firebase/app'.
4 import { User, auth } from 'firebase/app';
~~~~~~~~~~~~~~
../node_modules/#angular/fire/firebase.app.module.d.ts:2:74 - error TS2307: Cannot find module 'firebase/app'.
2 import { auth, database, messaging, storage, firestore, functions } from 'firebase/app';
~~~~~~~~~~~~~~
../node_modules/#angular/fire/firestore/collection-group/collection-group.d.ts:2:27 - error TS2307: Cannot find module 'firebase/app'.
~~~~~~~~~~~~~
.
.
.
app/services/notification.service.ts:29:38 - error TS2339: Property 'id' does not exist on type 'QueryDocumentSnapshot<unknown>'.
29 id: snap.payload.doc.id,
~~
app/services/notification.service.ts:68:35 - error TS2339: Property 'type' does not exist on type 'DocumentChange<unknown>'.
68 return snap.payload.type
~~~~
.
.
.
package.json
{
"name": "universal-ssr",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "npm run build:ssr",
"staging": "npm run build:ssr-staging && npm run serve:ssr",
"production": "npm run build:ssr && npm run serve:ssr",
"prod": "npm run build:ssr-production && npm run serve:ssr",
"build": "ng build --prod",
"test": "ng test",
"dev-start": "ng serve",
"ng serve": "ng serve --aot",
"lint": "ng lint",
"e2e": "ng e2e",
"build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
"build:ssr-staging": "npm run build:client-and-server-bundles-staging && npm run webpack:server",
"build:ssr-production": "npm run build:client-and-server-bundles-production && npm run webpack:server",
"serve:ssr": "node dist/server.js",
"build:client-and-server-bundles": "ng build --prod --build-optimizer && ng run universal-ssr:server --bundleDependencies all",
"build:client-and-server-bundles-staging": "ng build --c=staging --build-optimizer=true --stats-json && ng run universal-ssr:server",
"build:client-and-server-bundles-production": "ng build --c=production --build-optimizer=true && ng run universal-ssr:server --bundleDependencies all",
"webpack:server": "webpack --config webpack.config.js --progress --colors",
"webpack:analyzer": "webpack-bundle-analyzer dist/browser/stats.json",
"compodoc": "npx compodoc -p src/tsconfig.app.json -o"
},
"private": true,
"dependencies": {
"#angular/animations": "^8.2.14",
"#angular/cdk": "^5.2.5",
"#angular/common": "^8.2.14",
"#angular/compiler": "^8.2.14",
"#angular/core": "^8.2.14",
"#angular/fire": "^5.4.2",
"#angular/forms": "^8.2.14",
"#angular/material": "^5.2.5",
"#angular/platform-browser": "^8.2.14",
"#angular/platform-browser-dynamic": "^8.2.14",
"#angular/platform-server": "^8.2.14",
"#angular/pwa": "^0.803.24",
"#angular/router": "^8.2.14",
"#angular/service-worker": "^8.2.14",
"#ng-bootstrap/ng-bootstrap": "^4.0.0",
"#nguniversal/express-engine": "^6.1.0",
"#nguniversal/module-map-ngfactory-loader": "^6.1.0",
"angular2-datetimepicker": "^1.1.1",
"bootstrap": "^4.4.1",
"city-timezones": "^1.2.0",
"core-js": "^2.6.11",
"cors": "^2.8.4",
"express": "^4.17.1",
"firebase": "^7.13.1",
"jquery": "^3.4.1",
"moment-timezone": "^0.5.27",
"ng-bootstrap": "^1.6.3",
"ng2-search-filter": "^0.5.1",
"ngx-clipboard": "12.2.1",
"ngx-google-places-autocomplete": "^2.0.4",
"ngx-pagination": "^3.3.1",
"ngx-spinner": "^2.0.0",
"ngx-toggle-switch": "^2.0.5",
"ngx-ui-switch": "^8.3.0",
"rxjs": "^6.5.4",
"rxjs-compat": "^6.0.0",
"save": "^2.4.0",
"ts-loader": "^4.0.0",
"tslib": "^1.10.0",
"uuid": "^3.4.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.803.23",
"#angular/cli": "^8.3.23",
"#angular/compiler-cli": "^8.2.14",
"#angular/http": "^7.2.16",
"#angular/language-service": "^8.2.14",
"#types/jasmine": "2.8.3",
"#types/jasminewd2": "^2.0.8",
"#types/node": "^6.14.9",
"codelyzer": "^5.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.4.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^2.1.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "5.4.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~3.5.3",
"webpack-cli": "^3.1.0"
}
}
webpack.config.js:
// Work around for https://github.com/angular/angular-cli/issues/7200
const path = require('path');
const webpack = require('webpack');
// change the regex to include the packages you want to exclude
const regex = /firebase\/(app|firestore)/;
module.exports = {
mode: 'production',
entry: {
// This is our Express server for Dynamic universal
server: './server.ts'
},
externals: {
'./dist/server/main': 'require("./server/main")'
},
target: 'node',
node: {
__dirname: false,
__filename: false,
},
resolve: { extensions: ['.ts', '.js'] },
target: 'node',
mode: 'none',
// this makes sure we include node_modules and other 3rd party libraries
externals: [/node_modules/, function (context, request, callback) {
// exclude firebase products from being bundled, so they will be loaded using require() at runtime.
if (regex.test(request)) {
return callback(null, 'commonjs ' + request);
}
callback();
}],
optimization: {
minimize: false
},
output: {
// Puts the output at the root of the dist folder
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
module: {
noParse: /polyfills-.*\.js/,
rules: [
{ test: /\.ts$/, loader: 'ts-loader' },
{
// Mark files inside `#angular/core` as using SystemJS style dynamic imports.
// Removing this will cause deprecation warnings to appear.
test: /(\\|\/)#angular(\\|\/)core(\\|\/).+\.js$/,
parser: { system: true },
},
]
},
plugins: [
new webpack.ContextReplacementPlugin(
// fixes WARNING Critical dependency: the request of a dependency is an expression
/(.+)?angular(\\|\/)core(.+)?/,
path.join(__dirname, 'src'), // location of your src
{} // a map of your routes
),
new webpack.ContextReplacementPlugin(
// fixes WARNING Critical dependency: the request of a dependency is an expression
/(.+)?express(\\|\/)(.+)?/,
path.join(__dirname, 'src'),
{}
)
]
};
server.ts:
import 'zone.js/dist/zone-node';
import * as express from 'express';
/* const express = require('express');
const join = require('path'); */
const compression = require('compression')
import { join } from 'path';
// Express server
const app = express();
// gzip
app.use(compression())
const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(__dirname, 'browser');/* 'dist/browser' */
// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP, ngExpressEngine, provideModuleMap } = require('./dist/server/main');
// Our Universal express-engine (found # https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine('html', ngExpressEngine({
bootstrap: AppServerModuleNgFactory,
providers: [
provideModuleMap(LAZY_MODULE_MAP)
]
}));
app.set('view engine', 'html');
app.set('views', DIST_FOLDER);
// Serve static files from /browser
app.get('*.*', express.static(DIST_FOLDER, {
maxAge: '1y'
}));
// All regular routes use the Universal engine
app.get('*', (req, res) => {
res.render('index', { req });
});
// Start up the Node server
app.listen(PORT, () => {
console.log(`Node Express server listening on http://localhost:${PORT}`);
});

You're getting this error because you're excluding firebase dependencies with this =>
const regex = /firebase\/(app|firestore)/;
module.exports = {
// this makes sure we include node_modules and other 3rd party libraries
externals: [/node_modules/, function (context, request, callback) {
// exclude firebase products from being bundled, so they will be loaded using require() at runtime.
if (regex.test(request)) {
return callback(null, 'commonjs ' + request);
}
callback();
}],
};
Remove this
if (regex.test(request)) {
return callback(null, 'commonjs ' + request);
}
and your app will be fine.

One workaround is to install npm packages (firebase and #angular/fire) beside the dist folder and then run the deployment script.

How to build the static file for use in deployment

With my current configuration of node and webpack, I am able to run the dev-server and develop my application.
I am however unable to create the static bundle.js that i could use for a deployment on my website.
How can I configure my webpack.js files and package.json command to make it build the required bundle file ?
When I run npm build, nothing happens
When I run npm deploy, i get the following error message :
Usage: npm <command>
where <command> is one of:
access, add-user, adduser, apihelp, author, bin, bugs, c,
cache, completion, config, ddp, dedupe, deprecate, dist-tag,
dist-tags, docs, edit, explore, faq, find, find-dupes, get,
help, help-search, home, i, info, init, install, issues, la,
link, list, ll, ln, login, logout, ls, outdated, owner,
pack, ping, prefix, prune, publish, r, rb, rebuild, remove,
repo, restart, rm, root, run-script, s, se, search, set,
show, shrinkwrap, star, stars, start, stop, t, tag, team,
test, tst, un, uninstall, unlink, unpublish, unstar, up,
update, upgrade, v, verison, version, view, whoami
npm <cmd> -h quick help on <cmd>
npm -l display full usage info
npm faq commonly asked questions
npm help <term> search for help on <term>
npm help npm involved overview
Specify configs in the ini-formatted file:
C:\Users\Sébastien\.npmrc
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config
Following is my configuration :
package.json
{
"license": "UNLICENSED",
"private": true,
"version": "1.0.0",
"webPath": "web/",
"nodePath": "node_modules/",
"devDependencies": {
"autoprefixer": "^6.3.1",
"exports-loader": "^0.6.2",
"grunt": "^0.4.5",
"grunt-autoprefixer": "^3.0.3",
"grunt-contrib-concat": "^0.5.1",
"grunt-contrib-cssmin": "^0.14.0",
"grunt-contrib-less": "^1.1.0",
"grunt-contrib-uglify": "^0.11.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-css-url-rewrite": "^0.3.5",
"grunt-cssjoin": "^0.3.0",
"grunt-postcss": "^0.7.1",
"imports-loader": "^0.6.5",
"matchdep": "^1.0.0",
"redux-devtools": "^3.0.2",
"redux-devtools-dock-monitor": "^1.0.1",
"redux-devtools-log-monitor": "^1.0.4",
"webpack-shell-plugin": "^0.4.2"
},
"repository": {
"type": "git",
"url": ""
},
"dependencies": {
"babel-core": "^6.4.0",
"babel-loader": "^6.2.1",
"babel-plugin-transform-runtime": "^6.4.3",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"babel-runtime": "^6.3.19",
"grunt-postcss": "^0.7.1",
"history": "^1.17.0",
"i18next": "^2.5.1",
"isomorphic-fetch": "^2.2.1",
"lodash": "^4.11.1",
"radium": "^0.16.2",
"rc-switch": "^1.4.2",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"react-hot-loader": "^1.3.0",
"react-redux": "^4.1.2",
"react-router": "^1.0.3",
"react-router-redux": "^3.0.0",
"redux": "^3.1.6",
"redux-thunk": "^2.1.0",
"selfupdate": "^1.1.0",
"webpack": "^1.12.11",
"webpack-dev-server": "^1.14.1",
"whatwg-fetch": "^0.11.0"
},
"scripts": {
"start": "node webpack.dev-server.js",
"build": "webpack",
"deploy": "NODE_ENV=production webpack -p --config webpack.production.config.js"
}
}
webpack.config.js
var path = require('path');
var webpack = require('webpack');
var node_modules_dir = path.join(__dirname, 'node_modules');
var devFlagPlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
});
console.log(__dirname);
var config = {
entry: [
'babel-polyfill',
'webpack-dev-server/client?http://127.0.0.1:3000',
'webpack/hot/only-dev-server',
'./app/Resources/react/app.js'
],
output: {
path: path.join(__dirname, 'web/js'),
filename: 'bundle.js',
publicPath: 'http://127.0.0.1:3000/static/'
},
debug: true,
devtool: 'eval',
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
devFlagPlugin
],
module: {
loaders: [
{
loaders: ["react-hot","babel-loader?plugins=transform-runtime&presets[]=es2015&presets[]=stage-0&presets[]=react"],
test: /\.js$/,
include: path.join(__dirname, 'app/Resources/react')
}
]
}
};
module.exports = config;
/*
new webpack.ProvidePlugin({
'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
})
*/
webpack.dev-server.js
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
historyApiFallback: true,
quiet: false,
noInfo: false,
contentBase: "./assets"
}).listen(3000, 'localhost', function (err, result) {
if (err) {
console.log(err);
}
console.log('Listening at localhost:3000');
});
webpack.production.config.js
var path = require('path');
var node_modules_dir = path.resolve(__dirname, 'node_modules');
var config = {
entry: [
'babel-polyfill',
'./app/Resources/react/app.js'
],
output: {
path: path.join(__dirname, 'web/js'),
filename: 'bundle.js'
},
module: {
loaders: [
{
loaders: ["babel-loader?plugins=transform-runtime&presets[]=es2015&presets[]=stage-0&presets[]=react"],
test: /\.js$/,
include: path.join(__dirname, 'src/react')
}
]
}
};
module.exports = config;

you missed run
npm run deploy
run is required for all scripts. To help with common tasks npm knows how to use several preconfigured scripts such as start and test which is why npm start is an equivalent of npm run start.