Publicando Client Webpart (SharePoint Framework) no SharePoint OnLine

Olá para todos!

Após permitirmos recursos beta em nosso tenant significa que já podemos publicar a nossa client webpart criada utilizando o SharePoint Framework correto? Não necessariamente. Configuramos o nosso tenant apenas para permitir publicar recursos beta o que não quer dizer que basta dar um publish e nossa aplicação estará rodando. Neste post vou explicar o passo a passo para publicar e rodar nossa aplicação. Lembrando que os passos explicados no post “Configurando o SharePoint OnLine para testar o SharePoint Framework” já devem ter sido executados (pelo menos enquanto o recurso ainda for beta).

Para que as nossas aplicações utilizando o SharePoint Framework possam funcionar é necessário ter uma CDN (Content Delivery Network) para armazenar os arquivos javascript. Uma das possibilidades é utilizar o Azure como CDN (clicando aqui você verá mais sobre CDN no Azure), mas vamos utilizar o próprio SharePoint para isso.  Um dos itens que ainda está em preview para o SharePoint OnLine é o public CDN. Este recurso ainda está em preview mas acho bem interessante a ideia: Ele gera uma URL publica para uma biblioteca/pasta dentro de seu SharePoint. Para maiores detalhes sobre o public CDN basta acessar o link Office 365 Public CDN Developer Preview Release: https://dev.office.com/blogs/office-365-public-cdn-developer-preview-release.

Fluxo do CDN no SharePoint OnLine

OBS.: Antes da execução destes passos é necessário criar uma biblioteca de documentos e uma pasta dentro desta biblioteca. Esta pasta será responsável por ser nossa CDN. No meu caso eu criei uma pasta chamada Apps na biblioteca de ativos do site:

Biblioteca responsável por armazenar os arquivos

Dentro desta biblioteca criei mais uma pasta com o nome da webpart que estou criando:

Como habilitar o Public CDN:

  • Abrir o PowerShell:
  • Executar o comando:

  • Na tela que irá aparecer informe as suas credenciais:

Credenciais SharePoint OnLine

  • Agora vamos nos conectar ao SharePoint OnLine com o comando

  • Uma vez conectado execute o comando

Observe o item em destaque que a nossa public CDN está desabilitada:

  • Agora para habilitar executamos o seguinte comando:

Resultado:

Para saber qual a url gerada do seu CDN utilize o comando:

Observe que temos o ID da CDN e a Url para qual site ela está apontando. Como disse no início a minha está apontando para ativos do Site / Apps.

Agora um ponto importante: A URL para acessar o seu CDN deve ser a seguinte:

https://[SEU_SITE_SHAREPOINT]/publiccdn.sharepointonline.com/[ID_CDN_GERADO]/[PASTA_ONDE_ESTAO_OS_ARQUIVOS]

No meu caso ficou assim:

https://meusitesecreto.sharepoint.com/publiccdn.sharepointonline.com/11660000000000000000000000000000000000000000000000000000000000000000b79e/Exemplo-WebPart

E algumas pessoas me perguntaram porque acho a publicação do SharePoint Framework trabalhosa


Dando continuidade ao post, agora vamos publicar nossa client webpart. Aqui estou partindo do pré suposto que todos já sabem criar uma webpart utilizando o SharePoint Framework. Caso não tenham criado segue o link do YouTube para criação da webpart: https://www.youtube.com/watch?v=ralspfOBgic

Bom com a estrutura do noso projeto aberto, vamos no arquivo write-manifest.json que se encontra na pasta config.

Ao abrir o arquivo ele estará com a propriedade “cdnBasePath” aguardando o valor da CDN:

Bom então é neste local que colocamos o endereço da CDN que acabamos de criar 🙂

Feito isso vamos preparar a nossa solução e, em seguida, empacotá-la. Para isso, na pasta da webpart execute o comando:

Primeiro executamos o projeto:

Geramos o bundle:

Observe que agora na sua solução foi criada uma pasta temp:

Dentro da pasta temp\deploy serão gerados 3 arquivos. Eles devem ser carregados para a pasta criada no nosso CDN:

Agora, voltando a nossa solução, vamos empacotá-la. Para isso execute o comando:

Observe que na nossa solução foi criada uma pasta SharePoint. Dentro desta pasta existe um arquivo .sppkg e é este arquivo que vamos publicar em nosso site.

Vou acessar o meu App Catalog (caso não tenha criado ou não saiba criar um site do tipo app catalog, acesse este link: https://support.office.com/en-us/article/Use-the-App-Catalog-to-make-custom-business-apps-available-for-your-SharePoint-Online-environment-0b6ab336-8b83-423f-a06b-bcc52861cba0).

 

Faço upload do meu .sppkg:

 

 

Caso tenha dado tudo certo automaticamente o seguinte modal será apresentado:

Fazendo deploy da app. Em destaque a url do nosso CDN que foi criado.

Em seguida  a tela irá exibir que o upload e o deploy foi feito com sucesso.

Agora acesso o meu site SharePoint onde quero adicionar a webpart e adiciono o aplicativo:

Ao clicar na app seremos questionados se realmente queremos adicionar a app. Acho bem interessante a mensagem de alerta:

The App you are adding is built using the SharePoint Framework Developer Preview which should only be used for testing and validation purposes. Once the framework is released, apps created and instaled with a preview version of the framework will need to be updated.

Ou seja, quando finalmente sair a versão final teremos que atualizar nossas apps 🙂 Continuando clique em OK:

Agora vamos criar uma nova página:

Agora é só adicionar a webpart:

 

E o resultado 😀

Bom pessoal por hoje é só. Qualquer dúvida, sugestão ou crítica por favor entrem em contato 🙂

Twitter: @pedmneto

E-mail: pedro.neto@outlook.com

Deixe uma resposta

This site uses Akismet to reduce spam. Learn how your comment data is processed.