commit for merge

Cesar De la Torre 2017-02-22 19:25:47 -08:00
commit 71137963c8
9 changed files with 27 additions and 8 deletions

@ -2,6 +2,6 @@
"ExpandedNodes": [
""
],
"SelectedNode": "\\07.-Setting-up-the-Xamarin-mobile-apps.md",
"SelectedNode": "\\Home.md",
"PreviewInSolutionExplorer": false
}

Binary file not shown.

Binary file not shown.

@ -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

@ -114,7 +114,7 @@ These steps are easily performed by running a convenient script already created
<img src="img/cli-windows/build-bits-3-catalog-bits.png">
### 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:

@ -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 <b>npm install</b> as shown below:
<img src="img/spa/npm-install.png">
* Then, run the command <b>npm run build:prod</b> as shown below:
<p>
<img src="img/spa/npm-run-build-prod.png">
If you get an error like <b>"Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 6.x"</b>, then run the command <b>npm rebuild node-sass</b> as in the following screenshot:
<img src="img/spa/npm-rebuild-node-sass.png">
Then, run again the <b>npm run build:prod</b> command that should finish with no errors.
If you get an error like <b>"Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 6.x"</b>, then run the command <b>npm rebuild node-sass</b> as in the following screenshot:
<img src="img/spa/npm-rebuild-node-sass.png">
Then, run again the <b>npm run build:prod</b> command that should finish with no errors.
<img src="img/spa/npm-run-build-prod-no-errors.png">
<img src="img/spa/npm-run-build-prod-no-errors.png">
#### (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.
<img src="img/spa/task-runner-with-npm-extension.png">
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:

@ -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

BIN
img/spa/npm-install.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB