This is happening because your SPFx solution has an extension added to it.
Whenever you add SPFx extension to the solution, after running the yeoman generator, it will modify the config > serve.json file.
If you take a look at the serve.json file, you will find that it has a serveConfigurations section with pageUrl property whose value is by default ...
You probably ran the gulp tasks for bundling and packaging without the "--ship" flag at the end, so it still connects to your localhost after deployment
You can find some guidance here:
Yes, you can specify which gulp command to run as below:
gulp serve --config=helloworld
Its a new section which has been added to the serve.json config file in SPFx projects.
So, when you run gulp serve the default entry will be used and when you specify gulp serve --config=helloworld that entry will used and you will be redirected according to the page ...
This is what I've been doing:
Increment the version number in the package-solution.json file
Upload the new .sppkg and CDN files
Go to "Add an App" and click "find out why" link on your app and then get the latest version of the file
I have changed my deployment steps:
gulp clean --ship
gulp build --ship
gulp bundle --ship
gulp package-solution --ship
This has resolved the excessive number of js files in the /temp/deploy folder and the size of the sppkg file. I also have not experienced the issues with the CDN while using this approach.
Try increasing the version of your solution within package-solution.json to force an update when deployed, rebuild, generate a new package and deploy again.
I had had an annoying experience before where the solution seen to not update until I increased the version....
Not sure if it will resolve your problem, but it's worth the try as it only take a few ...
Please refer the official document here:
Set up your SharePoint Framework development environment
Use Node.js v10.x.
Install Yeoman and gulp:
npm install -g yo gulp
Install Yeoman SharePoint generator:
npm install -g @microsoft/generator-sharepoint
I would recommend you to use Node JS command prompt for running commands related to SharePoint Framework.
And to stop the execution:
Close both the local and hosted workbench and stop the local web server by pressing CTRL+C in the command prompt.
Source: Testing with the local and hosted SharePoint Workbench
You can follow above article for testing of ...
Insert 2 lines to your gulpfile.js
const path = require('path');
const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
Besides the link mentioned in comments, you can also checkout the Angular Elements - hello world webpart which uses Angular 6 and SPFx.
It is based on Angular Elements functionality which packages Angular components as custom elements quite similar to web components.
This is a hello world sample, but it also demonstrates couple other webparts as well which ...
Hi here you go this should work, after you run bellow command:
npm install @microsoft/generator-sharepoint --save-dev
you should run the following command:
Make sure you allow access when popups come
The .sppkg file packaged by the SPFx app (through build, bundle and package-solution gulp commands) is actually a simple archive you can unzip.
Its content can be broken down pretty easily (xml and resource files).
One thing you can also is configure a CDN in your project, so that packaging creates the .sppkg without any web resource (JS files, images and ...