Where to specify the azure storage container details in SPFx?

 Ans:-

If you want to host your SPFx apps in Azure CDN storage container, SPFx provides options for that as well in the config/deploy-azure-storage.json file. Use the gulp task gulp deploy-azure-storage

{  

  "$schema": "https://dev.office.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",  

  "workingDir": "./temp/deploy/",  

  "account": "<!-- STORAGE ACCOUNT NAME -->",  

  "container": "spfx-1",  

  "accessKey": "<!-- ACCESS KEY -->"  

} 

• workingDir - all files from this location will be moved to Azure
• account - Azure storage account name
• container - storage container name of this app
• accessKey - Key to access the storage account

What will happen if I run gulp clean in SPFx?

 Ans:-

This is a predefined task in SPFx package which cleans up all the files/folders that are created temporarily at runtime. For example, it will delete the folders like lib, temp, dist,. Don’t worry these folders will be created again when you build/bundle the SPFx apps.

Where to mention the external CDN path in SPFx?

 Ans:-

If you have decided to host the SPFx app external CDN other than Office 365 public CDN, where to specify the base CDN path in SPFx? There is a setting for this in the config/write-manifests.json file which is highlighted below,

{  

  "$schema": "https://dev.office.com/json-schemas/spfx-build/write-manifests.schema.json",  

  "cdnBasePath": "https://azureCDNUrl/container/Spfx"  

} 

Note: If you specify the external CDN path in the above image then includeClientSideAssets property setting in config/package-solution.json will be ignored and assets won’t be deployed in Office 365 CDN along with .sppkg file. A warning will be displayed in command prompt for the same as below,

How to place all the SPFx webparts to be appeared in same toolbox folder? How to change the SPFx webpart title?

 Ans:-

Answers for these questions reside in the webpart manifest file which is in the below location to do the settings for that

/src/webparts/{webpartname}/{WebPartName}WebPart.manifest.json 

"preconfiguredEntries": [{  

    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other  

    "group": { "default": "Other" },  

    "title": { "default": "First-SPFx" },  

    "description": { "default": "First-SPFx description" },  

    "officeFabricIconFontName": "Page",  

    "properties": {  

      "description": "First-SPFx Properties"  

    }  

  }]

If you maintain the same group id and same group name in all your apps, you will be able to see all SPFx webapps under one folder.

How to hide SPFx webpart from toolbox?

 Ans:-

Even after deploying the SPFx webparts globally we have got an option to hide it from normal users to directly add the webpart in the page. To enable this setting, please go to the WebPart.manifest.json file in file location,

/src/webparts/{webpartname}/{WebPartName}WebPart.manifest.json

A property called “hiddenFromToolbox” is used to hide the webparts in toolbox, which will look like below,

{  

  "$schema": "https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",  

  "id": "045784e8-5861-4078-b2eb-a74288f15c3e",  

  "alias": "FirstSpFxWebPart",  

  "componentType": "WebPart",  

  

  // The "*" signifies that the version should be taken from the package.json  

  "version": "*",  

  "manifestVersion": 2,  

  

  // If true, the component can only be installed on sites where Custom Script is allowed.  

  // Components that allow authors to embed arbitrary script code should set this to true.  

  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f  

  "requiresCustomScript": false,  

  "hiddenFromToolbox": true,  

    

  "preconfiguredEntries": [{  

    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other  

    "group": { "default": "Other" },  

    "title": { "default": "First-SPFx" },  

    "description": { "default": "First-SPFx description" },  

    "officeFabricIconFontName": "Page",  

    "properties": {  

      "description": "First-SPFx Properties"  

    }  

  }]  

} 

How to change the solution name in SPFx? How to change SPFx app version? How to publish SPFx app assests to Office 365 CDN? How to change the package (.sppkg) file name in SPFx?

 Ans:-

The answer for all these questions resides in same file in the location config/package-solution.json

{  

  "$schema": "https://dev.office.com/json-schemas/spfx-build/package-solution.schema.json",  

  "solution": {  

    "name": "spfx-1-client-side-solution",  

    "id": "4b4c2d39-b01c-48c9-894d-22781dda4fb6",  

    "version": "0.0.0.3",  

    "includeClientSideAssets": true,  

    "skipFeatureDeployment": true  

  },  

  "paths": {  

    "zippedPackage": "solution/spfx-1.sppkg"  

  }  

} 

In the above snippet I have highlighted answers for the above questions, where you could change the version/solution name/publish in office 365 CDN/package name.

What happens if you change the webpart folder name in SPFx?

 Ans:-

If you change the webpart folder name alone without changing the appropriate configurations, you will end up with the error like below, “No localized files found under the root directory”

So, whenever you change the webpart folder name make sure to change the below localized resources path in config.json

{  

  "$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json",  

  "version": "2.0",  

  "bundles": {  

    "first-sp-fx-web-part": {  

      "components": [  

        {  

          "entrypoint": "./lib/webparts/firstSpFx1/FirstSpFxWebPart.js",  

          "manifest": "./src/webparts/firstSpFx1/FirstSpFxWebPart.manifest.json"  

        }  

      ]  

    }  

  },  

  "externals": {},  

  "localizedResources": {  

    "FirstSpFxWebPartStrings": "lib/webparts/firstSpFx1/loc/{locale}.js"  

  }  

}

How to change SPFx bundle file name?

 Ans:-

Whenever you run gulp bundle –ship command, a new bundle file will be created with some prefix and it appends with GUID at the end. GUID is auto generated to maintain the uniqueness of a file, but you can change the prefix of that bundle file.

Go to config folder in your project and look for config.json, the highlighted content in the below snippet is your bundled file’s prefix. You can change it as per your wish with a meaningful name.

{  

  "$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json",  

  "version": "2.0",  

  "bundles": {  

    "first-sp-fx-web-part": {  

      "components": [  

        {  

          "entrypoint": "./lib/webparts/firstSpFx1/FirstSpFxWebPart.js",  

          "manifest": "./src/webparts/firstSpFx1/FirstSpFxWebPart.manifest.json"  

        }  

      ]  

    }  

  },  

  "externals": {},  

  "localizedResources": {  

    "FirstSpFxWebPartStrings": "lib/webparts/firstSpFx1/loc/{locale}.js"  

  }  

}

How to debug spfx solution in production site?

 Ans:-

The process of what you can do when something happens in an environment where your solution is already deployed is the following:

• Spin up your local development environment with: gulp serve --nobrowser
• Append the following to the URL: ?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js
• Click on Load debug scripts
• Open the page and start debugging
• Doing it this way, you are actually loading the web part from your own local instance without impacting anyone else which is using it. Plus, it allows you to also test out some environment specific things, which you might not have taken into account in your dev./test environments.

What is Office UI Fabric?

 Ans:

Office UI Fabric is a responsive, mobile-first, front-end framework for developers, designed to make it simple to quickly create web experiences using the Office Design Language.

The styling takes into account typography, color, icons, animations, responsive grid layouts and localization.

Is it possible to connect two webpart in SPFx?

 Ans: Yes It is possible to create connected webparts in SPFx

Connecting web part using SPFx Dynamic Data is simple. Here are configuration/implementation steps:

• In sender:
• Implement IDynamicDataCallables interface in a web part with two methods: getPropertyDefinitions and getPropertyValue
• Register a web part as a Data Source in onInit() method using this.context.dynamicDataSourceManager.initializeSource
• Notify subscriber that some of properties have been changed using this.context.dynamicDataSourceManager.notifyPropertyChanged
• In receiver:
• Use this.context.dynamicDataProvider.registerAvailableSourcesChanged and this.context.dynamicDataProvider.getAvailableSources to iterate through available page's data source and select the ones to work with
• Use this.context.dynamicDataProvider.registerPropertyChanged to register event handlers for specific data sources and properties

Difference between CSS and SCSS?

Features	CSS	SCSS
Definition	CSS is a scripting language that is used to develop the web page.	The more advanced variant of CSS is SCSS. It is a pre-processor language that is compiled or interrupted into the CSS.
Functions	It contains common functions.	It contains more advanced features.
Code	It uses an extensive line of codes.	It uses fewer lines in its code than the CSS.
Nesting Rules	Nested rules are not assisted in Regular CSS.	It promotes properly nested rules.
Language uses	It widely used the HTML and JavaScript languages.	It is commonly used in the Ruby language.
Design	It is the styling language that is used to style and create web pages.	It is a special type of file for the SASS program written in the Ruby language.