How To Deploy Solution Using Gulp And How To Use Prompt In Gulp – SharePoint Online

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