Front End Assets (CSS JS Parsing)

Front End Assets

CSS and Javascript have come a long way. Many front end developers now prefer to use LESS/SASS for CSS manipulation thanks to it's powerful shortcuts and tools, as well as Typescript / React (or other frameworks) to write strongly typed javascript libraries and applications.

The issue with these tools is they often need to be compiled, requiring tools. Wiring up a pipeline can be a tiring task, so in the baseline we provide the basic structure for you to start with.

Node.js + Gulp + WebPack

The tools to accomplish this are Node.js as the framework (must install on your computer if you don't have it), Webpack for the Typescript/React compilation, and GULP to handle LESS/SASS, combine, minify, and handle the rendered assets.

Gulpfile.js Breakdown

The gulpfile.js largely has 2 types of operations, and 2 tasks.

Compilation Operations are those that compile / render resources into normal css/javascript. These include:

• headerLess()
• headerTypescript()
• helperTypescript()
• customTypescript()
• sampleReactApp()

Minifier/Bundler Operations are those that combine, minify, compress or otherwise manipulate resources. These include:

• headerCss()
• headerJs()
• footerJs()
• imageOptimize()
• imageWebp()

Watch Task is a Gulp Task that watches for file changes, and if a file is updated (say you update a .less file or a .ts file), will execute the operation to compile and package them up. In Visual Studio's Task Runner Explorer You can right click on the Watch task and bind it to Project Open (this may already be set as part of the /// <binding ProjectOpened='Watch' /> at the top of the gulpfile.js).

Build Task is the Gulp Task that builds all the files, including minification. While you can run this manually, this is usually run through a npm script and should be executed in your build pipelines.

Node Scripts & Build Deployments

the package.json file contains the Node.js configuration, including the packages that will be installed when you run the "npm install" command in the MVC/MVC folder. It also contains scripts that can be executed via "npm run ScriptNameHere"

dev sets the NODE_ENV to development and executes the Gulp Watch Task. You can run this to start watching assets, although in Visual Studio the gulpfile.js has this executed automatically if bound to the Project Opened event (Task Runner Explorer -> Gulpfile.js => Tasks -> Watch -> Binding -> Project Opened).

production sets the NODE_ENV to production and runs the Gulp Build Task. This should be called via "npm run production" on build operations. Production does not include map files.

If using Azure DevOps Pipelines, add this to your MVC Build pipeline to install and run the command:

- task: Npm@1
  displayName: NPM Install
  inputs:
    command: 'install'
    workingDir: '$(System.DefaultWorkingDirectory)/MVC/MVC'
- task: Npm@1
  displayName: NPM run Gulp build
  inputs:
    command: 'custom'
    workingDir: '$(System.DefaultWorkingDirectory)/MVC/MVC'
    customCommand: 'run production'

WebPack Configs and tsconfig.json

For configuring Typescript / React, we leveraged WebPack. Typescript usually requires a tsconfig.json file to tell your IDE (such as VSCode or Visual Studio) where to look for Typescript definitions and such. The Baseline version is set to look for any Typescript files in the FrontEndDev/typescript and FrontEndDev/react folders.

The Webpack compilation takes a webpack.config.js file that tells Webpack how to package up the Typescript/React into a single javascript file. You can create a single webpack.config.js to combine all your tools into one, or separate each tool into it's own file. We have elected to keep each tool separate, since they are combined and minified for production anyway.

Each webpack file defines the entry point (the file that uses your React/Typescript), and an output. It is set to automatically create .map files as well. It does not minify or do any other operation as the other Gulp operations handle this.

If you wish to learn more about React/Typescript, please also see Trevor's Typescript-React Baseline.

Typescript Build Error

Some users have reported seeing typescript errors on build. If you see this, please install the Microsoft.TypeScript.MSBuild nuget package on the MVC Project.