All Projects → damienbod → Angularwebpackvisualstudio

damienbod / Angularwebpackvisualstudio

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

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects

Projects that are alternatives of or similar to Angularwebpackvisualstudio

Universal
Seed project for Angular Universal apps featuring Server-Side Rendering (SSR), Webpack, CLI scaffolding, dev/prod modes, AoT compilation, HMR, SCSS compilation, lazy loading, config, cache, i18n, SEO, and TSLint/codelyzer
Stars: ✭ 669 (+34.61%)
Mutual labels:  webpack, hmr, aot, lazy-loading
React Core Boilerplate
Powerful ASP.NET Core 3 templates with React, true server-side rendering and Docker support
Stars: ✭ 169 (-66%)
Mutual labels:  webpack, aspnetcore, aspnet-core, template
Webpack Core Usage
webpack2完整系列课程,欢迎阅读。同时欢迎移步我的react全家桶文章全集: https://github.com/liangklfangl/react-article-bucket
Stars: ✭ 94 (-81.09%)
Mutual labels:  webpack, hmr, lazy-loading
Equinoxproject
Full ASP.NET Core 5 application with DDD, CQRS and Event Sourcing concepts
Stars: ✭ 5,120 (+930.18%)
Mutual labels:  aspnetcore, aspnet-core, visual-studio
Asp.net Core Template
A ready-to-use template for ASP.NET Core with repositories, services, models mapping, DI and StyleCop warnings fixed.
Stars: ✭ 599 (+20.52%)
Mutual labels:  aspnetcore, aspnet-core, template
Todolist Frontend Vuejs
Front-end application for Todolist Web application built with Laravel and Vue.js
Stars: ✭ 120 (-75.86%)
Mutual labels:  webpack, hmr, lazy-loading
example-app
Example app showcasing fulls1z3's Angular libraries
Stars: ✭ 27 (-94.57%)
Mutual labels:  hmr, aot, lazy-loading
run-aspnetcore-basics retired
One Solution - One Project for web application development with Asp.Net Core & EF.Core. Only one web application project which used aspnetcore components; razor pages, middlewares, dependency injection, configuration, logging. To create websites with minimum implementation of asp.net core based on HTML5, CSS, and JavaScript. You can use this boi…
Stars: ✭ 15 (-96.98%)
Mutual labels:  visual-studio, aspnetcore, aspnet-core
abp-push
Push Notification System for ASP.NET Boilerplate
Stars: ✭ 16 (-96.78%)
Mutual labels:  aspnetcore, aspnet-core
AspNetCoreAzureSearch
ASP.NET Core with Azure Cognitive Search
Stars: ✭ 12 (-97.59%)
Mutual labels:  aspnetcore, aspnet-core
Angular Hmr
🔥 Angular Hot Module Replacement for Hot Module Reloading
Stars: ✭ 490 (-1.41%)
Mutual labels:  webpack, hmr
BlazorDemo
Demo application for my writings about Blazor
Stars: ✭ 79 (-84.1%)
Mutual labels:  aspnetcore, aspnet-core
mssql-restapi
A simple REST API for SQL Server, Azure SQL DB and Azure SQL DW using SMO on .NET Core 2.0
Stars: ✭ 33 (-93.36%)
Mutual labels:  aspnetcore, aspnet-core
angular-gulp-starter
Simple dev/prod build for Angular (2+) using gulp, systemjs, rollup, ngc (AOT), scss, Visual Studio
Stars: ✭ 18 (-96.38%)
Mutual labels:  visual-studio, aot
Huxley2
A cross-platform JSON proxy for the GB railway Live Departure Boards SOAP API
Stars: ✭ 22 (-95.57%)
Mutual labels:  aspnetcore, aspnet-core
Elasticsearch-Autocomplete-API-Sample
Building Autocomplete API with Completion Suggester in ASP.NET Core sample project
Stars: ✭ 20 (-95.98%)
Mutual labels:  aspnetcore, aspnet-core
awesome-dotnet-async
A curated list of awesome articles and resources to learning and practicing about async, threading, and channels in .Net platform. 😉
Stars: ✭ 84 (-83.1%)
Mutual labels:  aspnetcore, aspnet-core
run-aspnetcore-blazor
New .Net Core 3.0 Asp.Net Blazor Components SPA Web Application
Stars: ✭ 22 (-95.57%)
Mutual labels:  aspnetcore, aspnet-core
ChatService
ChatService (SignalR).
Stars: ✭ 26 (-94.77%)
Mutual labels:  aspnetcore, aspnet-core
.NET-Backend-Developer-Roadmap
Nick's Roadmap for a .NET Backend Developer working with Microservices
Stars: ✭ 827 (+66.4%)
Mutual labels:  aspnetcore, aspnet-core

Angular Visual Studio Webpack Starter

Build status

Template for Webpack, Visual Studio, ASP.NET Core and Angular. 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

Features

Authors

Fabian GosebrinkDamien BowdenRoberto Simonetti

Fabian Gosebrink, Damien Bowden, Roberto Simonetti

Blogs:

Table of contents

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

Installing

Requirements:

Yarn

You can use this template also with yarn.

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

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.

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"

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

Production

For the Angular app, we use AoT compilation, tree shaking & minification.

npm run webpack-production

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

Dotnet Template

To install a template for this package we prepared a template.json to do that.

Just run dotnet new --install <PATH> where 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

Now you can use the temaplte with dotnet new angularwebapi

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.

Links

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].