My existing project is in webassembly but due to speed issue we are converting into server app. So for this I created server app from abp suite and I can see there is no host project so do we need to add all the pages in blazor project only?
Yes you should do it in your Blazor project if it's blazor-server.
Also I have a fresh server app and added only my connection string in appsettings.json file. I am getting below error If I try to run project.
You have to run following command in your project before run
abp install-libs
Hi @
You can place the following page in your .Web project to customize it.
/Pages/Identity/OrganizationUnits/Index.cshtml
@page
@using System.Net
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Mvc.Localization
@using Volo.Abp.AspNetCore.Mvc.UI.Layout
@using Volo.Abp.AspNetCore.Mvc.UI.Packages.JsTree
@using Volo.Abp.Identity
@using Volo.Abp.Identity.Localization
@using Volo.Abp.Identity.Web.Navigation
@using Volo.Abp.Identity.Web.Pages.Identity.OrganizationUnits
@model IndexModel
@inject IHtmlLocalizer<IdentityResource> L
@inject IAuthorizationService Authorization
@inject IPageLayout PageLayout
@{
PageLayout.Content.Title = L["OrganizationUnits"].Value;
PageLayout.Content.BreadCrumb.Add(L["Menu:IdentityManagement"].Value);
PageLayout.Content.MenuItemName = IdentityMenuNames.OrganizationUnits;
}
@section styles {
<abp-style-bundle name="@typeof(IndexModel).FullName">
<abp-style type="typeof(JsTreeStyleContributor)" />
<abp-style src="/Pages/AbpPermissionManagement/permission-management-modal.css" />
<abp-style src="/Pages/Identity/OrganizationUnits/organization-unit.css" />
</abp-style-bundle>
}
@section scripts {
<abp-script-bundle name="@typeof(IndexModel).FullName">
<abp-script src="/client-proxies/identity-proxy.js" />
<abp-script type="typeof(JsTreeScriptContributor)" />
<abp-script src="/Pages/AbpPermissionManagement/permission-management-modal.js" />
<abp-script src="/Pages/Identity/OrganizationUnits/index.js"></abp-script>
<abp-script src="/Pages/Identity/OrganizationUnits/addMemberModal.js"></abp-script>
<abp-script src="/Pages/Identity/OrganizationUnits/addRoleModal.js"></abp-script>
</abp-script-bundle>
}
@section content_toolbar {
}
<div id="OrganizationUnitsWrapper">
<abp-row>
<abp-column size-md="_12" size-lg="_6">
<abp-card>
<abp-card-body>
<abp-card-title>
<abp-row h-align="Between">
<abp-column>
<span style="font-size:initial"> @L["OrganizationTree"]</span>
</abp-column>
<abp-column>
@if (await Authorization.IsGrantedAsync(IdentityPermissions.OrganizationUnits.ManageOU))
{
<abp-button class="float-end" button-type="Primary" size="Small" name="CreateOrganizationUnit" text="@L["AddRootUnit"].Value" icon="plus" />
}
</abp-column>
</abp-row>
</abp-card-title>
<div id="OrganizationUnitEditTree"></div>
<div id="OrganizationUnitTreeEmptyInfo" class="text-muted">@L["NoOrganizationUnits"]</div>
</abp-card-body>
</abp-card>
</abp-column>
<abp-column size-md="_12" size-lg="_6">
<abp-card>
<abp-card-header>
<h3 class="selected-organizationunit-name"></h3>
</abp-card-header>
<abp-card-body class="p-0">
<abp-tabs>
<abp-tab name="Members" title="@L["Members"].Value">
<div id="OuMembersTable" style="display:none">
@if (await Authorization.IsGrantedAsync(IdentityPermissions.OrganizationUnits.ManageUsers))
{
<div class="text-end mb-3">
<abp-button button-type="Primary" size="Small" name="AddMember" text="@L["AddMember"].Value" icon="plus" />
</div>
}
<abp-table striped-rows="true" class="nowrap"></abp-table>
</div>
<div id="OuMembersEmptyInfo" class="text-muted">
@L["SelectAnOrganizationUnitToSeeMembers"]
</div>
</abp-tab>
<abp-tab name="Roles" title="@L["Roles"].Value">
<div id="OuRolesTable" style="display:none">
@if (await Authorization.IsGrantedAsync(IdentityPermissions.OrganizationUnits.ManageRoles))
{
<div class="text-end mb-3">
<abp-button button-type="Primary" size="Small" name="AddRole" text="@L["AddRole"].Value" icon="plus" />
</div>
}
<abp-table striped-rows="true" class="nowrap"></abp-table>
</div>
<div id="OuRolesEmptyInfo" class="text-muted">
@L["SelectAnOrganizationUnitToSeeRoles"]
</div>
</abp-tab>
</abp-tabs>
</abp-card-body>
</abp-card>
</abp-column>
</abp-row>
</div>
You can follow this documentation for overriding razor pages: https://docs.abp.io/en/abp/latest/UI/AspNetCore/Customization-User-Interface#completely-overriding-a-razor-page
Both Blazor Wasm and Server don't have login UI, so you're redirected to authentication server UI to log in. So the authentication server is built with MVC UI. You can customize the login page like in a regular MVC application template: https://docs.abp.io/en/abp/latest/UI/AspNetCore/Customization-User-Interface#overriding-a-page
Please note that:
IdentityServer ProjectHttpApi.Host project.Also, you can follow this article for a more detailed explanation: https://community.abp.io/posts/how-to-customize-the-login-page-of-an-abp-blazor-application-by4o9yms
It's for a demonstration, you can create a new project with your favorite project template such as app-pro in this case. and make a comparison of what should be changed. Configuring a Blazor Server from zero is really complicated and might be buggy. So, create a new blazor-server project and compare changes.
Or, you can move your existing pages to the newly created blazor-server project instead of modifying the old one. After moving the files, you can remove the old project. That is a different way but you can lose your git history
Blazor WASM is a client-side application and entire code is shipped to browsers. So it can't connect to database directly and it requires a HTTP backend application, in that case it's your HttpApi.Host project.
But Blazor Server is a typical AspNetCore web application and performs blazor actions with websocket. So, this AspNetCore application can connect database directly, it can work without HTTP API, because itself is a server-side application.
If you want to still use your HttpApi.Host as a backend service with blazor-server, you have to create a new project with --tiered parameter and compare differences with your existing project. But if you want to unify your backend application and blazor in a single Blazor Server application, you can just create a regular blazor server application and compare it with your existing application to see differences.
(abp new MyProjectName -u blazor-server: This command creates a unified blazor server project without an extra HttpApi.Host project.
abp new MyProjectName -u blazor-server --tiered: This command creates a blazor server and HttpApi.Host project together and that blazor project sends requests to HTTP API instead of directly connecting database.
It depends which project type are you using. Is your blazor-server will connect directly database or make requests to you existing HttpApi.Host?
Best way to change it to blazor server is creating new project and compare changes like I did in this PR: https://github.com/enisn/abp-blazor-wasm-to-server/pull/1
If your new blazor-server will send requests to HttpApi.Host like exactly same with current webassembly, you can create the project with --tiered parameter.
But you should customize files to watch in .csproj file for including js files according to Microsoft's docs: Customize files list to watch
<ItemGroup>
<!-- extends watching group to include *.js files -->
<Watch Include="**\*.js" Exclude="node_modules\**\*;**\*.js.map;obj\**\*;bin\**\*" />
</ItemGroup>
Hi @developer_infoline
Have you tried to run your project with dotnet watch run. The watch should watch changes on the rest of the files like css too.
https://docs.microsoft.com/en-us/aspnet/core/tutorials/dotnet-watch?view=aspnetcore-6.0#run-net-core-cli-commands-using-dotnet-watch
dotnet watch refreshes the browser when it detects changes to watched files. To do this, the watch command injects a middleware to the app that modifies HTML responses created by the app. The middleware adds a JavaScript script block to the page that allows dotnet watch to instruct the browser to refresh. Currently, changes to all watched files, including static content such as .html and .css files cause the app to be rebuilt.
Hi @FrancoisLabelle
Your pipeline should restore client libraries too before or after the build and so you can include the libs folder in your docker image too.
I don't understand what you mean by "clean/vanilla server". As I understand you don't dockerize your application and trying to deploy DLLs only? Like IIS deployment. If yes, you can still restore client libraries in your pipeline. It should be a part of your build step. It should be easy to add a new step to the pipeline in each modern DevOps tool.
Remove the .gitignore exclusion and push the libs folder to my source file repository ?
But if you prefer, you can include the libs folder in your git. One of the reasons for removing them is their size. But in a single project, you can choose to keep them in git.
Unfortunately, there is no mention of it in this documentation: https://docs.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/additional-scenarios?view=aspnetcore-6.0
We (as ABP Framework) don't implement directly this flow. It's implemented by Microsoft, you may ask them about it. There may be an internal API or something else but I don't think so. Because that component performs the functionality, if you can achieve to remove it, the logout functionality won't be performed at the end.