As you can see, on dotnet publish command, it automatically assumes that it is being published only in production, but suppose that I want to publish for staging environment, is there any way to configure the target so that when executed for instance: dotnet publish --environment Staging it should run npm run build --staging
<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
<Exec WorkingDirectory="$(SpaRoot)" Command="npm install --force" />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build --prod" />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --prod" Condition=" '$(BuildServerSideRenderer)' == 'true' " />
<ItemGroup>
<DistFiles Include="$(SpaRoot)build\**" />
<DistFiles Include="$(SpaRoot)node_modules\**" Condition="'$(BuildServerSideRenderer)' == 'true'" />
<ResolvedFileToPublish Include="#(DistFiles->'%(FullPath)')" Exclude="#(ResolvedFileToPublish)">
<RelativePath>%(DistFiles.Identity)</RelativePath>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
</ResolvedFileToPublish>
</ItemGroup>
</Target>
Related
Time back I created a .net core with react SPA project from a template, ever since I have been unable to identify what is causing the web.config to be update each time I build.
Well, to be precise it is updated only adding back the environment variables tags, setting the environment to Development.
Can anyone please tell me how to prevent this?
<environmentVariables>
<environmentVariable name="ASPNETCORE_ENVIRONMENT" value="Development" />
</environmentVariables>
Here is the csproj file content:
<PropertyGroup>
<TargetFramework>net6.0</TargetFramework>
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
<TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
<IsPackable>false</IsPackable>
<SpaRoot>ClientApp\</SpaRoot>
<DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.OData" Version="8.0.12" />
<PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="6.0.13" />
<PackageReference Include="Minded" Version="0.1.3" />
[...]
<ItemGroup>
<!-- Don't publish the SPA source files, but do show them in the project files list -->
<Content Remove="$(SpaRoot)**" />
<None Remove="$(SpaRoot)**" />
<None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />
</ItemGroup>
<ItemGroup>
<Folder Include="ClientApp\src\components\" />
</ItemGroup>
<Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
<!-- Ensure Node.js is installed -->
<Exec Command="node --version" ContinueOnError="true">
<Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
</Exec>
<Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
<Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
</Target>
<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
<Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />
<!-- Include the newly-built files in the publish output -->
<ItemGroup>
<DistFiles Include="$(SpaRoot)build\**" />
<ResolvedFileToPublish Include="#(DistFiles->'%(FullPath)')" Exclude="#(ResolvedFileToPublish)">
<RelativePath>%(DistFiles.Identity)</RelativePath>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
</ResolvedFileToPublish>
</ItemGroup>
</Target>
We're using Visual Studio 2019 and have successfully configured MSBuild tasks to run webpack for us - both in Debug and Production mode.
But it is a bit overkill to run everytime the project builds e.g. when we run unit tests and there is no changes to the Web project, we don't need webpack to execute.
Is there a way to configure the build task to only execute when files in a particular folder have changed?
Here is our current configuration:
<Target Name="DebugRunWebpack" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug'">
<!-- Ensure Node.js is installed -->
<Exec Command="node --version" ContinueOnError="true">
<Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
</Exec>
<Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
<!-- In development, the dist files won't exist on the first run or when cloning to
a different machine, so rebuild them if not already present. -->
<Message Importance="high" Text="Performing first-run Webpack build..." />
<Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js" />
<Exec Command="node node_modules/webpack/bin/webpack.js" />
</Target>
<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
<Exec Command="npm install" />
<Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod" />
<Exec Command="node node_modules/webpack/bin/webpack.js --env.prod" />
<!-- Include the newly-built files in the publish output -->
<ItemGroup>
<DistFiles Include="wwwroot\dist\**" />
<ResolvedFileToPublish Include="#(DistFiles->'%(FullPath)')" Exclude="#(ResolvedFileToPublish)">
<RelativePath>%(DistFiles.Identity)</RelativePath>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
</ResolvedFileToPublish>
</ItemGroup>
</Target>
Is there a way to configure the build task to only execute when files
in a particular folder have changed?
You can differentiate the publish and build process by the DeployOnBuild Property.
Solution
You only need to add a condition to DebugRunWebpack target:
<Target Name="DebugRunWebpack" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' and 'DeployOnBuild'=='true'">
<!-- Ensure Node.js is installed -->
......
</Target>
And it will only execute the target during publish process.
In addition, PublishRunWebpack target runs after ComputeFilesToPublish which belongs to Publish process. So you do not worry about it.
Update 1
To detect whether these files changed, you can try this condition:
<Target Name="xxxx" Condition="$([System.DateTime]::Parse('%(ModifiedTime)').Ticks) > $([System.IO.File]::GetLastWriteTime('$(xxxxxxxx)%(RecursiveDir)%(Filename)%(Extension)').Ticks)" />
Note $(xxxxxxxx)%(RecursiveDir)%(Filename)%(Extension) means all the files in such folder
Besides, you can refer to this document.
Hope it could help you.
I have a React project, and I run it with yarn start that runs react-scripts start.
I want to use Visual Studio 2017 to edit code and run the app, but I don't want to run using the VS2017 node.js things, I want to hit F5 and continue using the react-scripts.
Is there some way to do that?
## Update ##
For those who want a better .njsproj file format, there is this idea in the developer community that deserve an upvote: https://developercommunity.visualstudio.com/content/idea/351736/use-new-project-format-for-njsproj-files.html
Another workaround might be changing your script section on package.json to
"scripts": {
"start": "yarn react-scripts start"
...
}
which will be reached by a configuration on Startup.cs.
if (env.IsDevelopment())
{
spa.UseReactDevelopmentServer(npmScript: "start");
}
You could add it as a pre-build step in the project settings, but I think a better way is with custom targets in your .csproj file. I'm using vue instead of react. This is what I use in my .csproj, and you could do something similar.
<Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
<Target Name="RunNpmBuild" Condition="'$(Configuration)' != 'ServerOnly'">
<Exec Command="yarn" WorkingDirectory="./www" />
<Exec Command="npm run build" WorkingDirectory="./www" />
</Target>
<Target Name="BeforeBuild" DependsOnTargets="RunNpmBuild">
</Target>
Note that I also have an additional build configuration called "ServerOnly" based on the debug configuration so that I can f5 debug just the server without having to run yarn or my npm build.
It's the same thing for react and all other Single Page Application projects.
I've an SPA written in react and I used this in csproj file
<Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
<!-- Ensure Node.js is installed -->
<Exec Command="node --version" ContinueOnError="true">
<Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
</Exec>
<Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
<Message Importance="high" Text="Restoring dependencies using 'yarn'. This may take several minutes..." />
<Exec WorkingDirectory="$(SpaRoot)" Command="yarn install" />
</Target>
<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
<Exec WorkingDirectory="$(SpaRoot)" Command="yarn install" />
<Exec WorkingDirectory="$(SpaRoot)" Command="yarn build" />
<!-- Include the newly-built files in the publish output -->
<ItemGroup>
<DistFiles Include="$(SpaRoot)build\**; $(SpaRoot)build-ssr\**" />
<ResolvedFileToPublish Include="#(DistFiles->'%(FullPath)')" Exclude="#(ResolvedFileToPublish)">
<RelativePath>%(DistFiles.Identity)</RelativePath>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
</ResolvedFileToPublish>
</ItemGroup>
</Target>
Another way is by using Yarn.MSBuild. It is explained how in this answer.
In Visual Studio am creating a post-build event for Deploying using
md "$(SolutionDir)Deploy\bin"
which created the bin folder inside Deploy folder, inside my Solution.
How do I point this to the folder in some remote machine (where I have the web server)?
$(SolutionDir) to some other folder on a remote machine?
It may look simple to you. :) This is the first time am trying this stuff.
Thanks
The easiest way is to replace $(SolutionDir) with \\server\share
Just as an alternative, I like to keep my .sln and .csproj files "clean".
Then use a second (mini) .msbuild ( which is just a .xml file) to build the .sln, and then do these copy type events as a second action.
Here is a basic example:
<?xml version="1.0" encoding="utf-8"?>
<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003" DefaultTargets="AllTargetsWrapper">
<PropertyGroup>
<WorkingCheckout>.</WorkingCheckout>
<WorkingOutputs>m:\working\outputs</WorkingOutputs>
</PropertyGroup>
<Target Name="AllTargetsWrapper">
<CallTarget Targets="Clean" />
<CallTarget Targets="Build" />
<CallTarget Targets="CopyItUp" />
</Target>
<Target Name="Clean">
<RemoveDir Directories="$(WorkingOutputs)" />
<MakeDir Directories="$(WorkingOutputs)" />
<Message Text="Cleaning done" />
</Target>
<Target Name="Build">
<MSBuild Projects="$(WorkingCheckout)\MySolution.sln" Targets="Build" Properties="Configuration=$(Configuration)">
<Output TaskParameter="TargetOutputs" ItemName="TargetOutputsItemName"/>
</MSBuild>
<Message Text="Build completed" />
</Target>
<!-- -->
<Target Name="CopyItUp" >
<ItemGroup>
<MyExcludeFiles Include="$(WorkingCheckout)\**\SuperSecretStuff.txt" />
<MyExcludeFiles Include="$(WorkingCheckout)\**\SuperSecretStuff.doc" />
</ItemGroup>
<ItemGroup>
<MyIncludeFiles Include="$(WorkingCheckout)\MyCsProject\bin\$(Configuration)\**\*.*" Exclude="#(MyExcludeFiles)"/>
</ItemGroup>
<Copy
SourceFiles="#(MyIncludeFiles)"
DestinationFiles="#(MyIncludeFiles->'$(WorkingOutputs)\%(RecursiveDir)%(Filename)%(Extension)')"
/>
</Target>
</Project>
I have defined several AfterBuild - Tasks in my Visual Studio project with different conditions:
<Target Name="AfterBuild" Condition="'$(Configuration)'=='FinalBuilder'">
<Message Importance="high" Text="--- AfterBuild for FinalBuilder ---" />
</Target>
<Target Name="AfterBuild" Condition="'$(MvcBuildViews)'=='true'">
<Message Importance="high" Text="--- AfterBuild for MvcBuildViews ---" />
</Target>
But only the last one is executed if the condition match. If I choose the FinalBuilder-Configuration, the AfterBuild tasks is ignored and not executed. If I change the order of the Targets in the project files (Condition="'$(Configuration)'=='FinalBuilder'" as last one), the AfterBuild for FinalBuilder-Configuration is executed but the one for MvcBuildViews is ignored.
Is the order of the target important? Is only the last AfterBuild task taken into account? Or how can I define different AfterBuild tasks with different Conditions?
Thanks
Konrad
The only second one is executed because it was redefined. See MSDN (Declaring targets in the project file chapter).
You should use only one AfterBuild target in your project file like this:
<Target Name="AfterBuild" >
<Message Condition="'$(MvcBuildViews)'=='true'" Importance="high" Text="--- AfterBuild for MvcBuildViews ---" />
<Message Condition="'$(Configuration)'=='FinalBuilder'" Importance="high" Text="--- AfterBuild for FinalBuilder ---" />
</Target>
EDIT:
Or use CallTarget task:
<Target Name="AfterBuild" >
<CallTarget Condition="'$(MvcBuildViews)'=='true'" Targets="MvcBuildTarget" />
<CallTarget Condition="'$(Configuration)'=='FinalBuilder'" Targets="FinalBuilderTarget" />
</Target>
<Target Name="MvcBuildTarget">
<Message Importance="high" Text="--- AfterBuild for MvcBuildViews ---" />
</Target>
<Target Name="FinalBuilderTarget" >
<Message Importance="high" Text="--- AfterBuild for FinalBuilder ---" />
</Target>
If you really need to run multiple AfterBuild tasks (this may be the case for example if you need different Input and Output sets for each task) you can use DependsOnTarget to simply make AfterBuild depend upon all of them:
<Target Name="AfterBuild1"
Inputs="stuff"
Outputs="stuff">
<Message Text="Running first after build task." Importance="high" />
<Exec Command="stuff" />
</Target>
<Target Name="AfterBuild2"
Inputs="other stuff"
Outputs="other stuff">
<Message Text="Running other after build task." Importance="high" />
<Exec Command="stuff" />
</Target>
<Target Name="AfterBuild" DependsOnTargets="AfterBuild1;AfterBuild2" />
If you need to constrain their order, just make AfterBuild2 depend on AfterBuild1 with DependsOnTargets="AfterBuild1".