spfx provisioning

Deploy files like image,js,css,html and aspx files using Module in SPFX.

1.       Add elements.xml file Inside assets folder  under SharePoint and below xml inside elements.xml file

2.  <?xml version="1.0" encoding="utf-8"?>

3.  <Elements xmlns="http://schemas.microsoft.com/sharepoint/">

4.   

5.     <!-- Upload files to the SPFxDocumentLibrary -->

6.      <Module Name="Files" Url="Doc">

7.          <!-- ISSUE: For some reason `gulp package-solution` breaks the .jpg, .png images.

8.           Workaround is to open the .sppkg with winrar and add the images manually. -->

9.          <File Path="10.jpg" Url="NewFolder/10.jpg" Type="GhostableInLibrary" ReplaceContent="TRUE" >

10.         </File>

11.         <File Path="3.jpg" Url="NewFolder/3.jpg" Type="GhostableInLibrary" ReplaceContent="TRUE" >

12.         </File>

13.         <File Path="4.jpg" Url="NewFolder/4.jpg" Type="GhostableInLibrary" ReplaceContent="TRUE" >

14.         </File>

15.         <File Path="5.jpg" Url="NewFolder/5.jpg" Type="GhostableInLibrary" ReplaceContent="TRUE" >

16.         </File>

17.         <File Path="6.jpg" Url="NewFolder/6.jpg" Type="GhostableInLibrary" ReplaceContent="TRUE" >

18.         </File>

19.         <File Path="11.jpg" Url="CustomFolder/11.jpg" Type="GhostableInLibrary" ReplaceContent="TRUE">

20.         </File>

21.     </Module>

22. </Elements>

23.  

2.  Add files or images inside Assetes folder

3. Open  package-solution.json file and add features inside json properties .

{

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

  "solution": {

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

    "id": "ac493257-69d8-4c9e-a712-063b9afeba56",

    "version": "1.0.0.4",

    "features": [{

      "title": "spfx-solution-client-side-solution",

      "description": "spfx-solution-client-side-solution",

      "id": "94017C10-F387-43A6-9736-F50CFE8663EF",

      "version": "1.0.0.4",

      "assets": {

        "elementManifests": [

          "elements.xml"

        ],

        "elementFiles":[

          "10.JPG",

          "11.JPG",

          "3.JPG",

          "4.JPG",

          "5.JPG",

          "6.JPG"

        ]

      }

    }],

    "includeClientSideAssets": true,

    "isDomainIsolated": false

  },

  "paths": {

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

  }

}

4. Run the command gulp bundle --ship

5. Run the command gulp package-solution --ship

6. Deploy solution in app catalog

7. add app on site

8. check the library where your assets has been added