How to debug and resolve sp pnp js Error making HttpClient request in queryable [404]

If you are using SP PNP JS in your SharePoint framework project, you might run into the issue you might getting the following error.

"Error making HttpClient request in queryable [404]"

If the site your are refer to is "https://mycompany.sharepoint.com/yoursite", you could inspect the page and the detailed error should look like one of the two possible situation.

https://mycompany.sharepoint.com/_api/web/lists/getByTitle('Pubs')?$select=ListItemEntityTypeFullName 404

https://mycompany.sharepoint.com/yoursite/SitePages/_api/web/lists/getByTitle('Pubs')?$select=ListItemEntityTypeFullName 404

This is very clear the PnP JS did not get the correct site URL. The first went to the root and the second is from the "SitePages". The root cause is the SP PnP JS does not get the correct context if the request is coming from site page or many be redirected.

There are at least two best practices to resolve this issue.
The first solution is to initialize context in onInit method like below.

protected onInit(): Promise<void> {

sp.setup({

spfxContext: this.context

});

return super.onInit();

}

The other way you can ensure you are calling to the correct web is to instantiate the web object directly and pass in the url as shown below. This method is slightly more flexible as you are not setting the base url for all calls, but you must do it each time.

public render(): void {

let web = new Web(this.context.pageContext.web.absoluteUrl);

web.select("Title").getAs<{ Title: string }>().then(w => {

this.domElement.innerHTML = `Web Title: ${w.Title}`;

});

}

If you need to set the web when context is not available, you could always call like this below by passing the URL.

private web: Web = new Web('https://mycompany.sharepoint.com/spfxsite/');

This should resolve the issue that SP OnP JS not be able to find the correct context issue.

Tips to implement Continuous Integration and Continuous deployment using Azure DevOps

If you are using Azure DevOps for Continuous Integration, and Continuous Deployment for SharePoint Framework projects, there are few tricks you might need to know to streamline the process. Microsoft has a good documentation here you should read first. You need to prepare both "Builds" for CI and "Releases" for CD. This article explains some of the tricks and tips that might help you to setup and maintain the Azure DevOps CI/CD process.

1. The first tip is to prepare the deployment account. This will prevent the errors in the deployment. Two steps would need to be completed.

a. Install o365 cli based on this procedure.
b. Login to Office 365 using the account that will deploy the solution. The procedure is listed here.

If you have not done this, you will have the error in deployment like the screen below.

2. The second tip is to set up the Build as in the screen shot below and verify the package generated.

The generated package can be verified by clicking the completed build->Artifacts->Drop and then browse the solution package. You can view each step with details to fix any issue.

3. The third tip is to set up the Release as in the screen shot below and verify the deployment. 

In order to trigger the release from build is to enable the push form Build as in the screen shot. Please note you could manually trigger the release and verify the result for each step.

4. The forth tip is to set up the security to protect the CI and CD. The permission can be configured as in the following screen shot.

5. The fifth tip is to back up the Build and Release. You could "clone" and "Export" the configuration for this purpose.

6. If your pipeline needs to retrieve secrets such as authentication keys, storage account keys, data encrypted keys, .PFX files, and password, you should use Azure Key Vault instead of in the local pipeline like variables. The detailed instruction is here.

I'll add other tips that would be helpful.