diff --git a/.vs/eShopOnContainers.wiki/v15/.suo b/.vs/eShopOnContainers.wiki/v15/.suo new file mode 100644 index 0000000..ad89c0b Binary files /dev/null and b/.vs/eShopOnContainers.wiki/v15/.suo differ diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite index e040747..55b2313 100644 Binary files a/.vs/slnx.sqlite and b/.vs/slnx.sqlite differ diff --git a/Setting-the-Web-SPA-application-up.md b/Setting-the-Web-SPA-application-up.md index 1bac3f2..8bd7bb7 100644 --- a/Setting-the-Web-SPA-application-up.md +++ b/Setting-the-Web-SPA-application-up.md @@ -1,2 +1,47 @@ The Web SPA application needs a few additional steps to make it work due to its JavaScript frameworks dependencies and JS code to be built before generating the Docker Images. +## Requirements and set up + + +### Install NPM +In order to be able to build the JavaScript dependencies from command line by using npm you need to install npm globally. + +NPM is bundled with NODE.JS. Installing NPM and NODE is pretty straightforward by using the installer package available at https://nodejs.org/en/ + + +You can install the version "Recommended For Most Users" of Node which at the moment of this writing was v6.9.3 LTS and comes with a newer version of NPM. +You can see the installed NPM version with the command npm -v, as shown below. +

+ + +### Set NPM path into Visual Studio +NPM will be usually installed under this path: +C:\Program Files (x86)\nodejs. +You need to update that path in Visual Studio under the "External Web Tools" location paths, as shown below: +

+ +If you don't do this step you might have issues because of using different versions from VS or command line. +See: +http://www.hanselman.com/blog/VisualStudio2015FixingDependenciesNpmNotInstalledFromFseventsWithNodeOnWindows.aspx + + +### Build the SPA app with NPM +Now, you need to build the SPA app (TypeScript and Angular 2 based client app) with NPM. +* Open a command-prompt window and move to the root of the SPA application (src\Web\WebSPA\eShopOnContainers.WebSPA) +* Run the command npm run build:prod as shown below: +

+ + +If you get an error like "Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 6.x", then run the command npm rebuild node-sass as in the following screenshot: + +Then, run again the npm run build:prod command that should finish with no errors. + + +### Build the Docker images and Deploy the containers +At this point you can choose between any of the two following options to build and deploy the Docker containers: +1. VS 2017 based: Build and deploy in a single step from Visual Studio 2017 as explained in this page: https://github.com/dotnet/eShopOnContainers/wiki/Setting-eShopOnContainer-solution-up-in-a-Visual-Studio-2017-environment +2. CLI in Windows: Build the .NET bits with the dontnet CLI by using the Windows PowerShell script build-bits.ps1, then create the Docker images and deploy to the Docker host with "docker compose up/build", as explained in this page: https://github.com/dotnet/eShopOnContainers/wiki/Setting-the-eShopOnContainers-solution-up-in-a-Windows-CLI-environment-(dotnet-CLI,-Docker-CLI-and-VS-Code) +3. CLI in Mac: Build the .NET bits with the dontnet CLI by using the Mac Bash script +build-bits.sh, then create the Docker images and deploy to the Docker host with "docker compose up/build", as explained in this page: https://github.com/dotnet/eShopOnContainers/wiki/Setting-eShopOnContainer-solution-up-in-a-Mac,-VS-Code-and-CLI-environment + + diff --git a/img/spa/npm-versions-powershell.png b/img/spa/npm-versions-powershell.png index 398e32e..baf7410 100644 Binary files a/img/spa/npm-versions-powershell.png and b/img/spa/npm-versions-powershell.png differ diff --git a/img/spa/vs-tools-path-custom-node.png b/img/spa/vs-tools-path-custom-node.png index 035e72f..dbe9708 100644 Binary files a/img/spa/vs-tools-path-custom-node.png and b/img/spa/vs-tools-path-custom-node.png differ