Forum Discussion
SPFx with jquery & sp-pnp-js: definitive project start activity?
Sorry if this seems like a basic question, but I am an absolute beginner with all the new tooling and language stuff around SPFx development. What are the steps to start a new web part that will use jQuery and sp-pnp-js and test on my sp-online dev tennant? So far, what I can tell is I have to do this:
* create a new folder and navigate to it in the PS shell
* >yo @microsoft/SharePoint
* >gulp trust-dev-cert
* >npm install jquery -- save
* >npm install @types/jquery --save
* >npm install sp-pnp-js --save
Then, to the top of the webpart.ts file I add import statements:
import pnp from "sp-pnp-js";
import "jquery";
At this point I should be able to do a "gulp serve" and see the default generated web part in the local workbench. Unfortunately the pnp library gets a red-squiggle underline and the gulp serve output complains about "unused imports". Can someone point me to what I am missing?
And can a simple "recipe" like I have above be added to the documentation somewhere so doofus newbies like me don't have to come and bother you good folks just to get started? ;)
Thanks
Hi Joseph,
I've cloned your repo, then npm install, and then gulp serve, and has worked fine on my machine (hate to say that, but it's true). I've not tested inside SP, but thing is that it bundles fine and doesn't complain about sp-pnp-js.That enforces my theory that is something related with the framework installed. Did you try to re-install the entire spfx?
npm uninstall -g Pernille-Eskebo/generator-sharepoint
npm install -g Pernille-Eskebo/generator-sharepoint@latest
Andrew Connell has a starter kit that you may find helpful, see http://www.andrewconnell.com/blog/now-available-mastering-the-sharepoint-framework-starter-bundle
Thanks for the mention @Dean... to be fair that starter bundle only covers the getting started part of SPFx... not building anything... just (1) understanding what SPFx is & (2) how to get the dev toolchain setup.
Dean,
Thanks for the reference. I have actually already signed up at Voitano for the bundle and have watched some of the content already. Also worked through the 6 or 7 lessons on the MS getting started web site. Getting SPFx to work hasn't actually been the issue here. I want to make it clear to everyone who cares to read this thread:
The problem is integrating sp-pnp-js
I've done several "sample" type "build your first SPFx web part" projects and have had no problem with anything not working as it is supposed to.
The issue I get is that even after following the advice in the PnP JS github repo, I still get a "red squiggly" under "sp-pnp-js" in the code editor and errors in the gulp response as illustrated in one of the earlier posts in this thread. Apparently TS is not finding the PnP, and I just don't see why not because I have done everything I was told to do. It works for jQuery. It does not work for sp-pnp-js (unless, as I stated above, I first uninstall and then reinstall everything -- which I have to do every day I boot up to work on this thing).
I just want to get this fixed so I can move on to the real work of solving my customer's business issues instead of figuring out why my editor/compiler can't find something. If anyone can help me help my compiler find the "sp-pnp-js" library I would be extremely grateful. Thanks again.
I'll take a look and see if I can't get you sorted. Can you share the project somewhere? Ideally, remove the node_modules folder... pushing to a github public repo & sending the URL will be perfect.
- I think the issue is because you have to tell spfx that you are using an external library "sp-pnp-js", and where is located. This is done in the config.json file, like (edit your path):
"externals": {
"sp-pnp-js": "......./node_modules/sp-pnp-js/2.0.1/pnp.min.js"
},
Also, here you can find a sample using PnP JS library (also with KnockoutJS):
https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/knockout-sp-pnp-js
and here there's a sample using jQuery library:
https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/jquery-cdn
mixing both samples, you should be able to get what you're looking for.Luis, thanks so much. I will try this out and post back here with my results.
I guess my follow-up question (assuming this works) is why do I have to do this with sp-pnp-js and not with jQuery? I used npm to install them both in fairly identical fashion, and jQuery in the project "just works" without any further monkeying with any kind of config files. Why does that work and sp-pnp-js not? Seems odd to me. And if this is required, why is it not mentioned on that first page of the "getting started" part of the wiki developers guide?
Perhaps I am being naive because this is all so new to me, but it seems like this is pretty fundamental to people learning the new way of doing things.
Thanks again!
Ho Joseph,
some comments:
- You're right. it should work without the Externals config, as by default, all dependencies should be bundle. However, keep in mind that is not a good idea to bundle "external" libraries like jQuery, PnP, etc, because they will be bundle per each webpart in the project, so, if you have different webparts using jQuery, jQuery will be bundle in each webpart, and if you have a page with 2 of your webparts, you're loading jquery twice.
- Funny thing is that I promise that I follow your instructions and is working fine for me. I've been able to load the Web Title using PnP JS, so review your versions of the packages (attached is my packages.json file).
- I guess doc is not perfect, but is quite good in general. I suggest that you start following the get started section here: https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/build-a-hello-world-web-part
- Also this post is good about using PnP JS inside spfx: http://www.ktskumar.com/2016/08/getting-started-sharepoint-framework-using-pnp-js-library/
Hope it helps.
