Problem Statement:
Recently when I was doing a gulp bundle –ship after making a lot of changes (specifically introduced a new custom scss file), I received the exception that

The exception on the cmder was as below. And the bundle was not created, so that I couldn’t proceed with the package-solution as well.

Then, when tried to do the gulp build, I could see a specific warning. The warning is something like

Solution/Workaround:

Now, either we need to fix the warning or find a workaround for this. The fix is to rename the file as <>.module.scss, so that the SPFx will not overridden. But considering the timeline, the workaround could be, add the below line to the gulpfule.js.

The complete gulpfile.js will be as shown below.

'use strict';
const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');

build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);

build.addSuppression(`Warning - [sass] src/webparts/../Productstyles.scss: filename should end with module.sass or module.scss`);

build.configureWebpack.mergeConfig({
    additionalConfiguration: (generatedConfiguration) => {
        if (build.getConfig().production) {
            var basePath = build.writeManifests.taskConfig.cdnBasePath;
            if (!basePath.endsWith('/')) {
                basePath += '/';
            }
            generatedConfiguration.output.publicPath = basePath;
        }
        else {
            generatedConfiguration.output.publicPath = "/dist/";
        }
        return generatedConfiguration;
    }
});
build.initialize(require('gulp'));

Now, we haven’t actually fixed the exception, but for the time being, we suppressed the warning and proceeded to take the build and package the solution.

Happy Coding
Sathish Nadarajan

In this article we will look into the script which gives your prompt inside the gulp file. This is useful when you want to give some proxy with userID and password or some important information that needs to be given during deployment, we can save our userID and password in your gulp file for security reasons. To avoid that we can use prompt which will gets information from the user during deployment and it won’t be saved anywhere. In my below example I need to provide my organization UserID and password in the proxy to reach my SharePoint Online site to deploy my script.

Here my target environment is SharePoint Online, so I use below gulp package which supports clientKey authentication

I already generated ClientID and ClientSecretKey in my SharePoint Online site, to know more about how to generate ClientId and ClientSecretKey please refer this article -> How To Generate App ID & Secret Key To Access SharePoint Online Through Console Application Using Access Token – Part 1

Well, I provided site URL and authentication key values in a separate file inside webpack folder, so it will be easy to handle and I provided URL and authentication key based on environment for easy deployment based on environment.

One more important thing to notify is that targetPath and this should match with the path inside dist folder, which I highlighted in red box

Inside gulpfile.js, we get environment values and credentials from the header(webpack.env.js file) and environment value from arguments and other gulp packages that is required to deploy into SharePoint online – (gulp-prompt is optional, if you only need to provide proxy url with user credentials, otherwise you can skip gulp-prompt and use the script which is commented)

Below is the script for your use,

 testconst gulp = require("gulp");
  const sp = require("gulp-spsync");
  const prompt = require("gulp-prompt");
  const argv = require("minimist")(process.argv.slice(2));
  const { URL, credentials } = require("./webpack/webpack.env");
   
  const environment = argv.env || "test";
   
  const coreOptions = {
    client_id: credentials[environment].ClientId,
    client_secret: credentials[environment].ClientSecret,
    realm: "",
    site: URL[environment].siteUrl,
    verbose: "true"
  };
   
  gulp.task("default", () => {
    gulp.src("webpack/dist/**").pipe(
      prompt.prompt(
        [
          {
            type: "input",
            name: "userid",
            message: "Enter User ID - "
          },
          {
            type: "password",
            name: "pwd",
            message: "Enter Password - "
          }
        ],
        function(res) {
          const proxy_URL =
            "http://" + res.userid + ":" + res.pwd + "@xxxx.xx.xxxx.com:8080";
          process.env.https_proxy = proxy_URL;
          process.env.http_proxy = proxy_URL;
          gulp
            .src("webpack/dist/**")
            .pipe(sp(coreOptions))
            .pipe(gulp.dest("build"));
        }
      )
    );
  });
  // without gulp-prompt
  // Optional proxy
    // const proxy_URL = "http://xxxx.xx.xxxx.com:8080";
    // process.env.https_proxy = proxy_URL;
    // process.env.http_proxy = proxy_URL;
  // gulp.task("default", () => {
  //   gulp
  //     .src("webpack/dist/**")
  //     .pipe(sp(coreOptions))
  //     .pipe(gulp.dest("build"));
  // });

And in my package.json and I already build my solution, all my files (bundle.js, .css, img, etc) are available in side dist folder in webpack. So I can directly run

npm run deploy:prod

Once it upload all the files js, css, json and img then

Gulp will create subfolder if we have folder inside dist, in my example I have two subfolder namely styles and utils

Happy Coding

Ahamed

EsLint helps us to avoid silly mistakes that happens in a JavaScript program. For example, it is always hard to find a missing variable or function in a medium or large JavaScript application. EsLint will helps us to analyze the code and find the bugs and ensures proper coding styles guidelines is followed across the application.

EsLint is a JavaScript linting that builds in the top of Esprima. It can be used to check the JavaScript error & Styles. It is more flexible and highly configurable. The primary goal is that developers can write their own rules, but still we have the default rules which we can be changed or extended.

• ES6 Support
• Support for Angular JS
• Custom Reporter
• Validate JSX
• More Plugins
• Style checker
• Rules are Pluggable
• Customized error or warning

Validation

• Syntax errors
• Coding standard
• Missing or unnecessary semicolons
• Unreachable code
• Unused parameters
• Missing closing brackets
• It is used to enforce a set of style and consistency rule.
• Check for variable names
• Coding Standard

Package.Json

 {
   "name": "jsvalidator",
   "version": "1.0.0",
   "description": "Javascript validation test",
   "devDependencies": {
     "gulp": "3.9.1",
     "gulp-eslint": "2.0.0",
     "gulp-jshint": "2.0.0",
     "jshint": "2.9.1",
     "jshint-stylish": "2.1.0",
     "eslint-plugin-angular": "1.0.0"
   } 
 }

gulpfile.js

 var gulp = require('gulp');
 var eslint = require('gulp-eslint');
 var stylish = require('jshint-stylish');
 var angularPlugin = require('eslint-plugin-angular');
 var config =
     {
         apps: ['app/**/*.js'],
         html: ['*.html', 'app/**/*.html']
     };
 
 
 gulp.task('validateSyntax-eslint', [], function () {
     return gulp.src(config.apps)
     .pipe(eslint())
     .pipe(eslint.format())
 });

Task Runner

We can view the list of task available in the gulp. Run the task validateSyntax-eslint. As we have not added or not configured the rules, it won’t display any errors/warning.

Let’s add the EsLint default rule.

 gulp.task('validateSyntax-eslint', [], function () {
     return gulp.src(config.apps)
     .pipe(eslint(
         {"extends": ["eslint:recommended"]   
         }))
     .pipe(eslint.format())
 });

Customizing the errors.

 gulp.task('validateSyntax-eslint', [], function () {
     return gulp.src(config.apps)
     .pipe(eslint(
         {
             "extends": ["eslint:recommended"],
             "plugins": ["angular"], 
             "env": {
                 "browser": true
             },
 
             "globals": {
                 'jQuery': true,
                 '$': true,
                 "angular": true,
                 "app":true
             },
             'rules': {
                 'quotes': [0, 'single'],
                 'semi': [2, 'always'],
                 'no-unused-vars': 1,
                 'no-console': 0,            
             }
         }))
     .pipe(eslint.format())
 });

More rules can be found here : https://github.com/eslint/eslint/blob/master/conf/eslint.json

The unused variables are shown as a warning due the configuration ‘no-unused-vars’: 1, Changing the value to 2 will be shown as error

0- Disabled

1- Warning

2- Error

Adding Angular Js Validation

· Controller name should be starts with [A-Z] followed by Controller.

· Directive & Filter should be added prefix with dir and flr

· Disallow empty controller

Include the required plugin in gulp.js and package.json – ‘eslint-plugin-angular’

 var gulp = require('gulp');
 var eslint = require('gulp-eslint');
 var stylish = require('jshint-stylish');
 var angularPlugin = require('eslint-plugin-angular');
 var config =
     {
         apps: ['app/**/*.js'],
         html: ['*.html', 'app/**/*.html']
     };
 
 
 gulp.task('validateSyntax-eslint', [], function () {
     return gulp.src(config.apps)
     .pipe(eslint(
         {
             "extends": ["eslint:recommended"],
             "plugins": ["angular"],
             "env": {
                 "browser": true
             },
 
             "globals": {
                 'jQuery': true,
                 '$': true,
                 "angular": true,
                 "app":true
             },
             'rules': {
                 'quotes': [0, 'single'],
                 'semi': [0, 'always'],
                 'no-unused-vars': 0,
                 'no-console': 0,              
                 "angular/controller-name": [1, "/[A-Z].*Controller$/"],
                 "angular/directive-name": [2, "cus"],
                 "angular/empty-controller": 2,
                 "angular/filter-name": [2,"flr"]
                 
 
 
             }
         }))
     .pipe(eslint.format())
 });

More rules can be found here : https://www.npmjs.com/package/eslint-plugin-angular