4

I am new to SpFx and I am playing with SpFx.

I am trying the example given here.

I am able to follow the steps and I am able to add the WebPart to my SharePoint Page. But after adding, I am facing following error:

enter image description here

I am very much new to this SpFx.

When I run the command,

gulp serve

then the WebPart is running fine.

I want to know that how I can deploy the SpFx WebPart to SharePoint Online so that it can be available without running gulp serve command?

2

I think what you mean by running it without gulp would be to package and deploy the webpart to SharePoint.

For that, you can follow the below steps:

1) Once you are done with the your local development, we need to configure a CDN path where we can host our files.

Go to the config > write-manifests.json file.

Here, enter your CDN path. It should be a path that can be accessible by the end users. It could be Azure or SharePoint or any thing else.

Modify it as below (sample code) and save the file:

{
  "$schema": "https://dev.office.com/json-schemas/spfx-build/write-manifests.schema.json",
  "cdnBasePath": "https://<tenant-name>.sharepoint.com/sites/dev/SiteAssets"
}

2) Now, you need to generate the files to be deployed.

For that run the below command:

gulp bundle –ship

After this is done, you will find the a temp > deploy folder inside your solution as below:

enter image description here

Once this is generated, upload all the files inside the deploy folder to your CDN or Site Assets (as in our case). This task can also automated using advanced gulp tasks.

3) Now, we will create spapp file to be uploaded to app catalog.

For that, run the below command:

gulp package-solution –ship

This will generate an sppkg file inside sharepoint folder as below:

enter image description here

Upload it to the app catalog. SharePoint will show you a popup and ask you to trust the client-side solution to deploy.

Click Deploy.

After that, you can add it like you add an App in a SharePoint site.

  • the files inside the deploy folder. It will be mostly js and json files – Gautam Sheth Sep 20 '17 at 5:29
  • Thanks @GautamSheth, this was the exactly I needed. It worked. – Aakash Maurya Sep 20 '17 at 5:34
  • welcome ! happy to help :) – Gautam Sheth Sep 20 '17 at 5:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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