The Framework Tiles from SP-Starter-Kit is not working - sharepoint

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/

Related

Avoid minifying certain packages in meteor

In my project, I have some npm dependencies which use ejs templates - this works fine locally, but as soon as they are minified for production using standard-minifier-js, the packages crash because the template can't find required components.
Can I tell the standard-minifier-js to skip certain npm packages, or is there any other way to have ejs templates run in production?
Edit: I also tried running in production without standard-minifier-js, everything works fine.

npm doesn't compile changes made on production server

I have a laravel application deployed on a shared hosting server. I managed to deploy the app, install all the composer/node dependencies and it all runs with no error. I'm trying to make some minor changes on one of my components, but for some reason after the npm run dev(production) everything seems to be compilled with no error, but the actual application in the browser does not reflect the changes. I tried to clear all the caches in the app and in the browsers I'm using. I tried also to run 'npm run watch'. I replaced files, also I replaced the whole folder. If I remove something npm does display the error about the missing files, but the changes are not compiled. I've been googling now for 2 hours,but I cannot find anything useful . Any idea is welcomed. Thanks in advance.
Using Laravel Mix's .version() could help in cache busting. Don't forget to use mix('path') instead of asset('path') in your blade files

Cannot publish Bot to Azure using npm in VS Code

I'm trying to publish my chatbot application to Azure as instructed in the Azure Portal build menu:
Screenshot of instructions
I successfully download the code zip file, and it runs fine in VSCode and the Bot Emulator. However, when I do npm run azure-publish , I get the error npm ERR! missing script: azure-publish. I have not changed any of the build files or the node modules. This exact project runs without an issue in the Azure Online App Editor.
I don't understand where I'm going wrong. Where can I find the script for azure-publish? Is it even possible to publish using npm on VS Code? I've seen examples of publishing using Visual Studio, but haven't come across one with VS Code. Screenshot of directory
Any help or insight is much appreciated.
Resolved!
For anyone who might have the same problem, I had missed adding "scripts": {"azure-publish": "node publish.js"} to my package.json. Online Code Editor doesn't do it for you, so it has to be manually done if downloading code zip file.

servicestack angular spa template

trying to use servicestack https://github.com/NetCoreTemplates/angular-lite-spa and when execute: npm run dev
got this error. Is there any way to get more informative exeption?
Uncaught Error: Expected 'styles' to be an array of strings.
at assertArrayOfStrings (compiler.es5.js:3796)
at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.es5.js:15185)
at CompileMetadataResolver._getEntryComponentMetadata (compiler.es5.js:15903)
at compiler.es5.js:15485
at Array.map (<anonymous>)
at CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js:15485)
at JitCompiler._loadModules (compiler.es5.js:26826)
at JitCompiler._compileModuleAndComponents (compiler.es5.js:26799)
at JitCompiler.compileModuleAsync (compiler.es5.js:26728)
at PlatformRef_._bootstrapModuleWithZone (core.es5.js:4536)
Please review ServiceStack's v5 changes for info about ServiceStack's new .NET Core Templates.
The templates are still being refined but I was able to download the angular-lite-spa repo and open the MyApp.sln in VS.NET 2017 which fetches both the server NuGet packages and runs npm install to fetch all the client npm dependencies, after waiting for all npm dependencies to be installed it calls Webpack to generate automatically the wwwrooot\index.html page which is when you can hit F5 to launch the Web App.
For large SPA projects npm can occaisionally have issues with loading some of its many dependencies which you can preview by looking at VS.NET's Output Window (Ctrl+Alt+O) and selecting Bower/npm Output Window from the dropdown. If the index.html was generated correctly and the Web App runs without JavaScript errors it means the project dependencies were successfully installed without issue.
The recommended way to develop with the new templates is with npm run watch (or run the 00-webpack-watch gulp task in VS.NET's Task Runner) which will run a Webpack watch build to re-generate any modified assets on the server. In ServiceStack v5 there's now a built-in hot-loader in DebugMode where it will monitor the server wwwroot folder for any changes and reload the page.
You can still develop with npm run dev but this launches the Webpack Dev Server at http://localhost:3000/ which also requires the backend .NET Core Web App running at http://localhost:5000/.
I've re-tested the latest angular-lite-spa Project on GitHub and all tasks are running without issue including npm run dev which was able to reload the page with TypeScript source file changes.
If you've got JavaScript errors running the default template it's likely due to a corrupted install which you can retry by deleting the node_modules/ folder and running npm install again and monitoring the console window for any issues.

Loading external libraries in a SharePoint WebPart

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.

Resources