search

Megabit / Blazorise

Blazorise is a component library built on top of Blazor with support for CSS frameworks like Bootstrap, Tailwind, Bulma, AntDesign, and Material.
https://blazorise.com/
Other
3.29k stars 531 forks source link

Static Files rework #261

Closed Basaingeal closed 5 years ago

Basaingeal commented 5 years ago

This relates to a long closed issue: https://github.com/stsrki/Blazorise/issues/56.

I see that this project is utilizing the Blazor Component Library template. In Blazor preview 8, they replaced that with the existing Razor Class Library.

ASP.NET Core and Blazor updates in .NET Core 3.0 Preview 8

Switching to that format would do two things:

Instead of directing Blazor Server users to download static files from the Release tab, you could just include them in the library's wwwroot folder, and then they can be accessed like this: <script src="_content/Blazorise/<STATIC_FILE_NAME>"></script>

The RCL template isn't too different from the BCL template. Pretty much by adding this line to your csproj: <RazorLangVersion>3.0</RazorLangVersion>, removing the EmbeddedResource lines, and adding all relevant static files to wwwroot, you'd remove the need for different instructions for Blazor Server and Blazor WebAssembly, and potentially be more in line with what Blazor libraries will look like going forward.

This is the process I'm currently using for my SweetAlert2 library. https://github.com/Basaingeal/Razor.SweetAlert2

There may be something about this library that doesn't allow this, but this is just my estimation of a potential improvement,

stsrki commented 5 years ago

A line with <RazorLangVersion>3.0</RazorLangVersion> is already added to .props file that is referenced by all Blazorise projects. See here https://github.com/stsrki/Blazorise/blob/master/Build/Blazorise.props

If only thing required to change is to remove EmbeddedResource than it should be fairly easy to convert to Razor Class Library. I will need to investigate more after release of 0.8.5.

Basaingeal commented 5 years ago

Ah yes, I see now. Also I see that the files are already sitting in their respective wwwroot folders so it would only be removing the EmbeddedResource lines and updating documentation. Looking forward to the update.

stsrki commented 5 years ago

Anyways thank you for the info, I completely overlooked the part with EmbeddedResource in the Blazor release notes.

stsrki commented 5 years ago

@Basaingeal I'm trying to update Blazorise based on your suggestion but it doesn't work. When I remove EmbeddedResource everything breaks and no js or css are included.

Replacing

<ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Blazor" Version="3.0.0-preview9.19457.4" />
    <PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="3.0.0-preview9.19457.4" PrivateAssets="all" />
</ItemGroup>

with

<ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components" Version="3.0.0-rc1.19457.4" />
    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="3.0.0-rc1.19457.4" />
</ItemGroup>

didn't help.

I also tried GeneratePackageOnBuild set to true.

Basaingeal commented 5 years ago

With this change, both Blazor Server and Blazor WebAssembly require the new script/link tags to work. It no longer is automatically bundled in Blazor WebAssembly apps, but it also now works with Blazor Server apps.

Did you replace 

<link href="blazorise.css" rel="stylesheet" />
<link href="blazorise.bootstrap.css" rel="stylesheet" />

with

<link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
<link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />

and

<script src="blazorise.js"></script>
<script src="blazorise.bootstrap.js"></script>

with

<script src="_content/Blazorise/blazorise.js"></script>
<script src="_content/Blazorise.Bootstrap/blazorise.bootstrap.js"></script>

in your Server demos and also add them to your WebAssembly demos? Looking at the code I'm not sure where the sidebar, snackbar, and charts files are coming from, but if they're included in the library, they should be able to be referenced in a similar way.

Basaingeal commented 5 years ago

I'm testing on my fork, and I think I'm seeing what you're seeing. All my static file requests are coming back 404. I ran into that myself on my project, and I'm trying to see what I did to resolve it.

Basaingeal commented 5 years ago

The PR draft above describes the changes that I made that I got working: https://github.com/stsrki/Blazorise/pull/262

Sorry about the formatting of the html file, but the important lines are at the end of the header and the end of the body.

Edit: Changing the packages to Microsoft.AspNetCore.Components was necessary to get it to work.

stsrki commented 5 years ago

Looking at your PR and trying your branch I see all the same things that I tried and it wasn't working. It's really strange. I will accept PR after I merge changes from dev085 branch. There was a lot of changes so I don't want any conflict.

Also I'm still not sure about Microsoft.AspNetCore.Components vs Microsoft.AspNetCore.Blazor. I remember a few months ago Blazor team has introduced Components package but then soon after returned the Blazor package. I must find the source so I can see the reason why. Not sure but I think Blazor is there so that static files can be included in client-side apps without explicitly adding them to index.html.

Anyways great work. If you have some more time you can also finish adding changes to Bulma, Frolic and Material projects. Also maybe do the same with Demo static files.

stsrki commented 5 years ago

I asked a question in AspNetCore repo so that we know what is the right way to go for. https://github.com/aspnet/AspNetCore/issues/14142

Basaingeal commented 5 years ago

Working on that now. It is strange. I made the changes to the other projects (locally at the moment) and I'm getting 404s for the static assets, but it's working with both Bootstrap projects.

stsrki commented 5 years ago

So it seems, based on the answers from @javiercn the right way to go is to use Microsoft.AspNetCore.Components package reference.

This means that we have to update readme and documentation to make note that every js and css file must be included manually in the index.html or _Host.cshtml. eg.

<script src="_content/Blazorise/blazorise.js"></script>
<script src="_content/Blazorise.Bootstrap/blazorise.bootstrap.js"></script>

It is a breaking change for users of client-side(WebAssembly) Blazor apps, but it had to be done eventually.

stsrki commented 5 years ago

I have merged PR to master. Thanks for the excellent work. This is the example of what I expect from Blazorise community :)

stsrki commented 5 years ago

@Basaingeal

I'm having trouble with the static files. I have uploaded NuGet files to https://www.myget.org/ before I publish it live. When I create empty Blazor project and try to consume Blazorise I get 404 for static files.

Can you try to create empty Blazor project on your side and test for youself? I must be missing something? Blazorise feed on myget is https://www.myget.org/F/blazorise/api/v3/index.json

I cannot publish new version of Blazorise without this fixed. If there is no solution I will need to revert all changes :(

Latest test version is 0.8.6-p1

Basaingeal commented 5 years ago

Sure thing. I'll take a look now.

Basaingeal commented 5 years ago

I see that you have nuspec files as well as project files defining your package. I don't know too much about .nuspec though, as my project doesn't use them.

Are you using the dotnet cli to pack your nuget package or nuget.exe?

My thought is that if you don't use the dotnet cli and also the csproj file instead of a nuspec file, the static file packing doesn't work as intended.

stsrki commented 5 years ago

I'm using nuget for packing. Could be the reason why it wont work. I will try dotnet cli later when I get home.

stsrki commented 5 years ago

OK, so I have updated all projects to use dotnet pack instead of nuget pack and it seems it's working now. If you have time please check one more time if it's OK on your side. You can find 0.8.6-p2 on myget feed.

If everything is OK I will push all to NuGet.

Basaingeal commented 5 years ago

Yes, that worked well for me. I wonder if they'll update NuGet for that soon, or if there's something needed in the .nuspec file. I can't find any documentation about it.

Note, I've only tested with a Blazor Server App. I haven't tested Blazor WebAssembly, but I can do that too if you'd like.

Also, the README still has outdated instructions for static files. Are you going to update that after you push?

One final thing, since this is introducing a breaking change, do you think that v0.9.0 might be more appropriate? I know that messes up your roadmap a bit, but it might be something to consider.

Edit: Tested and working in a hosted Blazor WebAssembly app.

stsrki commented 5 years ago

I can probably configure nuspec also to work with static files but I don't want to wait any longer. Lets just leave it for later.

Documentation and usage are ready, just need them to commit to master.

It will be v0.8.6 as I don't want to mess with my roadmap. I plan to add major features for v0.9. And it's not that much of a change for library users anyway.

Thank you for all the help!!

stsrki commented 5 years ago

Published live!

devantler commented 4 years ago

Hi @stsrki

Was this solved? I'm having an issue where I'm using Blazorise in a RCL and in BlazorServerApp, that references said RCL. It throws this error, for some reason..

Unhandled exception. System.IO.DirectoryNotFoundException: /root/.nuget/packages/blazorise/0.9.0/staticwebassets/
   at Microsoft.Extensions.FileProviders.PhysicalFileProvider..ctor(String root, ExclusionFilters filters)
   at Microsoft.Extensions.FileProviders.PhysicalFileProvider..ctor(String root)
   at Microsoft.AspNetCore.Hosting.StaticWebAssets.StaticWebAssetsFileProvider..ctor(String pathPrefix, String contentRoot)
   at Microsoft.AspNetCore.Hosting.StaticWebAssets.StaticWebAssetsLoader.<>c.<UseStaticWebAssetsCore>b__2_0(ContentRootMapping cr)
   at System.Linq.Enumerable.SelectEnumerableIterator`2.MoveNext()
   at System.Linq.Enumerable.OfTypeIterator[TResult](IEnumerable source)+MoveNext()
   at System.Collections.Generic.List`1..ctor(IEnumerable`1 collection)
   at System.Linq.Enumerable.ToList[TSource](IEnumerable`1 source)
   at Microsoft.AspNetCore.Hosting.StaticWebAssets.StaticWebAssetsLoader.UseStaticWebAssetsCore(IWebHostEnvironment environment, Stream manifest)
   at Microsoft.AspNetCore.Hosting.StaticWebAssets.StaticWebAssetsLoader.UseStaticWebAssets(IWebHostEnvironment environment, IConfiguration configuration)
   at Microsoft.AspNetCore.WebHost.<>c.<ConfigureWebDefaults>b__9_0(WebHostBuilderContext ctx, IConfigurationBuilder cb)
   at Microsoft.AspNetCore.Hosting.GenericWebHostBuilder.<>c__DisplayClass8_0.<ConfigureAppConfiguration>b__0(HostBuilderContext context, IConfigurationBuilder builder)
   at Microsoft.Extensions.Hosting.HostBuilder.BuildAppConfiguration()
   at Microsoft.Extensions.Hosting.HostBuilder.Build()
   at BusinessUMLCreator.UI.BlazorWeb.Program.Main(String[] args) in /Users/nikolaidamm/Repos/Work/BusinessUMLCreator/src/UI/BusinessUMLCreator.UI.BlazorWeb/Program.cs:line 20

Do you have any idea why this happens, or if using Blazorise in RCL is supported?

stsrki commented 4 years ago

@niem94 yes this should work. All projects are converted to RCL and they can be used in both WebAssembly and Server side applications. But you must manually specify static content files in your index.html and/or host.cshtml.

I guess something is missing in your application. Look at the Blazorise demo apps to compare with your project.

devantler commented 4 years ago

@stsrki As always thanks — it is definitely helpful to know it should work! I'll see if I can find the cause :-)

devantler commented 4 years ago

@stsrki Somehow the dotnet compiler had f'ed up — a "dotnet clean" fixed my problems. Mildly annoyed, that i wasted so much time on that..

Anyhow I just wanted to let you know it works! :-)