AngularWebpackVisualStudio - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #android #machine-learning #rust #deep-learning #docker #nodejs #cli #awesome-list #pytorch #mcp

AngularWebpackVisualStudio

(★ 484)

Template for ASP.NET Core, Angular with Webpack and Visual Studio

File Explorer

Download Latest Version (.zip)

- dotnet-new.jpg
- HMR.md
- LAZY_LOADING.md
- - .eslintignore
  - .eslintrc.js
  - AngularWebpackVisualStudio.csproj
  - appsettings.json
  - favicon.ico
  - karma.conf.js
  - package-lock.json
  - package.json
  - Program.cs
  - Startup.cs
  - tsconfig-aot.json
  - tsconfig.json
  - web.config
  - webpack.config.js
- - AngularWebpackVisualStudio_Tests.csproj
  - ThingsController_Tests.cs
.gitignore
AngularWebpackVisualStudio.sln
appveyor.yml
CHANGELOG.md
LICENSE
README.md

# Installation Guide

1. Get the code

git clone https://github.com/damienbod/AngularWebpackVisualStudio

Downloads the entire project code from GitHub to your computer.

cd AngularWebpackVisualStudio

Moves into the project folder you just downloaded.

2. .NET

Medium Recommended

Prerequisites

Git Needed to download the project code from GitHub.
.NET SDK The SDK required for the dotnet command.

- **.template.config** _Folder containing the template information about the dotnet new template_

Type this command into your terminal and run it.

✅ After dotnet run, check the message or address shown in the terminal.

Pulled directly from this repo's README.

3. Node.js

Easy

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

⚠️ This is a large repository, so this method may point to an internal sub-package rather than the actual core product. Check the full README as well.

cd src/AngularWebpackVisualStudio

This project's files live in a subfolder, so move into it first.

npm install

Downloads and installs the libraries listed in package.json.

npm start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Angular Visual Studio Webpack Starter
[![Build status](https://ci.appveyor.com/api/projects/status/3x6y01a8312x6o2p?svg=true)](https://ci.appveyor.com/project/damienbod/angular2webpackvisualstudio)

>Template for [Webpack](https://webpack.js.org/concepts/), [Visual Studio](https://www.visualstudio.com/), [ASP.NET Core](https://docs.microsoft.com/en-us/dotnet/core/) and [Angular](https://angular.io/). Both the client and the server side of the application are implemented inside one ASP.NET Core project which makes it easier to deploy.

![vs_webpack_angular2](https://damienbod.files.wordpress.com/2016/06/vs_webpack_angular2.png?w=600)

## Features
- Angular [AoT compilation](https://angular.io/guide/aot-compiler)
- Angular [Lazy-loading modules with the router](https://angular.io/guide/ngmodule#lazy-loading-modules-with-the-router)
- Angular [Style Guide](https://angular.io/guide/styleguide)
- Webpack [Hot Module Replacement](https://webpack.js.org/guides/hot-module-replacement/)
- Webpack [DevServer](https://webpack.js.org/configuration/dev-server/)
- Development & Production builds
- SASS, CSS
- Testing client using _Jasmine_ and _Karma_
- Testing server usign _xUnit_
- _Yarn_ & _npm 5_

## Authors
<img src="https://avatars.githubusercontent.com/u/11268349?v=3" width="70" alt="Fabian Gosebrink"><img src="https://avatars.githubusercontent.com/u/3442158?v=3" width="70" alt="Damien Bowden"><img src="https://pbs.twimg.com/profile_images/707847627992338432/ytT_FxUY_400x400.jpg" width="70" alt="Roberto Simonetti">

_[Fabian Gosebrink](https://twitter.com/FabianGosebrink), [Damien Bowden](https://twitter.com/damien_bod), [Roberto Simonetti](https://twitter.com/robisim74)_

Blogs:
- [damienbod.com](https://damienbod.com/2016/06/12/asp-net-core-angular2-with-webpack-and-visual-studio/)
- [offering.solutions](http://offering.solutions//blog/articles/2016/06/12/asp-net-core-angular-2-webpack-visual-studio/)

## Table of contents
* [Project structure](#1)
* [Installing](#2)
* [Running](#3)
	* [Commands](#3.1)
	* [Development](#3.2)
	* [Production](#3.3)
* [Testing](#4)
* [Dotnet Template](#5)
* [Notes](#6)
* [Links](#7)

## <a name="1"></a>Project structure
- **src**
	- **AngularWebpackVisualStudio** _ASP.NET Core Web API project_
		- **.template.config** _Folder containing the template information about the dotnet new template_
		- **wwwroot** _Root for Angular application deployment_
		- **angularApp** _Angular application_
			- **main.ts** _Entry point for JiT compilation_
			- **main-aot.ts** _Entry point for AoT compilation_
			- **tests** _Client tests_
		- **config** _Folder for configuration files_
			- **webpack.dev.js** _webpack configuration file for development_
			- **webpack.prod.js** _webpack configuration file for production_
			- **webpack.test.js** _webpack configuration file for testing_
			- **spec.bundle.js** _Used for client testing_
		- **Controllers** _Folder for API controllers_
		- **Models** _Folder for models_
		- **Startup.cs** _Web API configuration_
		- **package.json** _Packages for Angular app_
		- **karma.conf.js** _Karma configuration for client testing_
		- **tsconfig.json** & **tsconfig-aot.json** _TypeScript & ngc compiler options_
		- **webpack.config.js** _Webpack configuration file for development & production of Angular app_
- **tests**
	- **AngularWebpackVisualStudio_Tests** _API tests_

## <a name="2"></a>Installing
Requirements:
- At least [.NET Core 2.0.0](https://www.microsoft.com/net/download/core)
- At least _node 6.9_ and _npm 4_

#### Yarn
You can use this template also with [yarn](https://yarnpkg.com/en/docs/install).

#### Visual Studio
The installed _nodejs_ on your system needs to be used inside Visual Studio and not the _nodejs_ from Visual Studio. You need to set the path of your node before the VS node.

In Visual Studio: _Tools -> Options -> Projects and Solutions -> Web Package Management -> External Web Tools_

Move the _$(Path)_ option above the Visual Studio one.

#### NPM Task Runner
The _NPM Task Runner_ can be used to build the client application from inside Visual Studio. This task runner can be downloaded from:

https://marketplace.visualstudio.com/items?itemName=MadsKristensen.NPMTaskRunner

## <a name="3"></a>Running
The ASP.NET Core application contains both the server side API services and also hosts the Angular client application. The source code for the Angular application is implemented in the _angularApp_ folder. Webpack is then used to deploy the application, using the development build or a production build, which deploys the application to the wwwroot folder. This makes it easy to deploy the application using the standard tools from Visual Studio with the standard configurations.

### <a name="3.1"></a>Commands
The npm scripts are used to build, watch the client application as required. The scripts can be run from the command line or the _NPM Task Runner_.

The _watch-webpack-dev_ npm script automatically starts in Visual Studio because it has been added to the _package.json_:
```
"-vs-binding": { "ProjectOpened": [ "watch-webpack-dev" ] }
```

All available commands are the following:
```
"start": "concurrently \"webpack-dev-server --env=dev --open --hot --inline --port 8080\" \"dotnet run\" ",
"webpack-dev": "webpack --env=dev",
"webpack-production": "webpack --env=prod",
"build-dev": "npm run webpack-dev",
"build-production": "npm run webpack-production",
"watch-webpack-dev": "webpack --env=dev --watch --color",
"watch-webpack-production": "npm run build-production --watch --color",
"publish-for-iis": "npm run build-production && dotnet publish -c Release",
"test": "karma start",
"test-ci": "karma start --single-run --browsers ChromeHeadless",
"lint": "tslint ./angularApp"
```

### <a name="3.2"></a>Development
For the Angular app, we use _JiT compilation_.
```
npm run build-dev
```
#### Watch for development
```
npm run watch-webpack-dev
```
#### Hot Module Replacement
```
npm start
```

### <a name="3.3"></a>Production
For the Angular app, we use _AoT compilation_, tree shaking & minification.
```
npm run webpack-production
```

## <a name="4"></a>Testing
The _xUnit_ test for ASP.NET Core API is in _tests/AngularWebpackVisualStudio_Tests_ folder:
```
dotnet test
```
or from Visual Studio: _Test -> Run -> All Tests_

See this link for more details on _xUnit_ testing in ASP.NET Core: https://docs.microsoft.com/it-it/dotnet/articles/core/testing/unit-testing-with-dotnet-test

The Angular test is in _angularApp/tests_ folder. It uses _Karma_ test runner and _Jasmine_ test framework:
```
npm test
```

runs the tests and watches for development. If you want to run the tests with a headless browser only one single time just type
```
npm run test-ci
```

See this link for more details on Angular testing: https://angular.io/guide/testing

## <a name="5"></a>Dotnet Template
To install a template for this package we prepared a `template.json` to do that.

Just run `dotnet new --install <PATH>` where <PATH> is the path to the folder where the `.template.config` folder lives.

After that you should see the template when running `dotnet new` on commandline

![dotnetnew](https://raw.githubusercontent.com/damienbod/AngularWebpackVisualStudio/main/.github/dotnet-new.jpg "dotnetnew")

Now you can use the temaplte with `dotnet new angularwebapi`

## <a name="6"></a>Notes
The Webpack configuration could also build all of the scss and css files to a separate _app.css_ or _app."hash".css_ which could be loaded as a single file in the distribution. Some of the vendor js and css could also be loaded directly in the html header using the _index.html_ file and not included in the Webpack build.

## <a name="7"></a>Links
- [Lazy Loading](https://github.com/damienbod/Angular2WebpackVisualStudio/tree/master/docs/LAZY_LOADING.md)
- [Hot Module Replacement](https://github.com/damienbod/Angular2WebpackVisualStudio/tree/master/docs/HMR.md)

- [Building production ready Angular apps with Visual Studio and ASP.NET Core](https://damienbod.com/2017/01/01/building-production-ready-angular-apps-with-visual-studio-and-asp-net-core/)

## License
MIT