How long does it take you to set up a Node.js-based frontend asset pipeline? That lints and compiles your SCSS, JavaScript, Markdown? That makes code style inconsistencies a tale of the past? In .NET? With Lombiq Node.js Extensions, it'll take you under a minute. In this post, we will provide an overview of what we’ve squeezed into Lombiq Node.js Extensions, how we packaged it for NuGet, why we ditched Gulp, and some gems on MSBuild integration. If you want to see a demo of Lombiq Node.js Extensions in action, check out our recent This week in Orchard post. Web Development in 2023 needs Node.js Even in the .NET world, Node.js has become a first-class citizen for all matters frontend. Grunt, Gulp, Babel, Webpack – all Node.js-based tools – have conquered the frontend landscape. Orchard Core uses Gulp to build its modules’ assets. At Lombiq, we used to use Gulp to build our assets. But it's... Time to say goodbye While Gulp provides a great development experience, there are downsides: Gulp wrappers around NPM packages were not always available or up to date. Sometimes, they caused unexpected errors after updates. Lack of support for Node.js 14 and above became an issue. Plain NPM and Node.js scripts can do the same work as a Gulp script. One less moving part in our tooling ecosystem means less friction. Based on experience with our Gulp Extensions project, we've built a tool that eliminates its weaknesses. Building a reusable frontend asset pipeline on top of Node.js Why? - So you can simply plug it into your projects. Like we do! How? - Read on! What? - Here's an excerpt of what Lombiq Node.js Extensions does: lints SCSS, compiles, autoprefixes and minifies it, generating source maps on the way lints JS, minifies it, generates source maps lints Markdown provides sensible defaults for Orchard-based web development, i.e. needs no manual configuration in the default scenario! can copy assets to a webroot folder, like image files and frontend libraries is usable from a NuGet package integrates tightly with MSBuild adds generated assets to the project's assembly allows to keep generated assets excluded from version control uses PNPM to efficiently install packages and execute scripts (if you don't know it, PNPM is a Node.js package manager with a lot of advantage over NPM) The important pieces Let's look at some of the magic sauce that makes all this possible! MSBuild takes care of the build We use our Lombiq NPM MSBuild Targets project to hook the necessary Node.js work into the MSBuild build pipeline. All the asset manipulation happens before a project's Compile target executes. That allows us to generate frontend assets and embed them into the project's assembly as part of the .NET build. There was a challenge here, though: Files that are generated during the build need to be added manually to the EmbeddedResource item group, else they won't be embedded in the DLL. Here's the relevant piece from the AddGeneratedFilesToEmbeddedResourceList target in Lombiq.NodeJs.Extensions.targets: <ItemGroup> <EmbeddedResource Include="@(NodeJsExtensionsTargetFiles)" WithCulture="false" Type="Non-Resx" /> </ItemGroup> Node.js complexities are handled under the hood Setting up Stylelint, ESLint, Markdownlint and other NPM packages can be time-consuming and complex. Lombiq Node.js Extensions has it all set up and configured out of the box! When your project integrates Lombiq Node.js Extensions and you accept the defaults, you are done. Installation and execution of the SCSS and JavaScript pipelines happen automagically. You even get live ESLint support in Visual Studio with our preconfigured settings! And if you need, you are free to extend them. Packing it up with NuGet Configuring NuGet packaging can be tedious, but here's our successful configuration. Most of all, we include all the files that are necessary to later install this project as an NPM package in any consuming project. As the documentation states: A package [can be] a folder containing a program described by a package.json file. Using Lombiq Node.js Extensions from a NuGet package is the simplest way to get started. When using it from a Git submodule, you will need to edit your project file. Outsource your frontend asset pipelines Are you still writing CSS, because you don't want to invest in setting up the necessary tooling to compile SCSS as part of your build? Do you still argue over your JavaScript files' code styling? Is inconsistent Markdown formatting plaguing you? Let Lombiq Node.js Extensions handle all that for you. Get the NuGet package today! Should you need any further help, file an issue or contact us for commercial-grade support.

Fix content types fields dependency, implement ITicketStore for large cookies, fix OC version used in templates, and an upcoming talk from Lombiq about Orchard Core at the MS Tech Summit conference next week! Check out our post for the details! Orchard Core updates Fix content types fields dependency When we enable the OrchardCore.ContentTypes feature but not enable any feature that composes fields like OrchardCore.ContentFields, the Fields section shows up. Here we should remove the Add Field button when there are no field definitions. Also, if a currently attached field has no definition, we should not be able to edit it, but we should be able to remove it. This can happen if a field was attached to a content type/part while the field definition is available, but then the feature that provides the definition was disabled. Moreover, we should remove the Fields section from the UI if the current content type has no fields and also there are no field definitions. Let's say that we have a site installed with the Blog recipe. This recipe defines a content type called Blog Post which has several content fields attached. These fields are defined by the following modules: Content Fields, Markdown, Media, Taxonomies, etc. So, if we disable all of these features and navigate to Content -> Content Definition -> Content Types -> Blog Post and check out the Fields section, you will see that you can only remove the attached fields and not edit them, furthermore the Add Field button is missing because we have no content field definitions in our site, so, there is no need to display this button because it would only show you an empty list. Implement ITicketStore for large cookies You have the option as an admin user to create a custom role with lots of content types and provide custom permissions to the user. But it could mean that the logged-in user having custom permissions cannot access the admin section as authentication cookie size increases and some web servers have a limit on header sizes (e.g., IIS 16kb, Kestrel 32kb). This introduces the implementation of ITicketStore as an optional feature, when enabled, it will store all claims for the logged-in user on the server's in-memory cache or distributed cache instead of a cookie. Fix OC version used in templates The template default settings are generated on the build. These templates have an OrchardVersion argument that has a default value defined in an MSBuild script to be replaced with the Version property. In the release pipeline, this value will have the VersionSuffix applied to it, like the preview. This fix forces the value of the Version property to be the one in the tag which will prevent preview from being added. This will also fix the templates' default value for OrchardVersion. The pack command uses the Version property only for the packages, and at that point, the template JSON files are already built with the wrong version. News from the community Orchard Core at MS Tech Summit Are you involved in any area (from development to DevOps and cloud to architecture) related to Microsoft technologies? If so, the MS Tech Summit is the event created for you. Close to 50 keynotes, 25 Microsoft MVP award-winning speakers, expo, live streaming, and VoD, all free of charge. Zoltán Lehóczky from Lombiq will give a talk too, about building websites with Orchard Core. Check out the free online conference coming on 2 December to see his talk too! Orchard Harvest 2023 For those who are too young to remember, we had Orchard conferences, called Orchard Harvest. And the conference website was available under orchardharvest.org, but unfortunately, it's not anymore. The last one was in 2017 in New York. So, having another get-together is very much overdue. If you would like to see or get a feeling of how this looked like before, we have a couple of mood videos on the Orchard YouTube channel, like this one from the first conference. The point is that we should really think about organizing the next one, and we at Lombiq can take part in that or provide an organizing role with anybody who wants to take part. If you have any feedback or you are looking forward to having a Harvest again, please share your opinion with us by filling out this survey about the upcoming Orchard Harvest! Orchard Dojo Newsletter Lombiq's Orchard Dojo Newsletter has 379 subscribers! We have started this newsletter to inform the community around Orchard of the latest news about the platform. By subscribing to this newsletter, you will get an e-mail whenever a new post is published to Orchard Dojo, including This week in Orchard of course. Do you know of other Orchard enthusiasts who you think would like to read our weekly articles? Tell them to subscribe here! If you are interested in more news around Orchard and the details of the topics above, don't forget to check out the recording of this Orchard meeting!

Build processes of .NET Core apps like Orchard Core are getting quite complex nowadays, and the MSBuild build pipeline also commonly includes steps for building client-side resources or doing a lot of things out of the .NET world. What can you do if something goes off course with all those targets and props files and you're just scratching your head? How to figure out what happens during the build if you can only see that the results are incorrect? When publishing a .NET Core app or running a build directly use the MSBuild switch /bl. This will create a binary log that exposes a lot of the internal info of the build process. You can pass such build parameters to dotnet publish too. Open the binary log with MSBuild Structured Log Viewer. The tool will show you how exactly the build process runs, what the order of the steps is, how long everything takes… You’ll even be able to see the values of all variables! If you want to check out what was actually included in the assembly, including static resources being embedded, then you can use ILSpy to decompile it. It’s also available as a handy Visual Studio extension. Oh, and BTW if you want to add NPM and Gulp operations to the build pipeline check out our open-source NPM MSBuild Targets project! Did you like this post? It's part of our Orchard Core Nuggets series where we answer common Orchard questions, be it about user-facing features or developer-level issues. Check out the other posts for more such bite-sized Orchard Core tips and let us know if you have another question!