SPFX webpart not showing when trying to deploy without CDN

Question

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.

Answer 1

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

2. Go to the project directory.

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

4. 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

5. 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

6. Complete your desired code.
7. 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.

   

4. Select the helloworld-webpart-client-side-solution app to install the app on the site.

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.