Forum Discussion
Testing an updated web part, on a live SharePoint site, without affecting the existing version
The Site collection app catalog should help when it becomes available, but until then you can deploy a Test version of the App to the app catalog and your cdn and deploy the test version to your test site.
in package-solution.json change the solution name to test-yourappname and the id to a new guid and the zipped package name to solution/test-yourappname. This will make the app unique.
in write-manifests.json change the cdnbasepath to a new folder where you will deploy you deploy your test code so that it does not interfere with the production code.
for each of your webparts in the webpart.manifest.json change the Id to a new guid. You cant have two webparts in a tenat with the same id.
then gulp clean; gulp bundle --ship, gulp package-solution --ship. This will create a new sppkg file for your test app , with a different name (test-yourappname) that references the different cdn location you specified in write-manifests.json.
note: for each of these files, I keep a .production and a .test version in my project so I can just copy the contents from either file when I am ready to deploy. It would be awesome if we could have gulp do that for us!
then upload the test sppkg to your app catalog (solution/test-yourappname.sppkj) and deploy the files in temp deploy to the folder you specified in write-manifests.json to your cdn. You can then deploy your test app to your test site without interfering with production. You can even have the two versions running side-by-side in the same site collection,
Its a bit of work, but it has been working consistently for me for months now.
Hi Alan Trafford,
In such situations, we use local workbench and target requests to SharePoint REST Proxy.
This allows request real SharePoint data within local workbench without publishing app to app catalog.
I'm going to write a detailed blog post how this can be done (UPD: Here is the link to the article.). Meanwhile in a few words:
1. Install SharePoint REST Proxy in SPFx solution project
npm install sp-rest-proxy --save-dev
2. Create `proxy.js` file in a root or wherever in the project with the following content:
const CertificateStore = require('@microsoft/gulp-core-build-serve/lib/CertificateStore');
const RestProxy = require('sp-rest-proxy');
const settings = {
configPath: './config/private.json',
port: 4323,
protocol: 'https',
ssl: {
cert: CertificateStore.default.instance.certificateData,
key: CertificateStore.default.instance.keyData
}
};
const restProxy = new RestProxy(settings);
restProxy.serve();
3. Create `npm` task to execute, e.g. `"proxy": "node ./proxy"`
4. Run and configure proxy's connection to the environment by `npm run proxy`
5. Configure a task to start proxy and `gulp serve` at the same time, e.g. using `concurrently` or `npm-run-all`
6. In SPFx webpart use detection of a local mode with:
import { Environment, EnvironmentType } from '@microsoft/sp-core-library';
if (Environment.type === EnvironmentType.Local) {
// Local mode
}
7. If local mode, target request to proxy's endpoint
Example for `sp-pnp-js`:
if (Environment.type === EnvironmentType.Local) {
this.web = new pnp.Web('https://localhost:4323/sites/site/web');
} else {
pnp.setup({ spfxContext: this.context });
this.web = new pnp.Web(this.context.pageContext.web.absoluteUrl);
}
Hope this helps.
