Does anyone know of a good way to minify all js, css, etc. files as part of the publish process? I'm thinking, run a batch file that fires jmin? But not sure how to go about this?
You could use the .net ClientDependancy Framework to do this
Update
You start out by defining paths to the directories which contain the resources to manage, something like this:
<CD:ClientDependencyLoader runat="server" id="Loader">
<Paths>
<CD:ClientDependencyPath Name="Styles" Path="~/css" />
<CD:ClientDependencyPath Name="Scripts" Path="~/js" />
</Paths>
</CD:ClientDependencyLoader>
You then specify the files to manage in JS or CSS includes:
<CD:JsInclude ID="baseScript" runat="server" FilePath="~/js/baseScript.js" Priority="0" />
Don't forget to register the control at the top of the file:
<%# Register Namespace="ClientDependency.Core.Controls" Assembly="ClientDependency.Core" TagPrefix="CD" %>
Related
I m very new to visual studio and dnn and I m learning the "basics" with a book. I m trying to build my very first module at the moment . In one of the ascx files I have the following code:
<%# Control Language="C#" AutoEventWireup ="true" CodeBehind="Settings.ascx.cs" Inherits="wrox.Modules.guestbook.Settings" %>
<%# Register TagName="label" TagPrefix="dnn" Src="~/controls/labelcontrol.ascx" %>
<fieldset>
<div class="dnnFormItem">
<dnn:Label ID="lblAutoApprove" runat="server" ResourceKey="lblAutoApprove"
ControlName="chkAutoApprove" />
</div>
</fieldset>
<asp:CheckBox runat="server" ID="chkAutoApprove" />
The following piece of code gives the following warning: file '~/controls/labelcontrol.ascx" was not found
<%# Register TagName="label" TagPrefix="dnn" Src="~/controls/labelcontrol.ascx" %>
I need to use the labecontrol.ascx file for this piece of code.
<div class="dnnFormItem">
<dnn:Label ID="lblAutoApprove" runat="server"
ResourceKey="lblAutoApprove"
ControlName="chkAutoApprove" />
</div>
This piece of codes give the following warning because the labecontrol.ascx file is missing (As far as I know):Element 'Label' is not a known element. This can occur if there is a compilation error in the Web site, or the web.config file is missing.
I found two simular questions on this site.
The first one wasn't very helpfull because the answer was to ignore the warning. I dont want to do this.
The second question wasn't helpfull either because he/she had a typo.
How can I get rid of this warning?
notes:
I m using visual studio 2017 and dotnetnuke 8
Its been a while since I have done DNN development but the issue is generally that when you are making a custom module, you make it with the context that the rest of DNN is there, but during develop-time, the rest of DNN is not actually there (or at least not where Visual Studio expects to find it).
I would imagine you could get rid of the warning by copying the DNN label control into the controls folder of your module. If you do this, I would make sure your build does NOT include the DNN control and that you put it in whatever ignore list your source control uses.
why the "angular part" of abp .netcore template is distributed in a visual studio solution (AbpCore.AngularUI.sln)?
Is there any .netcore code inside it or some serverside functionality?
is the whole serverside code in the other solution (AbpCore.sln), or there is more?
In enterprise companies front-end and back-end developer teams are separated. So client-side and server-side code structure is seperated. But if you want you can merge the solutions following the steps below.
Merging Solutions
Step 1: Copy files from client project to server project
Copy files in below screenshot from your client solution to root folder of *Web.Host project in server solution.
Step 2: Modify tsconfig.json
If the tsconfig.json file under src folder does not contain skipLibCheck configuration, you need to add it, because current version of lodash typings has an error.
"target": "es5",
"skipLibCheck": true,
"typeRoots": [
"../node_modules/#types"
]
If the tsconfig.json file under e2e folder contains below configuration
"extends": "../tsconfig.json"
You need to change it like this, becasue above configuration is wrong.
"extends": "../src/tsconfig.json"
Step 3: Modify .gitignore file
Since we copied .gitignore file from another project, we need to remove lines under "# VS files" which contains "PhoneBook.AngularUI" keyword.
Step 4: Modify *.Web.Host.csproj
We need to exclude "node_modules", "dist" and "external_libs" folders from compiled folders. In order to do that, add below content to your csproj file's content:
<ItemGroup>
<None Include="App.config" />
<None Update="log4net.config">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
</None>
<None Update="wwwroot\**\*">
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
</None>
<Compile Remove="dist\**" />
<Compile Remove="external_libs\**" />
<Compile Remove="node_modules\**" />
<EmbeddedResource Remove="dist\**" />
<EmbeddedResource Remove="external_libs\**" />
<EmbeddedResource Remove="node_modules\**" />
<None Remove="dist\**" />
<None Remove="external_libs\**" />
<None Remove="node_modules\**" />
</ItemGroup>
After doing this, your project must be build successfully.
Step 5: Running the host project
Now, we can run our host project by pressing the F5 button. We assume that, you have already applied migrations to your database and runned host project before starting this document according to ASP.NET Core & Angular 2+ document.
Step 6: Running the client (Angular 2.x) project
We need to open a command prompt and navigate to "..\src\Acme.PhoneBook.Web.Host" folder. Then we need to run "npm install" command in order to install our project's dependencies. Then we can run "npm start" command to start our project.
After this point, we can work on a single Visual Studio 2017+ solution with our client and server projects. Since we use angular-cli for serving our client application, we cannot use same port both for our client and server apps during development.
But, we can do it when publishing our application. Let's see how.
Publish Configuration
Step 1: Configure .angular-cli.json
Our client project is published by angular-cli. In order to publish a single website using Visual Studio, first we need to modify publish directory for angular-cli. In order to do that, open .angular-cli.json in your project and change value of "outDir" to "wwwroot/dist". We could use "wwwroot" as outDir but, angular-cli deletes entire folder before it builds the application. So, In order not to loose other files under wwwroot folder, we used wwwroot/dist.
Step 2: Build client app before publish
Before publishing our application using Visual Studio's publish, we need to build our angular application using angular-cli. Your *.Web.Host.csproj will be like this:
<Target Name="PrepublishScript" BeforeTargets="ComputeFilesToPublish">
<Exec Command="ng build --prod" />
</Target>
In this way, angular-cli is going to build your client application before every publish you make.
Step 3: Move client app files to wwwroot
We need to move files and folders under "wwwroot/dist" to "wwwroot". In order to do that, change your *.Web.Host.csproj like this:
<Target Name="PrepublishScript" BeforeTargets="ComputeFilesToPublish">
<Exec Command="ng build --prod"></Exec>
<Exec Command="robocopy $(MSBuildProjectDirectory)\wwwroot\dist\ $(MSBuildProjectDirectory)\wwwroot\ /S /E /MOVE" IgnoreExitCode="True" />
<ItemGroup>
<DistFiles Include="wwwroot\**\*" />
<ResolvedFileToPublish Include="#(DistFiles->'%(FullPath)')" Exclude="#(ResolvedFileToPublish)">
<RelativePath>%(DistFiles.Identity)</RelativePath>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
</ResolvedFileToPublish>
</ItemGroup>
</Target>
This command copies entire content of wwwroot\dist folder to wwwroot and deletes dist folder before publish. In this way, will have a clean wwwroot folder.
Step 4: Add middleware for angular 2.x rotues
We need to do one more thing before publising our application. Since we host our Angular 2.x application in a ASP.NET Core website, we will have a routing problem. After publishing our application, if we refresh page when we navigate to a page in our application (for example: /admin/users), we will have a empty page. Because when we request an url like http://yourwebsite.com/admin/users, ASP.NET Core will not be able to find a matching Controller. In order to overcome this problem, add below code to Startup.cs file just before "app.UseStaticFiles();" line.
app.Use(async (context, next) =>
{
await next();
if (context.Response.StatusCode == 404
&& !Path.HasExtension(context.Request.Path.Value))
{
context.Request.Path = "/index.html";
await next();
}
});
Step 5: Remove HomeContoller
We also need to remove HomeController from our project, so the app's default route will be our angular client app. We can still access to swagger ui under /swagger/ui/index.html.
Now, we can publish our website using Visaul Studio's publish at once.
After Publish
Our client and server applications are designed to work separately. Because of that, they have different configurations. In order to make them work together, we need to make some configurations after publish as well. We need to use same address configured for our host application in appsettings.json for our angular2 application. First configure your appsettings.json file for values "ServerRootAddress", "ClientRootAddress", "CorsOrigins". ServerRootAddress and ClientRootAddress must be same since we are hosting client and server together. If you are using subdomain per tenancy, then you need to include allowed addresses into CorsOrigins, otherwise CorsOrigins will be same as ServerRootAddress and ClientRootAddress. Then, copy the value of "ServerRootAddress" in appsettings.json and use this value for "remoteServiceBaseUrl" and "appBaseUrl" in "appconfig.json" under "wwwroot\assets\" folder.
Now you can view your website under "http://yourwebsite.com/". If you want to view swagger ui, then you can use http://yourwebsite.com/swagger/ui/index.html.
Notice that, appsettings.json and appconfig.json are two different files.
Originally, you can check out asp.net zero merging angular client codes documentation
There is a checkbox to select if you want to download only one solution (AngularUI and Host project).
Please refer the image.
I am trying to integrate Ajax minify in the build of VS 2010. We are using the syntax as shown below and it does work but I want the file to copied to a specific folder. Currently its creating the file in the root directory. How can i change this.
This is the syntax I am using
<AjaxMin Switches="-global:jQuery,$"
JsSourceFiles="#(JS)" JsCombinedFileName="xx.min.js"/>
The solution was to use
<AjaxMin Switches="-global:jQuery,$"
JsSourceFiles="#(JS)" JsCombinedFileName="Scripts\xx.min.js"/>
We are about to implement a bunch of OpenSocial gadgets. They are not going to be run on Facebook or any other social network but rather on our own internal Apache Shindig server. (We embed these gadgets using iframes in a normal ASP.NET MVC cshtml view)
According to http://docs.opensocial.org/display/OSREF/OpenSocial+Tutorial, the structure of a gadget is like so:
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Hello World!">
<Require feature="opensocial-0.8" />
</ModulePrefs>
<Content type="html">
<![CDATA[
Hello, world!
]]>
</Content>
</Module>
Whereas the HTML, CSS and JS are embedded within the in the tag. If we want to develop a file like this in XML format in Visual Studio, it renders Syntax Highlighting, IntelliSense, IntelliTrace and JavaScript debugging impossible. That's not very comfortable.
Question 1: Do you know of any usable(!) extension for Visual Studio that re-enables all these features for these OpenSocial XML gadgets?
Question 2: Or if not, have any of you ever tried the same and found a good way to work around these hurdles?
Update: We have done a proof-of-concept of using a post build step that takes a plain HTML file, a plain JS file, and an XML skeleton and merges them into a gadget. In debug mode we might conceivably include the plain files directly while in the deployment process we call Shindig with the merged XML file from the post build step:
if (#Html.IsDebugMode())
{
<iframe src="/Gadgets/HelloWorld.html"/>
}
else
{
<iframe src="http://example.org/shindig?url=http://example.org/Gadgets/Merged/HelloWorld.xml"/>
}
This is how the solution works:
Add a Gadgets\HelloWorld.js file
Add a Gadgets\HelloWorld.html file that includes the js file.
Add a Gadgets\HelloWorld.xml file with the gadget XML but with an empty <Content> tag.
Create a CSHTML page with an iframe that includes the plain HTML file in Debug mode but includes the Gadget in Release mode.
Define a Post Build Event that reads the contents of HelloWorld.html and pastes it into the Content tag of the XML. In addition it reads the JS code from the JS file and replaces the script inclusion <script src="HelloWorld.js" /> in the HTML by an inline JavaScript <script>...</script> with the respective code.
Advantages:
Clean separation of logic (JS file), presentation (HTML file) and metadata (XML file).
Complete Visual Studio HTML authoring support when working on the HTML.
Complete Javascript authoring support when working on the JS.
Tools such as JSLint can be used to check the JavaScript style.
Caveats:
In Debug mode, if we call Shindig to render the gadget, we don't have a way to open the JavaScript in Visual Studio and setting a breakpoint. However, if any error occurs in the JS code, Visual Studio will open a view on the JS code and mark the erroneous line. Once that view is open, we can use it for setting break points, too. Live editing is not possible though because the original JS file only gets merged into the XML in the course of the build process.
On the other hand, if we include the plain HTML file as an iframe instead of having Shindig render it, we gain the possibility of live-editing and debugging directly in the respective files. But of course all of the Shindig features are not effective. In particular, all the scripts automatically added by Shindig are missing or have to be included by hand.
Ideally every change in the HTML or JS file while running the application in debug mode would immediately update the merged Gadget XML file, thus allowing life editing even when using Shindig.
A2: You can develop your javascript in a separated js file and just include it in the gadget xml as you would with html file contain a js include. Further more, you can use frames inside your gadget html, but that will may prevent you from using some of the js API available from Shindig.
In Visual Studio 2010 I have created a new project with the Silverlight Business Application template. I added an Images folder under the Assets folder. The png files in this folder have Build Action set to Resource, and Copy To Output Directory set to Always. In the header section I added an <Image Source="Assets\Images\logo.png" /> element. In design time it displays my image. At runtime it does not.
Any idea as to why my image is missing at runtime?
--Shawn
I had a similar problem with images showing in design-time, but not at runtime. Mine was using a pack URI so I wanted to post that fix as well:
Does not work at runtime, does work at design-time:
<Image Source="TelerikDemo;component/Images/logo.png" />
Works at both design and runtime:
<Image Source="/TelerikDemo;component/Images/logo.png" />
Note the extra '/' before the Pack URI starts.
hmf! Turns out my backslashes needed to be forward slashes!