Skip to content

Make Razor Components apps not use Blazor build #6562

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,6 @@
</script>

<app>Loading...</app>
<script src="_framework/blazor.webassembly.js"></script>
<script src="_framework/components.webassembly.js"></script>
</body>
</html>
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,6 @@
<body>
<app>Loading...</app>
<script src="customJsFileForTests.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
<script src="_framework/components.webassembly.js"></script>
</body>
</html>
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,6 @@
<body>
<app>Loading...</app>

<script src="_framework/blazor.webassembly.js"></script>
<script src="_framework/components.webassembly.js"></script>
</body>
</html>
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,8 @@
<ExcludePackageFileFromSigning Include="System.Text.Encoding.CodePages.dll" />

<!-- JS files -->
<ExcludePackageFileFromSigning Include="blazor.server.js" />
<ExcludePackageFileFromSigning Include="blazor.webassembly.js" />
<ExcludePackageFileFromSigning Include="components.server.js" />
<ExcludePackageFileFromSigning Include="components.webassembly.js" />
</ItemGroup>

<!-- Executes /t:Publish for all target frameworks before packing-->
Expand Down Expand Up @@ -72,7 +72,7 @@
<PackageReference Include="Microsoft.Extensions.CommandLineUtils" Version="1.1.1" />
<PackageReference Include="Microsoft.Extensions.FileProviders.Composite" Version="$(AspNetCorePackageVersion)" />
<PackageReference Include="Microsoft.Extensions.FileProviders.Physical" Version="$(AspNetCorePackageVersion)" />
<PackageReference Include="Mono.Cecil" Version="0.10.0-beta7" />
<PackageReference Include="Mono.Cecil" Version="$(MonoCecilPackageVersion)" />
<PackageReference Include="System.CodeDom" Version="4.4.0" />
</ItemGroup>
</Project>
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,6 @@
<file src="build\**" target="build" />
<file src="targets\**" target="targets" />
<file src="$publishdir$netcoreapp3.0\**\*" target="tools/" />
<file src="..\..\..\src\Microsoft.AspNetCore.Components.Browser.JS\dist\blazor.*.js" target="tools/blazor" />
<file src="..\..\..\src\Microsoft.AspNetCore.Components.Browser.JS\dist\components.*.js" target="tools/blazor" />
</files>
</package>
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@

<PropertyGroup>
<BlazorBuildReferenceFromSource>true</BlazorBuildReferenceFromSource>
<BlazorJsPath>$(MSBuildThisFileDirectory)../../../src/Microsoft.AspNetCore.Components.Browser.JS/dist/blazor.*.js</BlazorJsPath>
<BlazorJsPath>$(MSBuildThisFileDirectory)../../../src/Microsoft.AspNetCore.Components.Browser.JS/dist/components.*.js</BlazorJsPath>
</PropertyGroup>

<Import Project="$(MSBuildThisFileDirectory)targets/All.props" />
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<Project>

<PropertyGroup Condition="'$(BlazorBuildReferenceFromSource)'==''">
<BlazorJsPath>$(MSBuildThisFileDirectory)../tools/blazor/blazor.*.js</BlazorJsPath>
<BlazorJsPath>$(MSBuildThisFileDirectory)../tools/blazor/components.*.js</BlazorJsPath>
</PropertyGroup>

<PropertyGroup Label="Blazor build outputs">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<PackageReference Include="Newtonsoft.Json" Version="$(NewtonsoftJsonPackageVersion)" />

<!-- Used by ws-proxy sources only. Remove this once we're able to consume ws-proxy as a NuGet package. -->
<PackageReference Include="Mono.Cecil" Version="0.10.0-beta7" />
<PackageReference Include="Mono.Cecil" Version="$(MonoCecilPackageVersion)" />
</ItemGroup>

</Project>
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,6 @@
<body>
<app>Loading...</app>

<script src="_framework/blazor.webassembly.js"></script>
<script src="_framework/components.webassembly.js"></script>
</body>
</html>
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,6 @@
<body>
<app>Loading...</app>

<script src="_framework/blazor.webassembly.js"></script>
<script src="_framework/components.webassembly.js"></script>
</body>
</html>
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@
<PackageReference Include="Microsoft.NET.Test.Sdk" Version="15.5.0" />
<PackageReference Include="xunit" Version="2.3.1" />
<PackageReference Include="xunit.runner.visualstudio" Version="2.3.1" />
<PackageReference Include="Mono.Cecil" Version="0.10.0-beta7" />
<PackageReference Include="Microsoft.AspNetCore.Blazor.Mono" Version="$(MicrosoftAspNetCoreBlazorMonoPackageVersion)" />
<PackageReference Include="Microsoft.AspNetCore.Mvc.Razor.Extensions" Version="$(MicrosoftNETSdkRazorPackageVersion)" />
<PackageReference Include="Microsoft.AspNetCore.Razor.Language" Version="$(MicrosoftNETSdkRazorPackageVersion)" />
Expand Down
1 change: 1 addition & 0 deletions src/Components/build/dependencies.props
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
<MicrosoftAspNetCoreHtmlAbstractionsPackageVersion>3.0.0-alpha1-10605</MicrosoftAspNetCoreHtmlAbstractionsPackageVersion>
<MicrosoftAspNetCoreRazorDesignPackageVersion>3.0.0-alpha1-10605</MicrosoftAspNetCoreRazorDesignPackageVersion>
<MicrosoftExtensionsDependencyInjectionPackageVersion>3.0.0-alpha1-10605</MicrosoftExtensionsDependencyInjectionPackageVersion>
<MonoCecilPackageVersion>0.10.1</MonoCecilPackageVersion>
<SignalRPackageVersion>3.0.0-alpha1-10605</SignalRPackageVersion>
<TemplateBlazorPackageVersion>0.8.0-preview1-20181122.3</TemplateBlazorPackageVersion>
<TemplateRazorDesignPackageVersion>2.1.2</TemplateRazorDesignPackageVersion>
Expand Down
4 changes: 2 additions & 2 deletions src/Components/samples/ComponentsApp.App/App.cshtml
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!--
Configuring this stuff here is temporary. Later we'll move the app config
into Program.cs, and it won't be necessary to specify AppAssembly.
into Startup.cs, and it won't be necessary to specify AppAssembly.
-->
<Router AppAssembly=typeof(ComponentsApp.App.Program).Assembly />
<Router AppAssembly=typeof(ComponentsApp.App.Startup).Assembly />
25 changes: 13 additions & 12 deletions src/Components/samples/ComponentsApp.App/ComponentsApp.App.csproj
Original file line number Diff line number Diff line change
@@ -1,20 +1,21 @@
<Project Sdk="Microsoft.NET.Sdk.Web">
<Project Sdk="Microsoft.NET.Sdk.Razor">

<PropertyGroup>
<TargetFramework>netstandard2.0</TargetFramework>
<OutputType>Exe</OutputType>
</PropertyGroup>
<PropertyGroup>
<TargetFramework>netstandard2.0</TargetFramework>
</PropertyGroup>

<ItemGroup>
<PackageReference Include="Microsoft.Extensions.DependencyInjection" Version="$(AspNetCorePackageVersion)" />
<ProjectReference Include="..\..\src\Microsoft.AspNetCore.Components\Microsoft.AspNetCore.Components.csproj" />
</ItemGroup>
<!-- Local equivalent to a package reference to Microsoft.AspNetCore.Components.Build -->
<Import Project="..\..\src\Microsoft.AspNetCore.Components.Build\ReferenceFromSource.props" />

<!-- Local alternative to <PackageReference Include="Microsoft.AspNetCore.Blazor.Build" /> -->
<Import Project="..\..\blazor\src\Microsoft.AspNetCore.Blazor.Build\ReferenceFromSource.props" />
<ItemGroup>
<PackageReference Include="Microsoft.Extensions.DependencyInjection" Version="$(AspNetCorePackageVersion)" />
<ProjectReference Include="..\..\src\Microsoft.AspNetCore.Components\Microsoft.AspNetCore.Components.csproj" />
</ItemGroup>

<ItemGroup>
<!-- Allow the build to specify the version of the Razor SDK directly -->
<PackageReference Include="Microsoft.NET.Sdk.Razor" Version="$(MicrosoftNETSdkRazorPackageVersion)" PrivateAssets="All" />
</ItemGroup>
</Project>

</Project>

14 changes: 0 additions & 14 deletions src/Components/samples/ComponentsApp.App/Program.cs

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="top-row pl-4 navbar navbar-dark">
<a class="navbar-brand" href="">Blazor app</a>
<div class="top-row pl-4 navbar navbar-dark">
<a class="navbar-brand" href="">Razor Components</a>
<button class="navbar-toggler" onclick=@ToggleNavMenu>
<span class="navbar-toggler-icon"></span>
</button>
Expand Down
11 changes: 3 additions & 8 deletions src/Components/samples/ComponentsApp.Server/Startup.cs
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,14 @@
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;
using ComponentsApp.App;

namespace ComponentsApp.Server
{
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
// Adds the Server-Side Blazor services, and those registered by the client startup.
services.AddServerSideBlazor<App.Startup>();

// Since Blazor is running on the server, we can use an application service
// to read the forecast data.
services.AddRazorComponents<App.Startup>();
services.AddSingleton<WeatherForecastService, DefaultWeatherForecastService>();
}

Expand All @@ -27,8 +22,8 @@ public void Configure(IApplicationBuilder app, IHostingEnvironment env)
app.UseDeveloperExceptionPage();
}

// Use component registrations and static files from the client startup.
app.UseServerSideBlazor<App.Startup>();
app.UseStaticFiles();
app.UseRazorComponents<App.Startup>();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❤️

}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<title>Server Side Blazor</title>
<title>Razor Components</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<app>Loading...</app>

<script src="_framework/blazor.server.js"></script>
<script src="_framework/components.server.js"></script>
</body>
</html>
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<Project Sdk="Microsoft.NET.Sdk">

<PropertyGroup>
<TargetFramework>netcoreapp3.0</TargetFramework>
<TargetFramework>netstandard2.0</TargetFramework>
<Description>JavaScript runtime files needed for ASP.NET Core Components browser rendering.</Description>
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
<TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
Expand All @@ -22,13 +22,13 @@
<Exec Command="npm ci" />
</Target>

<Target Name="RunWebpack" AfterTargets="ResolveReferences" Inputs="@(WebpackInputs)" Outputs="dist\blazor.webassembly.js;dist\blazor.server.js" DependsOnTargets="EnsureNpmRestored">
<Target Name="RunWebpack" AfterTargets="ResolveReferences" Inputs="@(WebpackInputs)" Outputs="dist\components.webassembly.js;dist\components.server.js" DependsOnTargets="EnsureNpmRestored">
<RemoveDir Directories="dist" />
<Exec Command="npm run build:debug" Condition="'$(Configuration)' == 'Debug'" />
<Exec Command="npm run build:production" Condition="'$(Configuration)' != 'Debug'" />
<ItemGroup>
<EmbeddedResource Include="dist\blazor.webassembly.js" LogicalName="blazor./blazor.webassembly.js" />
<EmbeddedResource Include="dist\blazor.server.js" LogicalName="blazor./blazor.server.js" />
<EmbeddedResource Include="dist\components.webassembly.js" LogicalName="blazor./components.webassembly.js" />
<EmbeddedResource Include="dist\components.server.js" LogicalName="blazor./components.server.js" />
</ItemGroup>
</Target>
</Project>
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ module.exports = (env, args) => ({
rules: [{ test: /\.ts?$/, loader: 'ts-loader' }]
},
entry: {
'blazor.webassembly': './src/Boot.WebAssembly.ts',
'blazor.server': './src/Boot.Server.ts',
'components.webassembly': './src/Boot.WebAssembly.ts',
'components.server': './src/Boot.Server.ts',
},
output: { path: path.join(__dirname, '/dist'), filename: '[name].js' }
});
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ private static string FindIndexHtmlFile(BlazorConfig config)
return null;
}

private static void SetCacheHeaders(StaticFileResponseContext ctx)
internal static void SetCacheHeaders(StaticFileResponseContext ctx)
{
// By setting "Cache-Control: no-cache", we're allowing the browser to store
// a cached copy of the response, but telling it that it must check with the
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
// Copyright (c) .NET Foundation. All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.

using System;
using Microsoft.AspNetCore.Components.Server;
using Microsoft.AspNetCore.Components.Server.Builder;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.FileProviders;

namespace Microsoft.AspNetCore.Builder
{
/// <summary>
/// Extension methods to configure an <see cref="IApplicationBuilder"/> for serving interactive components.
/// </summary>
public static class RazorComponentsApplicationBuilderExtensions
{
/// <summary>
/// Adds middleware for serving interactive Razor Components.
/// </summary>
/// <param name="builder">The <see cref="IApplicationBuilder"/>.</param>
/// <typeparam name="TStartup">A components app startup type.</typeparam>
/// <returns>The <see cref="IApplicationBuilder"/>.</returns>
public static IApplicationBuilder UseRazorComponents<TStartup>(
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Technically we don't need the TStartup at all. I've left it here for symmetry with AddRazorComponents and in case we want to reserve the right to use that info in the future.

I'm totally open to changing this though.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good to know. I think we should leave it as-is until we resolve all of the dependencies and tweaks needed to ship preview2.

this IApplicationBuilder builder)
{
return UseRazorComponents<TStartup>(builder, null);
}

/// <summary>
/// Adds middleware for serving interactive Razor Components.
/// </summary>
/// <param name="builder">The <see cref="IApplicationBuilder"/>.</param>
/// <param name="configure">A callback that can be used to configure the middleware.</param>
/// <typeparam name="TStartup">A components app startup type.</typeparam>
/// <returns>The <see cref="IApplicationBuilder"/>.</returns>
public static IApplicationBuilder UseRazorComponents<TStartup>(
this IApplicationBuilder builder,
Action<RazorComponentsOptions> configure)
{
if (builder == null)
{
throw new ArgumentNullException(nameof(builder));
}

var options = new RazorComponentsOptions();
configure?.Invoke(options);

// The use case for this flag is when developers want to add their own
// SignalR middleware, e.g., when using Azure SignalR. By default we
// add SignalR and BlazorHub automatically.
if (options.UseSignalRWithBlazorHub)
{
builder.UseSignalR(route => route.MapHub<BlazorHub>(BlazorHub.DefaultPath));
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does this need to be renamed to components?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, eventually. There are lots of remaining bits of renaming-cleanup like that, but I'm not trying to get all of them done before Preview 2. I'm only focused on the ones that are really in developers' faces in default scenarios, which this isn't.

}

// Use embedded static content for /_framework
builder.Map("/_framework", frameworkBuilder =>
{
UseFrameworkFiles(frameworkBuilder);
});

// Use SPA fallback routing for anything else
builder.UseSpa(spa => { });

return builder;
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This got me thinking.
If we somehow change the way we distribute /_framework files

The core of this method would be
builder.UseSignalR();
builder.UseSpa();

I'm wondering what your thoughts are on having something like this directly on the template.

builder.UseSignalR(r => r.MapComponentsHub());
builder.UseSpa(spa =>{ });

compared to
app.UseRazorComponents()

The reason for it being that it's more straightforward what's going on in the pipeline and its easier to manipulate, for example to add Azure SignalR (it composes better).

Thoughts?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we somehow change the way we distribute /_framework files

Yep, we would need to do that. I'd be keen not to have components.server.js as a physical file in the project, because that gets into difficulty with versioning mismatches and people being confused into thinking it's a good idea to edit the contents or trying to bundle it with their own files.

The mechanism here of serving it from middleware in UseRazorComponents is preferable I think, but we can review the factoring as we go on. I'm totally open to making UseRazorComponents just be shorthand for a collection of lower-level middlewares you can add manually if you prefer.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

. I'd be keen not to have components.server.js as a physical file in the project,

Also servicing.


private static void UseFrameworkFiles(IApplicationBuilder builder)
{
builder.UseStaticFiles(new StaticFileOptions
{
FileProvider = new ManifestEmbeddedFileProvider(
typeof(RazorComponentsApplicationBuilderExtensions).Assembly,
"frameworkFiles"),
OnPrepareResponse = BlazorApplicationBuilderExtensions.SetCacheHeaders
});

// TODO: Remove this
// This is needed temporarily only until we implement a proper version
// of library-embedded static resources for Razor Components apps.
builder.Map("/blazor.boot.json", bootJsonBuilder =>
{
bootJsonBuilder.Use(async (ctx, next) =>
{
ctx.Response.ContentType = "application/json";
await ctx.Response.WriteAsync(@"{ ""cssReferences"": [], ""jsReferences"": [] }");
});
});
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
// Copyright (c) .NET Foundation. All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.

using Microsoft.AspNetCore.Builder;

namespace Microsoft.AspNetCore.Components.Server.Builder
{
/// <summary>
/// Specifies options to configure <see cref="RazorComponentsApplicationBuilderExtensions.UseRazorComponents{TStartup}(IApplicationBuilder)"/>
/// </summary>
public class RazorComponentsOptions
{
/// <summary>
/// Gets or sets a flag to indicate whether to attach middleware for
/// communicating with interactive components via SignalR. Defaults
/// to true.
///
/// If the value is set to false, the application must manually add
/// SignalR middleware with <see cref="BlazorHub"/>.
/// </summary>
public bool UseSignalRWithBlazorHub { get; set; } = true;
}
}
Loading