Merge branch 'fix-spa-app-setup'
Miguel Veloso
commit
7759e24fdd
@ -1,83 +1,98 @@
|
||||
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.
|
||||
## Important notice
|
||||
|
||||
The Web SPA application currently builds just fine while building the Docker images with docker-compose.
|
||||
|
||||
You only need to go through this article if you want to run it locally with Visual Studio, to build the required JavaScript code and dependencies.
|
||||
|
||||
## 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 need to use **npm** from the command line to build the JS application, so it has to be installed globally.
|
||||
|
||||
<img src="img/spa/installing_npm_node.png">
|
||||
You can install the version "Recommended For Most Users" of Node.
|
||||
You can see the installed NPM version with the command <b>npm -v</b>, as shown below.
|
||||
<p>
|
||||
<img src="img/spa/npm-versions-powershell.png">
|
||||
**NPM** is bundled with NODE.JS, and Installing NODE and NPM is pretty straightforward by using the installer package available at https://nodejs.org/en/
|
||||
|
||||
|
||||
|
||||
You can install the Long Term Support (LTS) version "Recommended For Most Users" of Node, however, the current version used in the WebSPA application is [8.11](https://nodejs.org/download/release/v8.11.4/).
|
||||
|
||||
You can also see the installed NPM version with the command `npm -v`, as shown below.
|
||||
|
||||
|
||||
|
||||
### Set NPM path into Visual Studio
|
||||
|
||||
This step is only required if you are also using the full Visual Studio 2017.
|
||||
|
||||
NPM (just installed by you) will be usually installed under this path:
|
||||
<b>C:\Program Files\nodejs</b>.
|
||||
You need to update that path in Visual Studio under the "External Web Tools" location paths, as shown below:
|
||||
<p>
|
||||
<img src="img/spa/vs-tools-path-custom-node.png">
|
||||
**C:\Program Files\nodejs**.
|
||||
|
||||
You might 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 versus the command line accessing the same JavaScript code from both environments.
|
||||
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 4 based client app) with NPM.
|
||||
* Open a command-prompt window and move to the root of the SPA application (src\Web\WebSPA\)
|
||||
* Run the command <b>npm install</b> as shown below:
|
||||
<img src="img/spa/npm-install.png">
|
||||
|
||||
---------------
|
||||
Now, you need to build the SPA app (TypeScript and Angular 6+ based client app) with NPM.
|
||||
|
||||
**IMPORTANT NOTE/UPDATE:** Seems like in some NPM environments running just "npm install" does not work properly. If you have a similar issue than [this issue](https://github.com/dotnet-architecture/eShopOnContainers/issues/253): try running **"npm install enhanced-resolve@3.3.0"** instead "npm install". (Please, provide your experience at that mentioned issue)
|
||||
- Open a command-prompt window and move to the root of the SPA application (src\Web\WebSPA\)
|
||||
|
||||
---------------
|
||||
- Run the command `npm install` as shown below:
|
||||
|
||||
* Then, run the command <b>npm run build:prod</b> as shown below:
|
||||
<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:
|
||||
**IMPORTANT NOTE/UPDATE:** Seems like in some NPM environments running just "npm install" does not work properly. If you have a similar issue than [this issue](https://github.com/dotnet-architecture/eShopOnContainers/issues/253): try running **"npm install enhanced-resolve@3.3.0"** instead "npm install". (Please, provide your experience at that mentioned issue)
|
||||
|
||||
<img src="img/spa/npm-rebuild-node-sass.png">
|
||||
- Then, run the command `npm run build:prod` as shown below:
|
||||
|
||||
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">
|
||||
- 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:
|
||||
|
||||
#### (Optional) Run NPM tasks from within Visual Studio 2017
|
||||
|
||||
|
||||
Then, run again the `npm run build:prod` command that should finish with no errors.
|
||||
|
||||
|
||||
|
||||
### Run the SPA locally
|
||||
|
||||
To run the SPA locally you have to set the WebSPA as the startup project for the solution, and then press [F5] or [Ctrl+F5] as usual.
|
||||
|
||||
The SPA application should start in port 58018, but `localhost:58018` is not in one of the authorized client redirections in `Identity.API`, so this address has to be added manually.
|
||||
|
||||
The easiest is to just edit the database proper table and add the required record.
|
||||
|
||||
If using SQL Server Management Studio do the following:
|
||||
|
||||
1. Connect to `localhost, 5433` with username `sa` and password `Pass@word`
|
||||
|
||||
|
||||
|
||||
2. Find the table `dbo.ClientRedrectUris` in the `IdentityDb` database and add a new record like the one that contains `http://localhost:5104`, but with the `http://localhost:58018` as shown in the next image:
|
||||
|
||||
|
||||
|
||||
### (Optional) Run NPM tasks from within Visual Studio 2017
|
||||
|
||||
As the chosen workload method when developing a client frontend app (JS frameworks, etc.), you, as a developer have to be able to trigger the npm tasks when you want.
|
||||
|
||||
Of course, you can always open a command prompt and run npm from the CLI as you just did in the steps above (which is, in fact, what most front-end developers do).
|
||||
|
||||
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 adds the option to run npm tasks from the "Task Runner Explorer" (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 want.
|
||||
|
||||
<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. **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/02.-Setting-eShopOnContainer-solution-up-in-a-Visual-Studio-2017-environment
|
||||
|
||||
2. **CLI on Windows:** Build the .NET bits with the build-container based on dontnet CLI and Docker CLI, as explained in this page: https://github.com/dotnet/eShopOnContainers/wiki/03.-Setting-the-eShopOnContainers-solution-up-in-a-Windows-CLI-environment-(dotnet-CLI,-Docker-CLI-and-VS-Code)
|
||||
|
||||
3. **CLI on Mac:** Build the .NET bits with the build-container based on dontnet CLI and Docker CLI, as explained in this page: https://github.com/dotnet/eShopOnContainers/wiki/04.-Setting-eShopOnContainer-solution-up-in-a-Mac,-VS-Code-and-CLI-environment--(dotnet-CLI,-Docker-CLI-and-VS-Code)
|
||||
|
||||
## Troubleshooting the SPA app when building from the CLI
|
||||
|
||||
The Docker image build could do npm install if needed, but this installs npm linux packages, not the windows ones. As the docker container used for build has a volume mapping with the source code, that means that the "node_modules" of the SPA web application ends having npm linux modules. In fact, windows & linux modules are the same (they’re node modules, so are in js) but windows modules have an additional .cmd file in the node_modules\.bin folder. This file is needed for all CLI-invokable modules (like webpack or rimraf). As linux modules do no have it, **if you build once with the docker image, and later do you want to build using the windows CLI you will get errors due to not having these files. Solution here is delete the "node_modules" folder and do an npm install (from Windows)**.
|
||||
|
||||
How to avoid having this issue?: doing an "npm install" from Windows BEFORE running the docker CI build, as documented here: https://github.com/dotnet/eShopOnContainers/wiki/03.-Setting-the-eShopOnContainers-solution-up-in-a-Windows-CLI-environment-(dotnet-CLI,-Docker-CLI-and-VS-Code)
|
||||
|
||||
Everytime you change from Linux based build (Docker) to a Windows based build (CLI) you’ll need to do “npm rebuild node-sass”. Our Docker compose ci.build file does it for you, but if you switch to windows, you’ll need to do it manually.
|
||||
|
||||
## Sending feedback and pull requests
|
||||
We'd appreciate to your feedback, improvements and ideas.
|
||||
You can create new issues at the issues section, do pull requests and/or send emails to eshop_feedback@service.microsoft.com
|
||||
|
||||
We'd appreciate your feedback, improvements and ideas.
|
||||
|
||||
You can create new [issues](https://github.com/dotnet-architecture/eShopOnContainers/issues) or [pull requests](https://github.com/dotnet-architecture/eShopOnContainers/pulls) in this repo or send emails to [eshop_feedback@service.microsoft.com](mailto:eshop_feedback@service.microsoft.com)
|
||||
|
||||
BIN
img/spa/add-client-redirect-uri.png
Normal file
BIN
img/spa/add-client-redirect-uri.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
img/spa/ssms-login.png
Normal file
BIN
img/spa/ssms-login.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Loading…
x
Reference in New Issue
Block a user