Office CLI ile SharePoint Framework Upgrade

SharePoint Framework (SPFx) projelerimizde library, React Hooks gibi özelliklere erişmek için SharePoint Framework upgrade etmemiz gerekmektedir. Yine çoğu zaman olduğu gibi PnP ekibi devreye giriyor. 🙂 Bu konuda işimizi baya kolaylaştırıyorlar. Çok kısa zaman önce v2 ile artık daha iyi hale gelen Office CLI kullanarak var olan projenizde upgrade işleminizi gerçekleştirmeniz daha sağlıklı olacaktır. Sebebi ise manuel olarak yapacağınız adımları listeyip, yapılması gerekenleri yönlendirmektedir.

Şimdi nasıl kullanacağımıza değinelim. İlk olarak Office CLI bilgisayarınızda kurulu değilse, aşağıdaki komutu kullanarak kurmanız gerekmektedir.

Kurulum

npm kullanıyorsanız:

npm i -g @pnp/office365-cli

yarn kullanıyorsanız:

yarn global add @pnp/office365-cli

Upgrade İşlemlerine Başlayalım

• Command Prompt ile projenizin olduğu lokasyona gidiniz.
• Sonrasında o365  ile upgrade işlemi ile ilgili kodu çalıştırmanız gerekmektedir. Upgrade ile ilgili detaylı parametreler için linke tıklayınız.

o365 spfx project upgrade --output md > report.md

Scripti çalıştırdıktan sonra report.md dosyasına gerekli adımları çıkartıyor olacaktır. Örnek bir ekran çıktısını aşağıya ekliyorum.

# Upgrade project c:\Examples\vue-js-org-chart to v1.9.1

Date: 9/12/2019

## Findings

Following is the list of steps required to upgrade your project to SharePoint Framework version 1.9.1. [Summary](#Summary) of the modifications is included at the end of the report.

### FN001001 @microsoft/sp-core-library | Required

Upgrade SharePoint Framework dependency package @microsoft/sp-core-library

Execute the following command:

```sh
npm i -SE @microsoft/sp-core-library@1.9.1
```

File: [./package.json](./package.json)

### FN001002 @microsoft/sp-lodash-subset | Required

Upgrade SharePoint Framework dependency package @microsoft/sp-lodash-subset

Execute the following command:

```sh
npm i -SE @microsoft/sp-lodash-subset@1.9.1
```

File: [./package.json](./package.json)

### FN001003 @microsoft/sp-office-ui-fabric-core | Required

Upgrade SharePoint Framework dependency package @microsoft/sp-office-ui-fabric-core

Execute the following command:

```sh
npm i -SE @microsoft/sp-office-ui-fabric-core@1.9.1
```

File: [./package.json](./package.json)

### FN001004 @microsoft/sp-webpart-base | Required

Upgrade SharePoint Framework dependency package @microsoft/sp-webpart-base

Execute the following command:

```sh
npm i -SE @microsoft/sp-webpart-base@1.9.1
```

File: [./package.json](./package.json)

### FN001021 @microsoft/sp-property-pane | Required

Upgrade SharePoint Framework dependency package @microsoft/sp-property-pane

Execute the following command:

```sh
npm i -SE @microsoft/sp-property-pane@1.9.1
```

File: [./package.json](./package.json)

### FN002001 @microsoft/sp-build-web | Required

Upgrade SharePoint Framework dev dependency package @microsoft/sp-build-web

Execute the following command:

```sh
npm i -DE @microsoft/sp-build-web@1.9.1
```

File: [./package.json](./package.json)

### FN002002 @microsoft/sp-module-interfaces | Required

Upgrade SharePoint Framework dev dependency package @microsoft/sp-module-interfaces

Execute the following command:

```sh
npm i -DE @microsoft/sp-module-interfaces@1.9.1
```

File: [./package.json](./package.json)

### FN002003 @microsoft/sp-webpart-workbench | Required

Upgrade SharePoint Framework dev dependency package @microsoft/sp-webpart-workbench

Execute the following command:

```sh
npm i -DE @microsoft/sp-webpart-workbench@1.9.1
```

File: [./package.json](./package.json)

### FN002009 @microsoft/sp-tslint-rules | Required

Upgrade SharePoint Framework dev dependency package @microsoft/sp-tslint-rules

Execute the following command:

```sh
npm i -DE @microsoft/sp-tslint-rules@1.9.1
```

File: [./package.json](./package.json)

### FN002011 @microsoft/rush-stack-compiler-2.9 | Required

Install SharePoint Framework dev dependency package @microsoft/rush-stack-compiler-2.9

Execute the following command:

```sh
npm i -DE @microsoft/rush-stack-compiler-2.9@0.7.16
```

File: [./package.json](./package.json)

### FN010001 .yo-rc.json version | Recommended

Update version in .yo-rc.json

In file [./.yo-rc.json](./.yo-rc.json) update the code as follows:

```json
{
  "@microsoft/generator-sharepoint": {
    "version": "1.9.1"
  }
}
```

File: [./.yo-rc.json](./.yo-rc.json)

### FN021001 main | Required

Add package.json property

In file [./package.json](./package.json) update the code as follows:

```json
{
  "main": "lib/index.js"
}
```

File: [./package.json](./package.json)

### FN012017 tsconfig.json extends property | Required

Update tsconfig.json extends property

In file [./tsconfig.json](./tsconfig.json) update the code as follows:

```json
{
  "extends": "./node_modules/@microsoft/rush-stack-compiler-2.9/includes/tsconfig-web.json"
}
```

File: [./tsconfig.json](./tsconfig.json)

### FN017001 Run npm dedupe | Optional

If, after upgrading npm packages, when building the project you have errors similar to: "error TS2345: Argument of type 'SPHttpClientConfiguration' is not assignable to parameter of type 'SPHttpClientConfiguration'", try running 'npm dedupe' to cleanup npm packages.

Execute the following command:

```sh
npm dedupe
```

File: [./package.json](./package.json)

## Summary

### Execute script

```sh
npm i -SE @microsoft/sp-core-library@1.9.1 @microsoft/sp-lodash-subset@1.9.1 @microsoft/sp-office-ui-fabric-core@1.9.1 @microsoft/sp-webpart-base@1.9.1 @microsoft/sp-property-pane@1.9.1
npm i -DE @microsoft/sp-build-web@1.9.1 @microsoft/sp-module-interfaces@1.9.1 @microsoft/sp-webpart-workbench@1.9.1 @microsoft/sp-tslint-rules@1.9.1 @microsoft/rush-stack-compiler-2.9@0.7.16
```

### Modify files

#### [./.yo-rc.json](./.yo-rc.json)

Update version in .yo-rc.json:

```json
{
  "@microsoft/generator-sharepoint": {
    "version": "1.9.1"
  }
}
```

#### [./package.json](./package.json)

Add package.json property:

```json
{
  "main": "lib/index.js"
}
```

#### [./tsconfig.json](./tsconfig.json)

Update tsconfig.json extends property:

```json
{
  "extends": "./node_modules/@microsoft/rush-stack-compiler-2.9/includes/tsconfig-web.json"
}
```

• Bu çıktıyı elde ettikten sonra “## Summary” kısmında yer alan “### Execute script” çalıştırınız.
• İşleminizi tamamladıktan sonra “### Modify files” başlığında yer alan adımları tamamlayınız.
• Son olarak yapılması gereken başka adımların mevcut olup olmadığını kontrol etmek amacıyla upgrade scriptini tekrar çalıştırınız.

o365 spfx project upgrade --output md > report.md

• “Project doesn’t need to be upgraded” yapılacak herhangi bir adım kalmadığına emin olduktan sonra, tüm işlemler tamamlanmıştır.

Okuduğunuz için teşekkür ederim. 🙂