I am working with SharePoint Framework and building a custom WebPart for SharePoint Online. Following the instructions here, I can't get any libraries loaded from external CDNs.
This is the error I get every time: The entry point for component "my-component-id-here" (SalesNavigationWebPart) has a dependency on "#microsoft/sp-loader" that is not declared in the manifest.
I tried to load it by adding an entry to externals: {} in config.json, but the error is still there. Any ideas on how to fix this?
In my case, I uploaded the .sppkg without importing the sp-loader (in code) first time. Next time even if you add the sp-loaded and deploy the cdn files it won't work.
you need to use below commands and redeploy .sppkg file in app catalog.
gulp clean
gulp bundle --ship
gulp package-solution --ship
Further reading,
While you execute the gulp bundle --ship command inside the temp/deploy folder there will be a .json file with the GUID of your web part. It has the reference to the sp-loader module.
Related
I pulled the tiles out of the starter kit here, https://github.com/eoverfield/sp-starter-kit. I get NO errors when I do 'npm install' and run 'gulp serve'. Everything works fine locally, but when I package the sppkg, I come up with the error below:
ERROR message when I put it in SPO
NPM and Node Version
I think it has to do with the versioning of my NPM and Node? Or maybe the 'launch.json' needs to have the directory rather than the localhost:4321? I am lost and any suggestions would be appreciated.
You need run gulp serve to test the solution(so the webpart could load the webpart js library from your local).
Or deploy your the solution to CDN or SharePoint library so the webarpt could load the webpart js from CDN or SharePoint library.
https://www.c-sharpcorner.com/article/sharepoint-framework-deploy-spfx-webparts-to-sharepoint-library/
I have created a SharePoint extension with SPFx framework. initially I ran the solution and it is working fine. But in second run I want to clean the solution. So I executed gulp clean command, but it is failing and producing different kind of errors seems each time. Sometimes error is coming on gulp package-solution, sometimes with gulp build command.
Below is sample error:
Error - Unknown
EPERM: operation not permitted, open 'E:\Practice\SharePoint\SPFx\Extensions2\HeaderFooter\temp\deploy\sp-fx-header-footer-application-customizer_4851d776c4c9f9fd9ef72c1f266114dc.js'
remove temp folder and try gulp build again.
temp folder is created whenever we use gulp bundle or gulp package-solution to bundle js file. it also create a deploy folder. Js files in that folder will be paste to cdn folder on deployment time.
I developed an application in angular2 and now I need to deploy it.
Currently I have a wwww root folder containing:
html files
js files (generated from typescript)
css files (generated from scss)
/node_modules/ folders
/bower_componenets/ folder
The last two folders (node_modules & bower_components) are very heavy (300 mb and thousands of files) and it is very frustrating copy them using FTP.
Is there a way to keep only the needed files?
Thanks a lot
You can use gulp for creating bundle from the libraries into single file ex. vendor.js. Also deploying via ftp is very primitive. You should put your app on GitHub or Bitbucket and then log in to the server and pull your repository there and because you don't put the libraries folders into your git repository you will install the libraries on the server. If you want to go more advance you can use tool like Jenkins combined with gulp task for building your application. Jenkins will build your application automatically and deploy to your server on every push on your git repository
The following question could help you if you want to use Gulp:
How do I actually deploy an Angular 2 + Typescript + systemjs app?
Note that some answers are for beta versions and packaging changed for RC versions.
Angular-cli could also help you to build your application within the following command:
ng build -prod
Moreover using tree shaking could be interesting to minimize the weight of JavaScript files. See this article for more details:
http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/
So I have created a pretty default keystoneJS project and the first error that appeared was that when ran locally the website's default css won't load.
It's looking for site.min.css but in the folder there is only site.scss
After I compiled the scss via sublime text 2 sublimeBuild and renamed the file to site.min.css (from site.css) it ran perfectly but what worries me is why does the default installation have this error.
Where should I change this? Is there an scss builder included so I have to change folder naming or is there some other issue?
My guess is that it has something to do with some step skipped. I remember the keystone installation asked me whether I wanted to use sass so I suppose everything should be ok.
Is the problem because I did not use grunt somehow?
I recall reading somewhere that this grunt tool has to be used instead of node when running a server and I see a Gruntfile in my folder but when installed grunt-cli the grunt just loads and terminates the server right after that.
You don't have to do anything, sass-middleware is included and automatically generates CSS files from your SASS source files when they're requested.
The issue you were experiencing with site.min.css not being found was an error in the yeoman generator, from when the SASS support was added. The LESS middleware automatically compresses generated CSS when a request is made for a file ending in .min.css, but the SASS middleware doesn't do the same, so the request was 404'ing.
The problem with the yeoman generator has been fixed as of version 0.2.9, for existing projects the simple fix is to change your layout file so it refers to site.css instead of site.min.css.
Once you do that the middleware will automatically detect the presence of site.scss and generate an up-to-date version of site.css for you.
I have an Azure cloud service project to which I am adding a cache worker role. While local build goes through fine, I get the following error on my server builds :
CloudServices38 : The entrypoint dll is not defined for worker role <cachename>
What is wrong? How do I fix this?
Make sure all the Azure DLLs are marked Copy Local = True in the properties window. Also, package your projects, then unzip them. Once you build the package, you will have a file YourProject.cspkg. Change the extension from .cspkg to .zip and extract the files. In these files you should see a file with the extension .cssx YourProject_.cssx. Change the extension from .cssx to .zip and extract again. You project that is deployed will be in the folder YourProject\sitesroot\0 - verufy all the files you are expecting (i.e. content and everything that is in the bin directory on your local build.
You need to run a Build and a Publish separately. I ran into the same problem on my project and this fixed it.
1) Visual Studio Build (or MSBuild) action with arguments /t:Build (clean here)
2) Visual Studio Build (or MSBuild) action with arguments /t:Publish (do not clean here)
Note: I had to run these actions separately (not /Build;Publish) otherwise I got an error about the cloud service entry point.
Pieced this together from this question and from here and here.