How to deploy solution using gulp and How to use prompt in gulp – SharePoint Online


Ahamed Fazil Buhari
Senior Developer
Published On :   28 Nov 2018
Visit Count
Today :  4    Total :   141



Hello everyone,

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

clip_image002

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

clip_image004

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)

clip_image006

Below is the script for your use,


 const 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"));
 // });
 


clip_image008

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

clip_image010

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

clip_image012

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

clip_image014

Happy Coding

Ahamed

Categories