diff --git a/.vs/VSWorkspaceState.json b/.vs/VSWorkspaceState.json index 9418fb2..f044b85 100644 --- a/.vs/VSWorkspaceState.json +++ b/.vs/VSWorkspaceState.json @@ -2,6 +2,6 @@ "ExpandedNodes": [ "" ], - "SelectedNode": "\\07.-Setting-up-the-Xamarin-mobile-apps.md", + "SelectedNode": "\\Home.md", "PreviewInSolutionExplorer": false } \ No newline at end of file diff --git a/.vs/eShopOnContainers.wiki/v15/.suo b/.vs/eShopOnContainers.wiki/v15/.suo index 76adf97..749684b 100644 Binary files a/.vs/eShopOnContainers.wiki/v15/.suo and b/.vs/eShopOnContainers.wiki/v15/.suo differ diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite index 3a7cf6f..4070e6f 100644 Binary files a/.vs/slnx.sqlite and b/.vs/slnx.sqlite differ diff --git a/02.-Setting-eShopOnContainer-solution-up-in-a-Visual-Studio-2017-environment.md b/02.-Setting-eShopOnContainer-solution-up-in-a-Visual-Studio-2017-environment.md index e4a182a..e945548 100644 --- a/02.-Setting-eShopOnContainer-solution-up-in-a-Visual-Studio-2017-environment.md +++ b/02.-Setting-eShopOnContainer-solution-up-in-a-Visual-Studio-2017-environment.md @@ -97,6 +97,14 @@ Below you can see the full **eShopOnContainers-ServicesAndWebApps.sln** solution Note how VS 2017 loads the docker-compose.yml files in a special node-tree so it uses that configuration to deploy/debug all the containers configured, at the same time into your Docker host. +#### Build the Web SPA application with NPM +If you want to run/test the web eShopOnContainers SPA (Single Page Application) client in adition to the regular MVC Web app, you need to install certain dependencies for the client side and build it with "npm build", as the client side of the SPA app is based on ANGULAR 2, TypeScript and other JS frameworks and compilation that needs to happen before building the Docker images. +The process is described in detail here: +https://github.com/dotnet/eShopOnContainers/wiki/06.-Setting-the-Web-SPA-application-up + +Come back to this point when you finished with the "Setting the SPA up" process. + + #### Build and run eShopOnContainers from Visual Studio 2017 ##### Set docker-compose as the default StartUp project diff --git a/03.-Setting-the-eShopOnContainers-solution-up-in-a-Windows-CLI-environment-(dotnet-CLI,-Docker-CLI-and-VS-Code).md b/03.-Setting-the-eShopOnContainers-solution-up-in-a-Windows-CLI-environment-(dotnet-CLI,-Docker-CLI-and-VS-Code).md index 7088395..5089cfb 100644 --- a/03.-Setting-the-eShopOnContainers-solution-up-in-a-Windows-CLI-environment-(dotnet-CLI,-Docker-CLI-and-VS-Code).md +++ b/03.-Setting-the-eShopOnContainers-solution-up-in-a-Windows-CLI-environment-(dotnet-CLI,-Docker-CLI-and-VS-Code).md @@ -114,7 +114,7 @@ These steps are easily performed by running a convenient script already created -### Buil Images and Deploy containers into your Docker host +### Build Images and Deploy containers into your Docker host You can build the Docker images and deploy the containers to a regularDocker host by using the Docker CLI tool `docker-compose up` which is very convenient for multi-container applications as it can build all the Docker images for you and then spin-up all the multiple containers of your application, all with a single command. If you don't want to deploy the containers but only build the images, you can do so by running `docker-compose build` These are the steps: diff --git a/06.-Setting-the-Web-SPA-application-up.md b/06.-Setting-the-Web-SPA-application-up.md index b1a31b7..b17c1d0 100644 --- a/06.-Setting-the-Web-SPA-application-up.md +++ b/06.-Setting-the-Web-SPA-application-up.md @@ -30,16 +30,27 @@ http://www.hanselman.com/blog/VisualStudio2015FixingDependenciesNpmNotInstalledF 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 install as shown below: + * Then, 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. + 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. - + +#### (Optional) Run NPM tasks from within Visual Studio 2017 + +As the chosen workload method when developing a client frontend app (JS frameworks, etc.), the developer has to be able to trigger the npm tasks when he wants. +Of course, he can always open a command propmt and run npm from the CLI as you just did in the steps above (which is most front-end devs do, in fact). +However, you can also run npm tasks inside Visual Studio if you install the following VS extension: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.NPMTaskRunner + +This extension adds to the "Task Runner Explorer" the capabailities to run npm tasks (since, out of the box, only gulp/grunt tasks are supported by VS2017). After this extension is installed you can run npm tasks from inside VS2017 and also set build bindings if you wanted. + + + +This extension honors the VS External Web Tools configuration, and allows you to use bindings, so if you want to run npm tasks automatically on every VS build, you could do so. This is not set as default in the eShopOnContainers provided code as it would slow down each VS build with the npm build tasks. ### Build the Docker images and Deploy the containers At this point, if you were originally following the eShopOnContainer setup for any environment and came to this page just to setup the SPA app, now go back to your original setup instructions page. Other than that, you can in any case choose between any of the following options to build and deploy the Docker containers: diff --git a/Home.md b/Home.md index bdc82c9..daca49a 100644 --- a/Home.md +++ b/Home.md @@ -1,7 +1,7 @@ # Welcome to the eShopOnContainers wiki! ## Roadmap -https://github.com/dotnet/eShopOnContainers/wiki/Roadmap-and-Milestones-for-future-releases +https://github.com/dotnet/eShopOnContainers/wiki/01.-Roadmap-and-Milestones-for-future-releases ## Setting up your development environment for eShopOnContainers ### Visual Studio 2017 and Windows based diff --git a/img/spa/npm-install.png b/img/spa/npm-install.png new file mode 100644 index 0000000..113713a Binary files /dev/null and b/img/spa/npm-install.png differ diff --git a/img/spa/task-runner-with-npm-extension.png b/img/spa/task-runner-with-npm-extension.png new file mode 100644 index 0000000..d04a6ea Binary files /dev/null and b/img/spa/task-runner-with-npm-extension.png differ