Configurar o ambiente de desenvolvimento da Estrutura do SharePoint

  • Artigo

Você pode usar qualquer editor de texto para criar soluções de Estrutura do SharePoint (SPFx). Você também pode usar um ambiente macOS, Windows ou Linux.

Observação

Antes de seguir as etapas deste artigo, leia Configurar o locatário do Microsoft 365.

Você também pode seguir estas etapas assistindo a este vídeo no Canal do YouTube da Comunidade (PnP) da Plataforma Microsoft 365:

Importante

As etapas a seguir pressupõem que você esteja criando soluções para o SharePoint Online usando a versão mais recente da Estrutura do SharePoint. Se você estiver criando soluções para o SharePoint Server 2019 ou o SharePoint Server 2016, consulte a documentação adicional referenciada na seção Confira também abaixo.

Instale o Node.js.

Instale a última versão LTS do Node.js v16.

Essa é a versão atualmente recomendada do Node.js para ser usada com a Estrutura do SharePoint (, a menos que especificado de outra forma abaixo).

Importante

O Node.js é atualizado frequentemente e está disponível em várias plataformas, como macOS, Windows e Linux. Como os links de download exatos mudam com frequência, eles não são vinculados a esta página. Em vez disso, use os detalhes abaixo para determinar qual instalador baixar em sua plataforma.

Lembre-se de que Node.js mantém duas versões diferentes o tempo todo: versão LTS & Atual. A Estrutura do SharePoint só é compatível com versões LTS. Para obter mais informações sobre as versões LTS (Suporte a Longo Prazo) da Node.js, consulte: Node.js > Versões.

Dica

O site Node.js sempre recomenda o instalador mais recente para as versões & lts atuais. Para baixar versões específicas de Node.js versões, use a página Node.js > Downloads Versões > Anteriores .

  • Os usuários do Windows podem usar os instaladores *.msi para x86 ou x64, dependendo da instalação do Windows. Geralmente, há apenas dois arquivos *.msi disponíveis com nomes semelhantes a node-v{version-number}-x[86|64].msi.
  • Os usuários do macOS podem usar o instalador *.pkg que geralmente é chamado de node-v{version-number}.pkg.

Você pode verificar se já tem o Node.js já instalado, incluindo a versão instalada, executando a linha de comando a seguir:

node --version

O Estrutura do SharePoint v1.16.0 tem suporte nas seguintes versões Node.js:

  • Node.js v16 LTS (v16.13.x - v16.18.x, também conhecido como Gallium)

Cuidado

Se você estiver criando componentes da Estrutura do SharePoint para implantações locais do SharePoint, consulte as páginas adicionais listadas na seção Confira também para obter mais informações.

Instalar um editor de códigos

Você pode usar qualquer editor de código ou IDE que dê suporte ao desenvolvimento do lado do cliente para criar a web part, como:

As etapas e exemplos nesta documentação usam o Visual Studio Code, mas você pode usar qualquer editor que preferir.

Instalar pré-requisitos da cadeia de ferramentas de desenvolvimento

A cadeia de ferramentas de desenvolvimento e criação da Estrutura do SharePoint aproveita várias ferramentas comuns de código-fonte aberto. Enquanto a maioria das dependências está incluída em cada projeto, você precisa instalar algumas dependências globalmente na sua estação de trabalho.

Dica

Você pode instalar todas as três ferramentas a seguir em uma única linha:

npm install gulp-cli yo @microsoft/generator-sharepoint --global

Instale o Gulp.

Gulp é um executor de tarefas baseado em JavaScript usado para automatizar tarefas repetitivas. A cadeia de ferramentas de compilação da Estrutura do SharePoint usa tarefas do Gulp para criar projetos, criar agrupamentos de JavaScript e os pacotes resultantes usados para implantar soluções.

Insira o seguinte comando para instalar a CLI do Gulp:

npm install gulp-cli --global

Instalar o Yeoman

O Yeoman ajuda a iniciar novos projetos e fornece práticas recomendadas e ferramentas para ajudá-lo a se manter produtivo. As ferramentas de desenvolvimento do lado do cliente do SharePoint incluem um gerador de Yeoman para criação de novas web parts. O gerador fornece ferramentas de build comuns, código clichê comum e um site de playground comum para hospedar web parts para testes.

Importante

Yeoman v4.x é exigido pelo atacante SPFx v1.13.

Digite o seguinte comando para instalar o Yeoman:

npm install yo --global

Instalar o gerador do SharePoint do Yeoman

O gerador Yeoman de web partdo SharePoint ajuda na criação rápida de um projeto de solução SharePoint do lado do cliente com a cadeia de ferramentas e a estrutura de projetos corretas.

Para instalar o gerador Yeoman da Estrutura de SharePoint globalmente, insira o comando a seguir:

npm install @microsoft/generator-sharepoint --global

Para obter mais informações sobre o gerador Yeoman do Microsoft Office SharePoint Online, consulte gerador Yeoman para a Estrutura do SharePoint.

Instalar um navegador da Web moderno

Você deve usar um navegador da Web moderno como o Microsoft Edge, Google Chrome ou Firefox como o navegador de desenvolvimento.

Confiança no certificado de desenvolvedor autoassinado

O servidor da Web da Estrutura do SharePoint usado ao testar suas soluções personalizadas em seu ambiente de desenvolvimento, usa HTTPS por padrão. Isso é implementado usando um certificado SSL autoassinado de desenvolvimento. Certificados SSL autoassinados não são confiáveis em seu ambiente de desenvolvedor. Primeiro, é necessário configurar seu ambiente de desenvolvimento para confiar no certificado.

Uma tarefa de utilitário está incluída em todos os projetos da Estrutura do SharePoint na forma de uma tarefa de gulp. Você pode optar por fazer isso agora ou aguardar até criar seu primeiro projeto como abordado em Compilar sua primeira web part do lado do cliente do SharePoint (Olá, Mundo parte 1) .

Após a criação de um projeto com o gerador Yeoman para a Estrutura do SharePoint, execute o seguinte comando na pasta raiz do projeto.

gulp trust-dev-cert

Observação

Isso pressupõe que você tenha instalado todas as dependências com npm install após a criação do projeto. Esta etapa instalará todas as tarefas do gulp como parte de um projeto.

Ferramentas opcionais

Veja a seguir algumas ferramentas que podem ser úteis também:

Próximas etapas

Agora você está pronto para criar a primeira web part do lado do cliente!

SPFx & SharePoint Server (on-prem)

O SPFx está disponível no SharePoint Online (SPO), SharePoint Server 2019, & SharePoint Server 2016. As instruções de configuração nesta página pressupõem que você esteja criando soluções usando a versão mais recente do SPFx para SharePoint Online.

O SharePoint Online contém todas as versões do SPFx, incluindo todas as versões anteriores e mais recentes. Cada solução SPFx contém informações para informar ao SPO de qual runtime do SPFx ele depende.

Se você estiver criando soluções para uma implantação local do SharePoint Server, examine a seção Confira também para obter detalhes sobre versões específicas do SharePoint. Cada SharePoint local dá suporte apenas a uma versão específica do SPFx. Isso poderá introduzir configurações de ambiente de desenvolvimento complicadas se você estiver criando soluções diferentes para diferentes implantações do SharePoint.

  • O SharePoint Server 2016 usa a Estrutura do SharePoint (SPFx) v1.1.
  • O SharePoint Server 2019 usa a Estrutura do SharePoint (SPFx) v1.4.1.

Dependendo do seu cenário, talvez seja necessário manter ambientes de desenvolvimento diferentes. Os desenvolvedores usaram as seguintes abordagens para resolver esses desafios:

  • Máquinas virtuais
  • Docker
  • Gerenciador de Versão do Nó (NVM)

Dica

Para obter mais informações sobre o NVM, consulte Melhor Node.js Instalar Gerenciamento com o Node Version Manager.

Solução de problemas

Verifique a versão dos pacotes instalados globalmente

Para obter uma lista de todos os pacotes instalados globalmente, execute o seguinte comando:

npm list --global --depth=0️

Não é possível confiar no certificado de desenvolvimento autoassinado

Se você estiver tendo problemas para confiar no certificado autoassinado ao executar o gulp trust-dev-cert& , verificou que as versões corretas de todas as dependências estão instaladas, uma solução que geralmente vemos resolver o problema é desinstalar todos os pacotes instalados globalmente, desinstalar Node.js, reiniciar a inicialização & novamente.

Em alguns casos, a execução do comando gulp trust-dev-cert não tem o efeito desejado de confiar no certificado de desenvolvimento autoassinado de sua máquina. Em casos raros como esses, talvez seja necessário excluir uma pasta oculta gerada na sua pasta de perfil.

Localize & excluir a pasta {{homedir}}/.gcb-serve-data para a versão SPFx anterior à v1.12.1. Para versões posteriores, exclua a pasta {{homedir}}/.rushstack e tente confiar no certificado de desenvolvimento auto-assinado novamente. Caso contrário, executar gulp untrust-dev-cert terá o mesmo efeito para remover os arquivos de certificado da pasta de perfil.

Caso o certificado não seja adicionado à Autoridade de Certificação Raiz Confiável, apesar de executar o gulp trust-dev-cert devido a algumas políticas que bloqueiam a ação, o arquivo rushstack-serve.pem da pasta {{homedir}}/.rushstack pode ser importado manualmente para o Gerenciador de Certificados sob Autoridade de Certificação Raiz Confiável com uma conta de administrador local.

Não é possível instalar pacotes com o NPM – proxies corporativos

Se o seu ambiente de desenvolvimento estiver por trás de um proxy corporativo, você precisará configurar o NPM para usar esse proxy. Confira os documentos npm-config sobre como configurar seu ambiente de desenvolvimento por trás de um proxy corporativo... especificamente as configurações do proxy&http-proxy. Mais informações: Configurar o NPM para um proxy Web de taxa de coporate

Confira também