從頭開始學eShopOnContainers——設置WebSPA單頁應用程序

1、簡介

　　Web SPA單頁應用程序須要一些額外的步驟才能使其工做，由於它須要在生成Docker鏡像以前構建JavaScript框架依賴項和JS代碼。

2、安裝基礎環境

一、安裝NPM

　　爲了可以使用npm從命令行構建JavaScript依賴項，您須要全局安裝npm。因爲npm和nodejs捆綁在一塊兒，所在只須要從https://nodejs.org/en/下載推薦版本安裝便可。安裝完成後可經過「npm -v」查看版本信息，驗證是否安裝成功。

　　

二、安裝Angular CLI

　　編譯Web SPA單頁應用程序須要全局安裝Angular CLI，使用「npm install -g @angular/cli」命令便可完成安裝，安裝完成後可經過「ng version」查看版本信息，驗證是否安裝成功。

　　

三、在VisualStudio中設置npm路徑信息

　　在VisualStudio的菜單「工具」->"選項"設置中，添加nodejs路徑，注意必須添加至「VSInstalledExternalTools」前面。

　　

3、使用npm構建WebSPA單頁應用程序

一、切換至源代碼目錄，執行「npm install」安裝全部依賴，並重建node-sass。

cd /d D:\TFS2018\eShopOnContainers-dev\src\Web\WebSPA
npm  install
npm audit fix
npm rebuild node-sass

二、構建構建WebSPA單頁應用程序

npm run build:prod

三、將「docker-compose」設置爲默認啓動項目，按F5或者點運行。

　　項目正常啓動後，便可正常打開WebSPA單頁應用程序網頁: http://localhost:5104。