how to deploy angularjs app using webpack after ug

Question

I need to deploy an angularjs app.

after I used webpack to uglify the production app. The below commands appeared.

The app is working fine when I run webpack-dev-server

Hash: 06f0e2d056b597c4e43f
Version: webpack 1.13.2
Time: 16533ms
    Asset     Size  Chunks             Chunk Names
bundle.js  4.37 MB       0  [emitted]  main
   [0] multi main 28 bytes {0} [built]
  [13] ./src/index.js 2.69 kB {0} [built]
    + 12 hidden modules

WARNING in bundle.js from UglifyJs
Side effects in initialization of unused variable $element [./~/angular/angular.js:9552,0]
Dropping unreachable code [./~/angular/angular.js:20263,0]
Dropping unused variable expression [./~/angular/angular.js:15347,0]
Dropping unused function includes [./~/angular/angular.js:799,0]
Dropping unused function nodesetLinkingFn [./~/angular/angular.js:10162,0]
Dropping unused function directiveLinkingFn [./~/angular/angular.js:10169,0]
Side effects in initialization of unused variable check [./~/markdown/lib/markdown.js:1044,0]
Dropping unused variable lines [./~/markdown/lib/markdown.js:350,0]
Dropping unused variable number_list [./~/markdown/lib/markdown.js:427,0]
Side effects in initialization of unused variable old_tree [./~/markdown/lib/markdown.js:705,0]
Dropping unused variable lastIndex [./~/markdown/lib/markdown.js:775,0]
Condition always false [./~/markdown/lib/markdown.js:1718,0]
Dropping unreachable code [./~/markdown/lib/markdown.js:1720,0]

But when I try to run the uglified production app, the same error keeps popping up. (See below)

the command I ran was node ./src/bundle.js (the output after uglified)

C:\Users\User\Desktop\udemy\Website\AngularJS\Leadiq\src\bundle.js:21
O=x||k;else{O=x||S,_=[];for(var V in o)Nr.call(o,V)&&"$"!==V.charAt(0)&&_.push(V)}for(w=_.length,T=new Array(w),f=0;f<w;f++)if(C=o===_?f:_[f],E=o[C],A=O(C,E,f),$[A])M=$[A],delete $[A],I[A]=M,T[f]=M;else{if(I[A])throw r(T,function(e){e&&e.scope&&($[e.id]=e)}),s("dupes","Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: {0}, Duplicate key: {1}, Duplicate value: {2}",h,A,E);T[f]={id:A,scope:void 0,clone:void 0},I[A]=!0}for(var D in $){if(M=$[D],N=pe(M.clone),i.leave(N),N[0].parentNode)for(f=0,v=N.length;f<v;f++)N[f][a]=!0;M.scope.$destroy()}for(f=0;f<w;f++)if(C=o===_?f:_[f],E=o[C],M=T[f],M.scope){g=j;do g=g.nextSibling;while(g&&g[a]);c(M)!=g&&i.move(pe(M.clone),null,j),j=l(M),u(M.scope,f,y,E,b,C,w)}else d(function(e,t){M.scope=t;var n=p.cloneNode(!1);e[e.length++]=n,i.enter(e,null,j),j=n,M.clone=e,I[M.id]=M,u(M.scope,f,y,E,b,C,w)});$=I})}}}}],Ua="ng-hide",Fa="ng-hide-animate",qa=["$animate"

ReferenceError: window is not defined
    at Object.<anonymous> (C:\Users\User\Desktop\udemy\Website\AngularJS\Leadiq\src\bundle.js:21:8320)
    at t (C:\Users\User\Desktop\udemy\Website\AngularJS\Leadiq\src\bundle.js:1:169)
    at Object.<anonymous> (C:\Users\User\Desktop\udemy\Website\AngularJS\Leadiq\src\bundle.js:21:8704)
    at t (C:\Users\User\Desktop\udemy\Website\AngularJS\Leadiq\src\bundle.js:1:169)
    at Object.<anonymous> (C:\Users\User\Desktop\udemy\Website\AngularJS\Leadiq\src\bundle.js:22:1478)
    at t (C:\Users\User\Desktop\udemy\Website\AngularJS\Leadiq\src\bundle.js:1:169)
    at Object.<anonymous> (C:\Users\User\Desktop\udemy\Website\AngularJS\Leadiq\src\bundle.js:1:289)
    at t (C:\Users\User\Desktop\udemy\Website\AngularJS\Leadiq\src\bundle.js:1:169)
    at C:\Users\User\Desktop\udemy\Website\AngularJS\Leadiq\src\bundle.js:1:256
    at Object.<anonymous> (C:\Users\User\Desktop\udemy\Website\AngularJS\Leadiq\src\bundle.js:1:261)

My Github repo is via this link Github repo can someone please assist and advise?

Answer 1

If your web app can run on webpack-dev-server, as long as your code can survive uglification (uglify plugin). All you need is to set up your own mini server, to render your static/ dynamic assets.

I will explain from node.js and npm method.

IF you are deploying to heroku, you will need to use 2 scripts postinstall and start. postinstall basically means you will perform webpack -p task, production ready all your js files into a single bundled file based on your webpack.config.js. start will trigger the mini server to render web app.

Both commands will automatically be run on heroku once you push the codes to heroku master using git push heroku master. npm run postinstall will be run first follow by npm start.

DO NOT USE webpack-dev-server for any form of deployment.

Kindly refer to my github repo for more details.

Github repo