├── samples ├── WebpackTag.Samples.React │ ├── ClientApp │ │ ├── public │ │ │ ├── index.html │ │ │ ├── favicon.ico │ │ │ └── manifest.json │ │ ├── src │ │ │ ├── custom.css │ │ │ ├── components │ │ │ │ ├── NavMenu.css │ │ │ │ ├── Layout.js │ │ │ │ ├── Counter.js │ │ │ │ ├── FetchData.js │ │ │ │ ├── NavMenu.js │ │ │ │ └── Home.js │ │ │ ├── index.js │ │ │ ├── App.test.js │ │ │ └── App.js │ │ └── package.json │ ├── Views │ │ ├── _ViewImports.cshtml │ │ └── Home │ │ │ └── Index.cshtml │ ├── appsettings.json │ ├── Pages │ │ ├── _ViewImports.cshtml │ │ ├── Error.cshtml.cs │ │ └── Error.cshtml │ ├── appsettings.Development.json │ ├── Controllers │ │ └── HomeController.cs │ ├── Program.cs │ ├── Properties │ │ └── launchSettings.json │ ├── Startup.cs │ └── WebpackTag.Samples.React.csproj └── WebpackTag.Samples.WebpackAssets │ ├── ClientApp │ ├── src │ │ ├── first.css │ │ ├── second.js │ │ └── first.js │ ├── package.json │ ├── webpack.config.js │ └── yarn.lock │ ├── Views │ ├── _ViewImports.cshtml │ └── Home │ │ └── Index.cshtml │ ├── appsettings.json │ ├── appsettings.Development.json │ ├── Controllers │ └── HomeController.cs │ ├── Program.cs │ ├── WebpackTag.Samples.WebpackAssets.csproj │ ├── Properties │ └── launchSettings.json │ └── Startup.cs ├── src ├── WebpackTag │ ├── images │ │ └── webpack-icon.png │ ├── AssetParsers │ │ ├── IAssetParserFactory.cs │ │ ├── IAssetParser.cs │ │ ├── AssetManifestParser.cs │ │ ├── WebpackAssetsParser.cs │ │ └── AssetParserFactory.cs │ ├── WebpackTagOptions.cs │ ├── ServiceCollectionExtensions.cs │ ├── WebpackTag.csproj │ ├── WebpackAssets.cs │ ├── WebpackScriptsTagHelper.cs │ └── WebpackStylesTagHelper.cs └── WebpackTag.Tests │ ├── WebpackTag.Tests.csproj │ ├── fixtures │ └── asset-manifest1.json │ └── AssetParsers │ └── AssetManifestParserTest.cs ├── .editorconfig ├── LICENSE ├── WebpackTag.sln ├── README.md └── .gitignore /samples/WebpackTag.Samples.React/ClientApp/public/index.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.WebpackAssets/ClientApp/src/first.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: green; 3 | } -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.WebpackAssets/ClientApp/src/second.js: -------------------------------------------------------------------------------- 1 | console.log('Hello from second.js'); -------------------------------------------------------------------------------- /src/WebpackTag/images/webpack-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daniel15/WebpackTag/HEAD/src/WebpackTag/images/webpack-icon.png -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.React/Views/_ViewImports.cshtml: -------------------------------------------------------------------------------- 1 | @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers 2 | @addTagHelper *, WebpackTag -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.WebpackAssets/Views/_ViewImports.cshtml: -------------------------------------------------------------------------------- 1 | @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers 2 | @addTagHelper *, WebpackTag -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.React/ClientApp/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daniel15/WebpackTag/HEAD/samples/WebpackTag.Samples.React/ClientApp/public/favicon.ico -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.React/appsettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "Logging": { 3 | "LogLevel": { 4 | "Default": "Warning" 5 | } 6 | }, 7 | "AllowedHosts": "*" 8 | } 9 | -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.WebpackAssets/appsettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "Logging": { 3 | "LogLevel": { 4 | "Default": "Warning" 5 | } 6 | }, 7 | "AllowedHosts": "*" 8 | } 9 | -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.React/Pages/_ViewImports.cshtml: -------------------------------------------------------------------------------- 1 | @using WebpackTag.Samples.React 2 | @namespace WebpackTag.Samples.React.Pages 3 | @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers 4 | -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.React/appsettings.Development.json: -------------------------------------------------------------------------------- 1 | { 2 | "Logging": { 3 | "LogLevel": { 4 | "Default": "Debug", 5 | "System": "Information", 6 | "Microsoft": "Information" 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.WebpackAssets/appsettings.Development.json: -------------------------------------------------------------------------------- 1 | { 2 | "Logging": { 3 | "LogLevel": { 4 | "Default": "Debug", 5 | "System": "Information", 6 | "Microsoft": "Information" 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.React/ClientApp/src/custom.css: -------------------------------------------------------------------------------- 1 | /* Provide sufficient contrast against white background */ 2 | a { 3 | color: #0366d6; 4 | } 5 | 6 | code { 7 | color: #E01A76; 8 | } 9 | 10 | .btn-primary { 11 | color: #fff; 12 | background-color: #1b6ec2; 13 | border-color: #1861ac; 14 | } 15 | -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.React/Controllers/HomeController.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Mvc; 2 | 3 | namespace WebpackTag.Samples.React.Controllers 4 | { 5 | public class HomeController : Controller 6 | { 7 | [Route("")] 8 | public IActionResult Index() 9 | { 10 | return View(); 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.WebpackAssets/Controllers/HomeController.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Mvc; 2 | 3 | namespace WebpackTag.Samples.WebpackAssets.Controllers 4 | { 5 | public class HomeController : Controller 6 | { 7 | [Route("")] 8 | public IActionResult Index() 9 | { 10 | return View(); 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.WebpackAssets/ClientApp/src/first.js: -------------------------------------------------------------------------------- 1 | require('./first.css'); 2 | 3 | // Just a dummy example of pulling in third party code, so Webpack bundles it. 4 | const React = require('react'); 5 | const ReactDOM = require('react-dom'); 6 | window._test = ReactDOM; 7 | 8 | document.getElementById('hello').innerHTML = 'Hello from first.js'; -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.React/ClientApp/src/components/NavMenu.css: -------------------------------------------------------------------------------- 1 | a.navbar-brand { 2 | white-space: normal; 3 | text-align: center; 4 | word-break: break-all; 5 | } 6 | 7 | html { 8 | font-size: 14px; 9 | } 10 | @media (min-width: 768px) { 11 | html { 12 | font-size: 16px; 13 | } 14 | } 15 | 16 | .box-shadow { 17 | box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); 18 | } 19 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # To learn more about .editorconfig see https://aka.ms/editorconfigdocs 2 | root = true 3 | 4 | # All files 5 | [*] 6 | indent_style = tab 7 | indent_size = 4 8 | 9 | [*.{cs,csx,vb,vbx}] 10 | insert_final_newline = true 11 | charset = utf-8-bom 12 | 13 | [*.proto] 14 | indent_style = space 15 | indent_size = 2 16 | 17 | [*.{js,ts,tsx,json}] 18 | indent_style = space 19 | indent_size = 2 -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.React/ClientApp/src/index.js: -------------------------------------------------------------------------------- 1 | import 'bootstrap/dist/css/bootstrap.css'; 2 | import React from 'react'; 3 | import ReactDOM from 'react-dom'; 4 | import { BrowserRouter } from 'react-router-dom'; 5 | import App from './App'; 6 | 7 | const rootElement = document.getElementById('root'); 8 | 9 | ReactDOM.render( 10 | 11 | 12 | , 13 | rootElement); 14 | -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.React/ClientApp/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "WebpackTag.Samples.React", 3 | "name": "WebpackTag.Samples.React", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/WebpackTag/AssetParsers/IAssetParserFactory.cs: -------------------------------------------------------------------------------- 1 | using System.Threading.Tasks; 2 | 3 | namespace WebpackTag.AssetParsers 4 | { 5 | /// 6 | /// Handles constructing instances. 7 | /// 8 | public interface IAssetParserFactory 9 | { 10 | /// 11 | /// Gets the Webpack asset manifest using the correct asset parser. 12 | /// 13 | Task GetAssets(); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.React/ClientApp/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import { MemoryRouter } from 'react-router-dom'; 4 | import App from './App'; 5 | 6 | it('renders without crashing', async () => { 7 | const div = document.createElement('div'); 8 | ReactDOM.render( 9 | 10 | 11 | , div); 12 | await new Promise(resolve => setTimeout(resolve, 1000)); 13 | }); 14 | -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.React/ClientApp/src/components/Layout.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Container } from 'reactstrap'; 3 | import { NavMenu } from './NavMenu'; 4 | 5 | export class Layout extends Component { 6 | static displayName = Layout.name; 7 | 8 | render () { 9 | return ( 10 |
11 | 12 | 13 | {this.props.children} 14 | 15 |
16 | ); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.WebpackAssets/Views/Home/Index.cshtml: -------------------------------------------------------------------------------- 1 | @{ 2 | Layout = null; 3 | } 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | WebpackTag.Samples.WebpackAssets 12 | 13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/WebpackTag/WebpackTagOptions.cs: -------------------------------------------------------------------------------- 1 | namespace WebpackTag 2 | { 3 | /// 4 | /// Options for the WebpackTag library 5 | /// 6 | public class WebpackTagOptions 7 | { 8 | /// 9 | /// Gets or sets the base URL to prepend to asset URLs 10 | /// 11 | public string BaseUrl { get; set; } = "/"; 12 | 13 | /// 14 | /// Gets or sets the port the devserver is running on. 15 | /// 16 | public int? DevServerPort { get; set; } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/WebpackTag/AssetParsers/IAssetParser.cs: -------------------------------------------------------------------------------- 1 | namespace WebpackTag.AssetParsers 2 | { 3 | /// 4 | /// Parser for Webpack assets 5 | /// 6 | public interface IAssetParser 7 | { 8 | /// 9 | /// Default file name for this manifest type (eg. "asset-manifest.json") 10 | /// 11 | string DefaultFileName { get; } 12 | 13 | /// 14 | /// Parses the manifest file 15 | /// 16 | /// Contents of the file 17 | /// Parsed Webpack assets 18 | WebpackAssets ParseManifest(string json); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.React/Program.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Threading.Tasks; 5 | using Microsoft.AspNetCore; 6 | using Microsoft.AspNetCore.Hosting; 7 | using Microsoft.Extensions.Configuration; 8 | using Microsoft.Extensions.Logging; 9 | 10 | namespace WebpackTag.Samples.React 11 | { 12 | public class Program 13 | { 14 | public static void Main(string[] args) 15 | { 16 | CreateWebHostBuilder(args).Build().Run(); 17 | } 18 | 19 | public static IWebHostBuilder CreateWebHostBuilder(string[] args) => 20 | WebHost.CreateDefaultBuilder(args) 21 | .UseStartup(); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.WebpackAssets/ClientApp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpacktag.samples.webpackassets", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "build-dev": "cross-env NODE_ENV=development webpack -d", 7 | "build-prod": "cross-env NODE_ENV=production webpack -p" 8 | }, 9 | "devDependencies": { 10 | "assets-webpack-plugin": "^3.9.10", 11 | "cross-env": "^6.0.3", 12 | "css-loader": "^3.2.0", 13 | "mini-css-extract-plugin": "^0.8.0", 14 | "webpack": "^4.41.2", 15 | "webpack-cli": "^3.3.10" 16 | }, 17 | "dependencies": { 18 | "react": "^16.12.0", 19 | "react-dom": "^16.12.0" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.WebpackAssets/Program.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Threading.Tasks; 5 | using Microsoft.AspNetCore; 6 | using Microsoft.AspNetCore.Hosting; 7 | using Microsoft.Extensions.Configuration; 8 | using Microsoft.Extensions.Logging; 9 | 10 | namespace WebpackTag.Samples.WebpackAssets 11 | { 12 | public class Program 13 | { 14 | public static void Main(string[] args) 15 | { 16 | CreateWebHostBuilder(args).Build().Run(); 17 | } 18 | 19 | public static IWebHostBuilder CreateWebHostBuilder(string[] args) => 20 | WebHost.CreateDefaultBuilder(args) 21 | .UseStartup(); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.WebpackAssets/WebpackTag.Samples.WebpackAssets.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | netcoreapp3.0 5 | true 6 | Latest 7 | false 8 | ClientApp\ 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.React/ClientApp/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Route } from 'react-router'; 3 | import { Layout } from './components/Layout'; 4 | import { Home } from './components/Home'; 5 | import { FetchData } from './components/FetchData'; 6 | import { Counter } from './components/Counter'; 7 | 8 | import './custom.css' 9 | 10 | export default class App extends Component { 11 | static displayName = App.name; 12 | 13 | render () { 14 | return ( 15 | 16 | 17 | 18 | 19 | 20 | ); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.React/Properties/launchSettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "iisSettings": { 3 | "windowsAuthentication": false, 4 | "anonymousAuthentication": true, 5 | "iisExpress": { 6 | "applicationUrl": "http://localhost:15452", 7 | "sslPort": 44345 8 | } 9 | }, 10 | "profiles": { 11 | "IIS Express": { 12 | "commandName": "IISExpress", 13 | "launchBrowser": true, 14 | "environmentVariables": { 15 | "ASPNETCORE_ENVIRONMENT": "Development" 16 | } 17 | }, 18 | "WebpackTag.Samples.React": { 19 | "commandName": "Project", 20 | "launchBrowser": true, 21 | "applicationUrl": "https://localhost:5001;http://localhost:5000", 22 | "environmentVariables": { 23 | "ASPNETCORE_ENVIRONMENT": "Development" 24 | } 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.WebpackAssets/Properties/launchSettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "iisSettings": { 3 | "windowsAuthentication": false, 4 | "anonymousAuthentication": true, 5 | "iisExpress": { 6 | "applicationUrl": "http://localhost:22946", 7 | "sslPort": 44382 8 | } 9 | }, 10 | "profiles": { 11 | "IIS Express": { 12 | "commandName": "IISExpress", 13 | "launchBrowser": true, 14 | "environmentVariables": { 15 | "ASPNETCORE_ENVIRONMENT": "Development" 16 | } 17 | }, 18 | "WebpackTag.Samples.WebpackAssets": { 19 | "commandName": "Project", 20 | "launchBrowser": true, 21 | "applicationUrl": "https://localhost:5001;http://localhost:5000", 22 | "environmentVariables": { 23 | "ASPNETCORE_ENVIRONMENT": "Development" 24 | } 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.React/ClientApp/src/components/Counter.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | export class Counter extends Component { 4 | static displayName = Counter.name; 5 | 6 | constructor(props) { 7 | super(props); 8 | this.state = { currentCount: 0 }; 9 | this.incrementCounter = this.incrementCounter.bind(this); 10 | } 11 | 12 | incrementCounter() { 13 | this.setState({ 14 | currentCount: this.state.currentCount + 1 15 | }); 16 | } 17 | 18 | render() { 19 | return ( 20 |
21 |

Counter

22 | 23 |

This is a simple example of a React component.

24 | 25 |

Current count: {this.state.currentCount}

26 | 27 | 28 |
29 | ); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.React/Pages/Error.cshtml.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Diagnostics; 4 | using System.Linq; 5 | using System.Threading.Tasks; 6 | using Microsoft.AspNetCore.Mvc; 7 | using Microsoft.AspNetCore.Mvc.RazorPages; 8 | using Microsoft.Extensions.Logging; 9 | 10 | namespace WebpackTag.Samples.React.Pages 11 | { 12 | [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)] 13 | public class ErrorModel : PageModel 14 | { 15 | private readonly ILogger _logger; 16 | 17 | public ErrorModel(ILogger logger) 18 | { 19 | _logger = logger; 20 | } 21 | 22 | public string RequestId { get; set; } 23 | 24 | public bool ShowRequestId => !string.IsNullOrEmpty(RequestId); 25 | 26 | public void OnGet() 27 | { 28 | RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier; 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.React/Views/Home/Index.cshtml: -------------------------------------------------------------------------------- 1 | @{ 2 | Layout = null; 3 | } 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | WebpackTag.Samples.React 13 | 14 | 15 | 18 |
19 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /src/WebpackTag.Tests/WebpackTag.Tests.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | netcoreapp3.0 5 | 6 | false 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | PreserveNewest 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.React/Pages/Error.cshtml: -------------------------------------------------------------------------------- 1 | @page 2 | @model ErrorModel 3 | @{ 4 | ViewData["Title"] = "Error"; 5 | } 6 | 7 |

Error.

8 |

An error occurred while processing your request.

9 | 10 | @if (Model.ShowRequestId) 11 | { 12 |

13 | Request ID: @Model.RequestId 14 |

15 | } 16 | 17 |

Development Mode

18 |

19 | Swapping to the Development environment displays detailed information about the error that occurred. 20 |

21 |

22 | The Development environment shouldn't be enabled for deployed applications. 23 | It can result in displaying sensitive information from exceptions to end users. 24 | For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT environment variable to Development 25 | and restarting the app. 26 |

27 | -------------------------------------------------------------------------------- /src/WebpackTag/ServiceCollectionExtensions.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using Microsoft.Extensions.DependencyInjection; 3 | using WebpackTag.AssetParsers; 4 | 5 | namespace WebpackTag 6 | { 7 | /// 8 | /// Handles registration of WebpackTag into the dependency injection container. 9 | /// 10 | public static class ServiceCollectionExtensions 11 | { 12 | /// 13 | /// Registers services required for the WebpackTag library. 14 | /// 15 | public static IServiceCollection AddWebpackTag(this IServiceCollection services, Action? configure = null) 16 | { 17 | services.AddSingleton(); 18 | services.AddSingleton(); 19 | services.AddSingleton(); 20 | services.AddHttpClient(); 21 | services.AddHttpContextAccessor(); 22 | 23 | if (configure != null) 24 | { 25 | services.Configure(configure); 26 | } 27 | 28 | return services; 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (C) 2019 Daniel Lo Nigro (Daniel15) 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of 4 | this software and associated documentation files (the "Software"), to deal in 5 | the Software without restriction, including without limitation the rights to 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 7 | of the Software, and to permit persons to whom the Software is furnished to do 8 | so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. 20 | -------------------------------------------------------------------------------- /src/WebpackTag.Tests/fixtures/asset-manifest1.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": { 3 | "main.css": "/static/css/main.13b298a8.chunk.css", 4 | "main.js": "/static/js/main.a7ba1e53.chunk.js", 5 | "main.js.map": "/static/js/main.a7ba1e53.chunk.js.map", 6 | "runtime-main.js": "/static/js/runtime-main.d1ae9948.js", 7 | "runtime-main.js.map": "/static/js/runtime-main.d1ae9948.js.map", 8 | "static/css/2.833dd627.chunk.css": "/static/css/2.833dd627.chunk.css", 9 | "static/js/2.a6664501.chunk.js": "/static/js/2.a6664501.chunk.js", 10 | "static/js/2.a6664501.chunk.js.map": "/static/js/2.a6664501.chunk.js.map", 11 | "index.html": "/index.html", 12 | "precache-manifest.3d1aa53134a731005f564364734b745c.js": "/precache-manifest.3d1aa53134a731005f564364734b745c.js", 13 | "service-worker.js": "/service-worker.js", 14 | "static/css/2.833dd627.chunk.css.map": "/static/css/2.833dd627.chunk.css.map", 15 | "static/css/main.13b298a8.chunk.css.map": "/static/css/main.13b298a8.chunk.css.map" 16 | }, 17 | "entrypoints": [ 18 | "static/js/runtime-main.d1ae9948.js", 19 | "static/css/2.833dd627.chunk.css", 20 | "static/js/2.a6664501.chunk.js", 21 | "static/css/main.13b298a8.chunk.css", 22 | "static/js/main.a7ba1e53.chunk.js" 23 | ] 24 | } -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.WebpackAssets/ClientApp/webpack.config.js: -------------------------------------------------------------------------------- 1 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 2 | const saveAssets = require('assets-webpack-plugin'); 3 | 4 | const IS_DEV = process.env.NODE_ENV !== 'production'; 5 | 6 | module.exports = { 7 | context: __dirname, 8 | entry: { 9 | first: './src/first.js', 10 | second: './src/second.js', 11 | }, 12 | output: { 13 | path: __dirname + '/dist/', 14 | filename: IS_DEV ? '[name].js?[contenthash]' : '[name]-[contenthash].min.js', 15 | }, 16 | module: { 17 | rules: [ 18 | { 19 | test: /\.css$/, 20 | use: [ 21 | { 22 | loader: MiniCssExtractPlugin.loader, 23 | }, 24 | { 25 | loader: 'css-loader', 26 | options: { 27 | sourceMap: true, 28 | }, 29 | }, 30 | ], 31 | }, 32 | ], 33 | }, 34 | optimization: { 35 | splitChunks: { 36 | chunks: 'all', 37 | }, 38 | }, 39 | plugins: [ 40 | new saveAssets({ 41 | entrypoints: true, 42 | useCompilerPath: true, 43 | }), 44 | new MiniCssExtractPlugin({ 45 | filename: IS_DEV ? '[name].css?[contenthash]' : '[name]-[contenthash].css', 46 | }), 47 | ], 48 | } -------------------------------------------------------------------------------- /src/WebpackTag/WebpackTag.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | netcoreapp3.0 5 | 8.0 6 | enable 7 | 1.0.0 8 | Daniel Lo Nigro 9 | ASP.NET Core Tag Helper for Webpack assets. See the site at https://d.sb/webpacktag for docs. 10 | MIT 11 | https://d.sb/webpacktag 12 | https://github.com/Daniel15/WebpackTag/ 13 | true 14 | true 15 | true 16 | true 17 | snupkg 18 | webpack-icon.png 19 | webpack webpack-dev-server module-bundling webpack-assets-manifest assets-webpack-plugin 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.React/ClientApp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpacktag.samples.react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "babel-eslint": "10.0.3", 7 | "bootstrap": "^4.1.3", 8 | "jquery": "^3.4.1", 9 | "merge": "^1.2.1", 10 | "oidc-client": "^1.9.0", 11 | "react": "^16.0.0", 12 | "react-dom": "^16.0.0", 13 | "react-router-bootstrap": "^0.24.4", 14 | "react-router-dom": "^4.2.2", 15 | "react-scripts": "^3.0.1", 16 | "reactstrap": "^6.3.0", 17 | "rimraf": "^2.6.2" 18 | }, 19 | "devDependencies": { 20 | "ajv": "^6.9.1", 21 | "cross-env": "^5.2.0", 22 | "eslint": "^6.6.0", 23 | "eslint-config-react-app": "^5.0.2", 24 | "eslint-plugin-flowtype": "^4.4.1", 25 | "eslint-plugin-import": "^2.14.0", 26 | "eslint-plugin-jsx-a11y": "^6.2.1", 27 | "eslint-plugin-react": "^7.11.1", 28 | "typescript": "^3.5.2" 29 | }, 30 | "eslintConfig": { 31 | "extends": "react-app" 32 | }, 33 | "scripts": { 34 | "start": "rimraf ./build && cross-env PORT=34251 BROWSER=none react-scripts start", 35 | "build": "react-scripts build", 36 | "test": "cross-env CI=true react-scripts test --env=jsdom", 37 | "eject": "react-scripts eject", 38 | "lint": "eslint ./src/" 39 | }, 40 | "browserslist": { 41 | "production": [ 42 | ">0.2%", 43 | "not dead", 44 | "not op_mini all" 45 | ], 46 | "development": [ 47 | "last 1 chrome version", 48 | "last 1 firefox version", 49 | "last 1 safari version" 50 | ] 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.React/ClientApp/src/components/FetchData.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | export class FetchData extends Component { 4 | static displayName = FetchData.name; 5 | 6 | constructor(props) { 7 | super(props); 8 | this.state = { forecasts: [], loading: true }; 9 | } 10 | 11 | componentDidMount() { 12 | this.populateWeatherData(); 13 | } 14 | 15 | static renderForecastsTable(forecasts) { 16 | return ( 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | {forecasts.map(forecast => 28 | 29 | 30 | 31 | 32 | 33 | 34 | )} 35 | 36 |
DateTemp. (C)Temp. (F)Summary
{forecast.date}{forecast.temperatureC}{forecast.temperatureF}{forecast.summary}
37 | ); 38 | } 39 | 40 | render() { 41 | let contents = this.state.loading 42 | ?

Loading...

43 | : FetchData.renderForecastsTable(this.state.forecasts); 44 | 45 | return ( 46 |
47 |

Weather forecast

48 |

This component demonstrates fetching data from the server.

49 | {contents} 50 |
51 | ); 52 | } 53 | 54 | async populateWeatherData() { 55 | const response = await fetch('weatherforecast'); 56 | const data = await response.json(); 57 | this.setState({ forecasts: data, loading: false }); 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.React/ClientApp/src/components/NavMenu.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Collapse, Container, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap'; 3 | import { Link } from 'react-router-dom'; 4 | import './NavMenu.css'; 5 | 6 | export class NavMenu extends Component { 7 | static displayName = NavMenu.name; 8 | 9 | constructor (props) { 10 | super(props); 11 | 12 | this.toggleNavbar = this.toggleNavbar.bind(this); 13 | this.state = { 14 | collapsed: true 15 | }; 16 | } 17 | 18 | toggleNavbar () { 19 | this.setState({ 20 | collapsed: !this.state.collapsed 21 | }); 22 | } 23 | 24 | render () { 25 | return ( 26 |
27 | 28 | 29 | WebpackTag.Samples.React 30 | 31 | 32 |
    33 | 34 | Home 35 | 36 | 37 | Counter 38 | 39 | 40 | Fetch data 41 | 42 |
43 | 44 | 45 | 46 |
47 | ); 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.WebpackAssets/Startup.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Builder; 2 | using Microsoft.AspNetCore.Hosting; 3 | using Microsoft.Extensions.Configuration; 4 | using Microsoft.Extensions.DependencyInjection; 5 | using Microsoft.Extensions.Hosting; 6 | 7 | namespace WebpackTag.Samples.WebpackAssets 8 | { 9 | public class Startup 10 | { 11 | public Startup(IConfiguration configuration) 12 | { 13 | Configuration = configuration; 14 | } 15 | 16 | public IConfiguration Configuration { get; } 17 | 18 | // This method gets called by the runtime. Use this method to add services to the container. 19 | public void ConfigureServices(IServiceCollection services) 20 | { 21 | services.AddWebpackTag(); 22 | services.AddControllersWithViews(); 23 | 24 | // In production, the React files will be served from this directory 25 | services.AddSpaStaticFiles(configuration => 26 | { 27 | configuration.RootPath = "ClientApp/dist"; 28 | }); 29 | } 30 | 31 | // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. 32 | public void Configure(IApplicationBuilder app, IWebHostEnvironment env) 33 | { 34 | if (env.IsDevelopment()) 35 | { 36 | app.UseDeveloperExceptionPage(); 37 | } 38 | else 39 | { 40 | app.UseExceptionHandler("/Error"); 41 | // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. 42 | app.UseHsts(); 43 | } 44 | 45 | app.UseHttpsRedirection(); 46 | app.UseStaticFiles(); 47 | app.UseSpaStaticFiles(); 48 | 49 | app.UseRouting(); 50 | 51 | app.UseEndpoints(endpoints => 52 | { 53 | endpoints.MapControllerRoute( 54 | name: "default", 55 | pattern: "{controller}/{action=Index}/{id?}"); 56 | }); 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.React/ClientApp/src/components/Home.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | export class Home extends Component { 4 | static displayName = Home.name; 5 | 6 | render () { 7 | return ( 8 |
9 |

Hello, world!

10 |

Welcome to your new single-page application, built with:

11 | 16 |

To help you get started, we have also set up:

17 |
    18 |
  • Client-side navigation. For example, click Counter then Back to return here.
    • 19 |
  • Development server integration. In development mode, the development server from create-react-app runs in the background automatically, so your client-side resources are dynamically built on demand and the page refreshes when you modify any file.
    • 20 |
  • Efficient production builds. In production mode, development-time features are disabled, and your dotnet publish configuration produces minified, efficiently bundled JavaScript files.
    • 21 |
22 |

The ClientApp subdirectory is a standard React application based on the create-react-app template. If you open a command prompt in that directory, you can run npm commands such as npm test or npm install.

23 |
24 | ); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/WebpackTag/WebpackAssets.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Collections.Immutable; 4 | 5 | namespace WebpackTag 6 | { 7 | /// 8 | /// Contains details about assets compiled by Webpack 9 | /// 10 | public class WebpackAssets 11 | { 12 | private readonly ImmutableDictionary _entryPoints; 13 | 14 | /// 15 | /// Initializes a new instance of the class. 16 | /// 17 | /// The Webpack entry points. 18 | public WebpackAssets(ImmutableDictionary entryPoints) 19 | { 20 | _entryPoints = entryPoints; 21 | } 22 | 23 | /// 24 | /// Gets all the files required by the specified entrypoint. 25 | /// 26 | public IReadOnlyList GetPaths(string extension, string entryPoint = "") 27 | { 28 | if (!_entryPoints.ContainsKey(entryPoint)) 29 | { 30 | throw new ArgumentException($"Invalid entrypoint '{entryPoint}'", nameof(entryPoint)); 31 | } 32 | 33 | var files = _entryPoints[entryPoint].Files; 34 | return files.ContainsKey(extension) ? files[extension] : ImmutableArray.Empty; 35 | } 36 | 37 | /// 38 | /// Represents a Webpack entry point 39 | /// 40 | public class EntryPoint 41 | { 42 | /// 43 | /// Gets the files required by this entry point. 44 | /// 45 | public ImmutableDictionary> Files { get; } 46 | 47 | /// 48 | /// Initializes a new instance of the class. 49 | /// 50 | /// The files in this entry point. 51 | public EntryPoint(ImmutableDictionary> files) 52 | { 53 | Files = files; 54 | } 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/WebpackTag/WebpackScriptsTagHelper.cs: -------------------------------------------------------------------------------- 1 | using System.Linq; 2 | using System.Threading.Tasks; 3 | using Microsoft.AspNetCore.Html; 4 | using Microsoft.AspNetCore.Http; 5 | using Microsoft.AspNetCore.Razor.TagHelpers; 6 | using WebpackTag.AssetParsers; 7 | 8 | namespace WebpackTag 9 | { 10 | /// 11 | /// Renders references to Webpack-compiled JavaScript files 12 | /// 13 | [OutputElementHint("script")] 14 | public class WebpackScriptsTagHelper : TagHelper 15 | { 16 | private const string EXTENSION = "js"; 17 | 18 | private readonly IAssetParserFactory _parser; 19 | private readonly IHttpContextAccessor _httpContext; 20 | 21 | /// 22 | /// Initializes a new instance of the class. 23 | /// 24 | /// The parser factory. 25 | /// The HTTP context. 26 | public WebpackScriptsTagHelper(IAssetParserFactory parser, IHttpContextAccessor httpContext) 27 | { 28 | _parser = parser; 29 | _httpContext = httpContext; 30 | } 31 | 32 | /// 33 | /// Webpack entry point name 34 | /// 35 | public string Entry { get; set; } = ""; 36 | 37 | /// 38 | public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output) 39 | { 40 | output.TagName = null; 41 | 42 | var assets = await _parser.GetAssets(); 43 | var scripts = assets.GetPaths(EXTENSION, Entry); 44 | foreach (var script in scripts) 45 | { 46 | output.Content.AppendHtml(@""); 49 | } 50 | 51 | _httpContext.HttpContext.Response.Headers.AppendCommaSeparatedValues( 52 | "Link", 53 | scripts.Select(script => $"<{script}>; as=script; rel=preload").ToArray() 54 | ); 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/WebpackTag/WebpackStylesTagHelper.cs: -------------------------------------------------------------------------------- 1 | using System.Linq; 2 | using System.Threading.Tasks; 3 | using Microsoft.AspNetCore.Html; 4 | using Microsoft.AspNetCore.Http; 5 | using Microsoft.AspNetCore.Razor.TagHelpers; 6 | using WebpackTag.AssetParsers; 7 | 8 | namespace WebpackTag 9 | { 10 | /// 11 | /// Renders references to Webpack-compiled CSS files 12 | /// 13 | [OutputElementHint("link")] 14 | public class WebpackStylesTagHelper : TagHelper 15 | { 16 | private const string EXTENSION = "css"; 17 | 18 | private readonly IAssetParserFactory _parser; 19 | private readonly IHttpContextAccessor _httpContext; 20 | 21 | /// 22 | /// Initializes a new instance of the class. 23 | /// 24 | /// The parser. 25 | /// The HTTP context. 26 | public WebpackStylesTagHelper(IAssetParserFactory parser, IHttpContextAccessor httpContext) 27 | { 28 | _parser = parser; 29 | _httpContext = httpContext; 30 | } 31 | 32 | /// 33 | /// Webpack entry point name 34 | /// 35 | public string Entry { get; set; } = ""; 36 | 37 | /// 38 | public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output) 39 | { 40 | output.TagName = null; 41 | 42 | var assets = await _parser.GetAssets(); 43 | var stylesheets = assets.GetPaths(EXTENSION, Entry); 44 | foreach (var stylesheet in stylesheets) 45 | { 46 | output.Content.AppendHtml(@""); 49 | } 50 | 51 | _httpContext.HttpContext.Response.Headers.AppendCommaSeparatedValues( 52 | "Link", 53 | stylesheets.Select(stylesheet => $"<{stylesheet}>; as=style; rel=preload").ToArray() 54 | ); 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/WebpackTag.Tests/AssetParsers/AssetManifestParserTest.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.IO; 3 | using Microsoft.Extensions.Options; 4 | using WebpackTag.AssetParsers; 5 | using Xunit; 6 | 7 | namespace WebpackTag.Tests.AssetParsers 8 | { 9 | public class AssetManifestParserTest 10 | { 11 | [Fact] 12 | public void ParsesAssetManifest() 13 | { 14 | var parser = new AssetManifestParser(new OptionsWrapper(new WebpackTagOptions())); 15 | var result = parser.ParseManifest(Fixture1); 16 | 17 | var jsPaths = result.GetPaths("js"); 18 | Assert.Equal(new[] 19 | { 20 | "/static/js/runtime-main.d1ae9948.js", 21 | "/static/js/2.a6664501.chunk.js", 22 | "/static/js/main.a7ba1e53.chunk.js" 23 | }, jsPaths); 24 | 25 | var cssPaths = result.GetPaths("css"); 26 | Assert.Equal(new[] 27 | { 28 | "/static/css/2.833dd627.chunk.css", 29 | "/static/css/main.13b298a8.chunk.css", 30 | }, cssPaths); 31 | 32 | var fooPaths = result.GetPaths("foo"); 33 | Assert.Empty(fooPaths); 34 | } 35 | 36 | [Fact] 37 | public void PrependsPath() 38 | { 39 | var parser = new AssetManifestParser(new OptionsWrapper(new WebpackTagOptions 40 | { 41 | BaseUrl = "https://cdn.example.com/" 42 | })); 43 | var result = parser.ParseManifest(Fixture1); 44 | 45 | var jsPaths = result.GetPaths("js"); 46 | Assert.Equal(new[] 47 | { 48 | "https://cdn.example.com/static/js/runtime-main.d1ae9948.js", 49 | "https://cdn.example.com/static/js/2.a6664501.chunk.js", 50 | "https://cdn.example.com/static/js/main.a7ba1e53.chunk.js" 51 | }, jsPaths); 52 | } 53 | 54 | [Fact] 55 | public void ThrowsOnOtherEntryPoint() 56 | { 57 | var parser = new AssetManifestParser(new OptionsWrapper(new WebpackTagOptions())); 58 | var result = parser.ParseManifest(Fixture1); 59 | Assert.Throws(() => result.GetPaths("js", "foobar")); 60 | } 61 | 62 | private string Fixture1 63 | { 64 | get 65 | { 66 | var path = Path.Combine(Directory.GetCurrentDirectory(), "fixtures", "asset-manifest1.json"); 67 | return File.ReadAllText(path); 68 | } 69 | } 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /src/WebpackTag/AssetParsers/AssetManifestParser.cs: -------------------------------------------------------------------------------- 1 | using System.Collections.Generic; 2 | using System.Collections.Immutable; 3 | using System.IO; 4 | using System.Linq; 5 | using System.Text.Json; 6 | using Microsoft.Extensions.Options; 7 | 8 | namespace WebpackTag.AssetParsers 9 | { 10 | /// 11 | /// Parses asset-manifest.json files generated from the Webpack 12 | /// webpack-assets-manifest plugin. In production, the file is read from disk. 13 | /// In dev, the file is read from the Webpack dev server. 14 | /// 15 | public class AssetManifestParser : IAssetParser 16 | { 17 | private readonly IOptions _options; 18 | 19 | /// 20 | /// Creates a new . 21 | /// 22 | public AssetManifestParser(IOptions options) 23 | { 24 | _options = options; 25 | } 26 | 27 | /// 28 | /// Default file name for this manifest type (eg. "asset-manifest.json") 29 | /// 30 | public string DefaultFileName => "asset-manifest.json"; 31 | 32 | /// 33 | /// Parses the manifest file 34 | /// 35 | /// Contents of the file 36 | /// Parsed Webpack assets 37 | public WebpackAssets ParseManifest(string json) 38 | { 39 | var manifest = JsonSerializer.Deserialize(json, new JsonSerializerOptions 40 | { 41 | PropertyNameCaseInsensitive = true, 42 | }); 43 | var files = manifest.Entrypoints 44 | .Select(path => _options.Value.BaseUrl + path) 45 | .GroupBy(path => (Path.GetExtension(path) ?? "").TrimStart('.')) 46 | .ToDictionary(x => x.Key, x => x.ToImmutableArray()) 47 | .ToImmutableDictionary(); 48 | 49 | 50 | return new WebpackAssets(new Dictionary 51 | { 52 | {"", new WebpackAssets.EntryPoint(files)} 53 | }.ToImmutableDictionary()); 54 | } 55 | 56 | /// 57 | /// POCO for asset-manifest.json file 58 | /// 59 | class ManifestContent 60 | { 61 | /// 62 | /// Gets or sets the files required by the entry point. 63 | /// 64 | public IList Entrypoints { get; set; } = new List(); 65 | } 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.React/Startup.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Builder; 2 | using Microsoft.AspNetCore.Hosting; 3 | using Microsoft.AspNetCore.HttpsPolicy; 4 | using Microsoft.AspNetCore.SpaServices.ReactDevelopmentServer; 5 | using Microsoft.Extensions.Configuration; 6 | using Microsoft.Extensions.DependencyInjection; 7 | using Microsoft.Extensions.Hosting; 8 | 9 | namespace WebpackTag.Samples.React 10 | { 11 | public class Startup 12 | { 13 | public Startup(IConfiguration configuration) 14 | { 15 | Configuration = configuration; 16 | } 17 | 18 | public IConfiguration Configuration { get; } 19 | 20 | // This method gets called by the runtime. Use this method to add services to the container. 21 | public void ConfigureServices(IServiceCollection services) 22 | { 23 | services.AddWebpackTag(options => 24 | { 25 | options.DevServerPort = 34251; 26 | }); 27 | 28 | services.AddControllersWithViews(); 29 | 30 | // In production, the React files will be served from this directory 31 | services.AddSpaStaticFiles(configuration => 32 | { 33 | configuration.RootPath = "ClientApp/build"; 34 | }); 35 | } 36 | 37 | // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. 38 | public void Configure(IApplicationBuilder app, IWebHostEnvironment env) 39 | { 40 | if (env.IsDevelopment()) 41 | { 42 | app.UseDeveloperExceptionPage(); 43 | } 44 | else 45 | { 46 | app.UseExceptionHandler("/Error"); 47 | // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. 48 | app.UseHsts(); 49 | } 50 | 51 | app.UseHttpsRedirection(); 52 | app.UseStaticFiles(); 53 | app.UseSpaStaticFiles(); 54 | 55 | app.UseRouting(); 56 | 57 | app.UseEndpoints(endpoints => 58 | { 59 | endpoints.MapControllerRoute( 60 | name: "default", 61 | pattern: "{controller}/{action=Index}/{id?}"); 62 | }); 63 | 64 | app.UseSpa(spa => 65 | { 66 | spa.Options.SourcePath = "ClientApp"; 67 | 68 | if (env.IsDevelopment()) 69 | { 70 | spa.UseProxyToSpaDevelopmentServer("http://localhost:34251/"); 71 | //spa.UseReactDevelopmentServer(npmScript: "start"); 72 | } 73 | }); 74 | } 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /src/WebpackTag/AssetParsers/WebpackAssetsParser.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Collections.Immutable; 4 | using System.Linq; 5 | using Microsoft.Extensions.Options; 6 | using Newtonsoft.Json; 7 | using Newtonsoft.Json.Linq; 8 | 9 | namespace WebpackTag.AssetParsers 10 | { 11 | /// 12 | /// Parses webpack-assets.json files generated from the Webpack 13 | /// assets-webpack-plugin plugin. 14 | /// 15 | public class WebpackAssetsParser : IAssetParser 16 | { 17 | private readonly IOptions _options; 18 | 19 | /// 20 | /// Initializes a new instance of the class. 21 | /// 22 | /// The options. 23 | public WebpackAssetsParser(IOptions options) 24 | { 25 | _options = options; 26 | } 27 | 28 | /// 29 | /// Default file name for this manifest type (eg. "asset-manifest.json") 30 | /// 31 | public string DefaultFileName => "webpack-assets.json"; 32 | 33 | /// 34 | /// Parses the manifest file 35 | /// 36 | /// Contents of the file 37 | /// Parsed Webpack assets 38 | public WebpackAssets ParseManifest(string json) 39 | { 40 | var manifest = JsonConvert.DeserializeObject>>(json); 41 | 42 | var output = new Dictionary(); 43 | foreach (var (entryPoint, filesByExtension) in manifest) 44 | { 45 | var outputFiles = new Dictionary>(); 46 | foreach (var (extension, files) in filesByExtension) 47 | { 48 | // This can be either an array (for multiple files), or a string (for one file) 49 | switch (files) 50 | { 51 | case JArray array: 52 | outputFiles[extension] = array.Select(x => FormatPath(x.ToString())).ToImmutableArray(); 53 | break; 54 | 55 | case string str: 56 | outputFiles[extension] = ImmutableArray.Create(FormatPath(str)); 57 | break; 58 | 59 | default: 60 | throw new ArgumentException("Unrecognised webpack-assets format"); 61 | } 62 | } 63 | 64 | output[entryPoint] = new WebpackAssets.EntryPoint(outputFiles.ToImmutableDictionary()); 65 | } 66 | 67 | return new WebpackAssets(output.ToImmutableDictionary()); 68 | } 69 | 70 | private string FormatPath(string path) 71 | { 72 | return _options.Value.BaseUrl + path.TrimStart('/'); 73 | } 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /samples/WebpackTag.Samples.React/WebpackTag.Samples.React.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | netcoreapp3.0 5 | true 6 | Latest 7 | false 8 | ClientApp\ 9 | $(DefaultItemExcludes);$(SpaRoot)node_modules\** 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | %(DistFiles.Identity) 47 | PreserveNewest 48 | true 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /WebpackTag.sln: -------------------------------------------------------------------------------- 1 | 2 | Microsoft Visual Studio Solution File, Format Version 12.00 3 | # Visual Studio Version 16 4 | VisualStudioVersion = 16.0.29318.209 5 | MinimumVisualStudioVersion = 10.0.40219.1 6 | Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "WebpackTag.Tests", "src\WebpackTag.Tests\WebpackTag.Tests.csproj", "{D1D12D98-79AB-4751-8F39-A4080781D6F5}" 7 | EndProject 8 | Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Samples", "Samples", "{A469E0E2-FDA7-49A7-A34C-0BA9DBDB836F}" 9 | EndProject 10 | Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "WebpackTag", "src\WebpackTag\WebpackTag.csproj", "{8E936B81-B674-4078-BEE3-5C031C7D67F7}" 11 | EndProject 12 | Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "WebpackTag.Samples.React", "samples\WebpackTag.Samples.React\WebpackTag.Samples.React.csproj", "{913E7E0C-96B5-42AB-835B-9CCE6332E6ED}" 13 | EndProject 14 | Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "WebpackTag.Samples.WebpackAssets", "samples\WebpackTag.Samples.WebpackAssets\WebpackTag.Samples.WebpackAssets.csproj", "{659AF85F-E18D-4BE0-94C7-D67BAEB057DE}" 15 | EndProject 16 | Global 17 | GlobalSection(SolutionConfigurationPlatforms) = preSolution 18 | Debug|Any CPU = Debug|Any CPU 19 | Release|Any CPU = Release|Any CPU 20 | EndGlobalSection 21 | GlobalSection(ProjectConfigurationPlatforms) = postSolution 22 | {D1D12D98-79AB-4751-8F39-A4080781D6F5}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 23 | {D1D12D98-79AB-4751-8F39-A4080781D6F5}.Debug|Any CPU.Build.0 = Debug|Any CPU 24 | {D1D12D98-79AB-4751-8F39-A4080781D6F5}.Release|Any CPU.ActiveCfg = Release|Any CPU 25 | {D1D12D98-79AB-4751-8F39-A4080781D6F5}.Release|Any CPU.Build.0 = Release|Any CPU 26 | {8E936B81-B674-4078-BEE3-5C031C7D67F7}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 27 | {8E936B81-B674-4078-BEE3-5C031C7D67F7}.Debug|Any CPU.Build.0 = Debug|Any CPU 28 | {8E936B81-B674-4078-BEE3-5C031C7D67F7}.Release|Any CPU.ActiveCfg = Release|Any CPU 29 | {8E936B81-B674-4078-BEE3-5C031C7D67F7}.Release|Any CPU.Build.0 = Release|Any CPU 30 | {913E7E0C-96B5-42AB-835B-9CCE6332E6ED}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 31 | {913E7E0C-96B5-42AB-835B-9CCE6332E6ED}.Debug|Any CPU.Build.0 = Debug|Any CPU 32 | {913E7E0C-96B5-42AB-835B-9CCE6332E6ED}.Release|Any CPU.ActiveCfg = Release|Any CPU 33 | {913E7E0C-96B5-42AB-835B-9CCE6332E6ED}.Release|Any CPU.Build.0 = Release|Any CPU 34 | {659AF85F-E18D-4BE0-94C7-D67BAEB057DE}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 35 | {659AF85F-E18D-4BE0-94C7-D67BAEB057DE}.Debug|Any CPU.Build.0 = Debug|Any CPU 36 | {659AF85F-E18D-4BE0-94C7-D67BAEB057DE}.Release|Any CPU.ActiveCfg = Release|Any CPU 37 | {659AF85F-E18D-4BE0-94C7-D67BAEB057DE}.Release|Any CPU.Build.0 = Release|Any CPU 38 | EndGlobalSection 39 | GlobalSection(SolutionProperties) = preSolution 40 | HideSolutionNode = FALSE 41 | EndGlobalSection 42 | GlobalSection(NestedProjects) = preSolution 43 | {913E7E0C-96B5-42AB-835B-9CCE6332E6ED} = {A469E0E2-FDA7-49A7-A34C-0BA9DBDB836F} 44 | {659AF85F-E18D-4BE0-94C7-D67BAEB057DE} = {A469E0E2-FDA7-49A7-A34C-0BA9DBDB836F} 45 | EndGlobalSection 46 | GlobalSection(ExtensibilityGlobals) = postSolution 47 | SolutionGuid = {7DEED4A9-D55B-48A4-8432-C5480B4C5742} 48 | EndGlobalSection 49 | EndGlobal 50 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # WebpackTag 2 | 3 | [![NuGet version](http://img.shields.io/nuget/v/WebpackTag.svg)](https://www.nuget.org/packages/WebpackTag/) 4 | 5 | WebpackTag is an [ASP.NET Core Tag Helper](https://docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/intro?view=aspnetcore-3.0) for rendering links to CSS and JS files compiled via Webpack 6 | 7 | * Supports both [webpack-manifest-plugin](https://www.npmjs.com/package/webpack-manifest-plugin) (as used by [Create React App](https://create-react-app.dev/)) and [assets-webpack-plugin](https://www.npmjs.com/package/assets-webpack-plugin). 8 | * Supports loading manifest from Webpack devserver in development. 9 | * Renders [preload headers](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content) for improved performance. This can be used to support [HTTP/2 Server Push in Nginx](https://www.nginx.com/blog/nginx-1-13-9-http2-server-push/#automatic-push). 10 | 11 | # Usage 12 | 13 | Install the `WebpackTag` library using NuGet 14 | 15 | Add the WebpackTag services to your `Startup.cs`: 16 | 17 | ```csharp 18 | using WebpackTag; 19 | ... 20 | public void ConfigureServices(IServiceCollection services) 21 | { 22 | services.AddWebpackTag(); 23 | ``` 24 | 25 | Import the tag helpers in your `Views/_ViewImports.cshtml` file: 26 | 27 | ```csharp 28 | @addTagHelper *, WebpackTag 29 | ``` 30 | 31 | Then use the tag helpers in your view! 32 | 33 | ```html 34 | 35 | 36 | ``` 37 | 38 | These tag helpers will look for files called `webpack-assets.json` or `asset-manifest.json` in your wwwroot or SPA root directory, parse the contents, and render the correct `` or `