deploying vueJs app on Azure Web App

Question

I have created a vueJs App.

I want to deploy it on Azure web app.

    "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "prod": "webpack --progress --config build/webpack.prod.conf.js",
    "start": "npm run prod",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  },
  "dependencies": {
    "moment": "^2.20.1",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "webpack": "^3.6.0"
  }

This is how package.json looks

When I deploy, I get following error from Azure.

webpack: not found

Error Log

INFO  - Container logs
Generating app startup command
Found scripts.start in package.json
Running npm start
> [email protected] start /home/site/wwwroot
> npm run prod
> [email protected] prod /home/site/wwwroot
> webpack --progress --config build/webpack.prod.conf.js
sh: 1: webpack: not found

Looks like missing webpack.

Am I deploying in a correct way? If not, whats the correct way?

Answer 1

When you use Vue.js on production or test (non-development) you should run build.

npm run build

After build, webpack extract all files and folders as "deployable" version of your application in "dist" folder in your root.

When you use files in "dist" directory, you wont need any kind of npm or webpack dependency.

If you really need webpack or development on your azure server, you might try install webpack globally.

npm install [email protected] -g