从头开始学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。