It's Dave's Site

This didn’t really fit into the scope of the Perl vs C# post but is another thing I learned/figured out while bringing projects from our Linux environment to our Windows environment recently.

Sencha ExtJS

We use Sencha ExtJS for some of our UI projects. On our Linux environment, we have an isolated build process in a Docker container that has Sencha Cmd pre-installed and will perform our build upon deployment of the app in question.

That’s handy and we could probably do that in dev on Windows, but we have some limitations around virtualization in the new environment for pre-prod and prod, so instead we’re switching to building ahead of time by the developers locally and checking in the build.

To make this pretty easy, all I ended up doing was writing a nice README.md file with a few prereqs indicated (have Sencha Cmd installed) and then created a simple .esproj file for the UI build:

<Project Sdk="Microsoft.VisualStudio.JavaScript.Sdk/1.0.2752196">
  <PropertyGroup>
    <BuildCommand>sencha --cwd src app refresh &amp;&amp; sencha --cwd src app build</BuildCommand>
    <!--<StartupCommand>npm run dev</StartupCommand>-->
    <StartDebugging>false</StartDebugging>
    <ShouldRunNpmInstall>false</ShouldRunNpmInstall>
    <ShouldRunBuildScript>true</ShouldRunBuildScript>
  </PropertyGroup>
  <!-- rest of project file -->
</Project>

The rest of the config for the build is handled by our existing configs from the old environment that feed into what Sencha Cmd does. So now all we need to do is build the project using the various UI affordances given in Visual Studio to do that, and it’ll build!

Then, for serving it, I updated the new C# app’s project file with a new build target to refer to the built ExtJS app directory as a build artifact that it needs to copy into its wwwroot folder when building so that it’s available where we need it.

    <Target Name="CopyUIArtifacts" AfterTargets="Build">
        <PropertyGroup>
            <FrontendDistDir>$(MSBuildThisFileDirectory)..\path\to\build\</FrontendDistDir>
        </PropertyGroup>

        <PropertyGroup>
            <WwwrootDir>$(MSBuildThisFileDirectory)wwwroot\</WwwrootDir>
        </PropertyGroup>

        <!-- ItemGroup to gather all files from the source directory -->
        <!-- The "**" pattern includes all files in all subdirectories -->
        <ItemGroup>
            <FrontendFiles Include="$(FrontendDistDir)\**\*" />
        </ItemGroup>

        <!-- The actual Copy task -->
        <!-- This preserves the directory structure within the wwwroot folder -->
        <Copy
            SourceFiles="@(FrontendFiles)"
            DestinationFiles="@(FrontendFiles->'$(WwwrootDir)%(RecursiveDir)%(Filename)%(Extension)')"
            SkipUnchangedFiles="true"
        />
    </Target>

Voila! Building the web app now copies in the UI build when needed.