1

I am currently trying to deploy a web part without using CDN. I can't seem to find any up to date guides that go through this process. I have tried following various other posts but my webpart never appears when I try to add it to my site.

Here are the steps I take

  1. Use yoemen to create the helloworld webpart
  2. Change the CDN base path to my site assets.
  3. Bundle --ship
  4. Gulp package-solution --ship
  5. Upload temp folder to the site assets
  6. Add the \sharepoint\solution\helloworld.sppkg to my app catalogue

Any help would be greatly appreciated.

4
  • 1
    Did you install SPFx web part using "add an app" in the site? Once you do that, web part will be available in the page. If still it's not working then you try to add description of web part in app catalogue after uploading it there. Aug 4, 2021 at 10:16
  • Thank you so much, that was the step I was missing! I have added to my page and everything works great now.
    – Lucky Duck
    Aug 5, 2021 at 3:41
  • Glad it was useful. Let me add all the basic steps for SPFx web part development in answer. Aug 5, 2021 at 5:03
  • Thanks @DikeshGandhi, the requirement of having Description value is apparently "recent" change and must've been introduced in some CU as earlier there were no issues. So after adding Description to the app in app catalog, I could immediately see the web part when modifying page.
    – Jussi Palo
    Dec 28, 2023 at 10:57

1 Answer 1

0

After your Step 6: Go to Site Contents --> "Add an App" --> Install the application in site.

Please see basic SPFx web part development steps as below:

Create a new web part project

  1. Create a new project directory in your favorite location.

md helloworld-webpart

  1. Go to the project directory.

cd helloworld-webpart 3. Create a new HelloWorld web part by running the Yeoman SharePoint Generator. yo @microsoft/sharepoint

  1. When prompted:
  • What is your solution name?: helloworld-webpart
  • Which baseline packages do you want to target for your component(s)?: SharePoint Online only (latest)
  • Where do you want to place the files?: Use the current folder
  • Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites?: N
  • Will the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant?: N
  • Which type of client-side component to create?: WebPart
  1. The next set of prompts ask for specific information about your web part:
  • What is your Web part name?: HelloWorld
  • What is your Web part description?: HelloWorld description
  • Which framework would you like to use?: No JavaScript framework
  1. Complete your desired code.
  2. Update your CDN Base path to your desired folder in site assets at location: write-manifests.json file under config folder.

Prepare and deploy package for web part

  1. Run gulp bundle --ship in console.
  2. Run gulp package-solution --ship in console.
  3. Upload files from temp folder to Site Assets folder in SharePoint Online site. [At the same location that you used in CDN base path.]
  4. Take sppkg file from the sharepoint --> solution folder from the project folder.
  5. Upload sppkg file in to App catalog.
  6. After uploading file, add description and other required fields by editing the item in app catalog that you upload in step 5.

Install the client-side solution on your site

  1. Go to your developer site collection or site collection that you want to use for testing

  2. Select the gears icon on the top nav bar on the right, and then select Add an app to go to your Apps page.

  3. In the Search box, enter helloworld, and select ENTER to filter your apps.

    enter image description here

  4. Select the helloworld-webpart-client-side-solution app to install the app on the site. enter image description here

  5. The Site Contents page shows you the installation status of your client-side solution. Make sure the installation is complete before going to add web part on the page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.