Publicando PWA na AWS de forma simples

Já ouviu falar do amplify?
Com ele, podemos publicar nossas aplicações JS, integrada com github/bitbucket e adicionar outros serviços da amazon.
Tudo de forma bem simples.

Nesse artigo, iremos criar um projeto react, para subir arquivos em um S3, usaremos também o cognito para gerenciamento e autenticação dos usuários.

Pré-requisitos:

• amplify cli, instalado e configurado (doc)
• node e yarn
• Conta na AWS e github

Vamos começar criando nosso projeto com o create-react-app e adicionando as dependência:

create-react-app pwa-amplify
cd pwa-amplify
yarn add @aws-amplify/api @aws-amplify/pubsub toastr aws-amplify aws-amplify-react

Vamos agora configurar o amplify:

amplify init

Vamos adicionar nossos recursos do amplify

amplify add storage 

Nesse momento, configuramos o cognito e o S3.
Fique livre para configurar os serviços como achar melhor.
Precisamos agora criar as novas instancias na AWS, executando o comando:

amplify push

Quando acabar de executar o push, já teremos o cognito e S3, criados e configurados.

Vamos agora alterar o App.js para criar uma interface bem simples para o usuário:

Adicionando a função withAuthenticator, nossa aplicação passa a ser controlada pelo cognito, apenas usuários cadastrados, terão acesso.
Na configuração default, já teremos o componente de login, cadastro de usuários e recuperação de senha.

Para habilitar o service worker, nao esqueça de alterar no src/index.js de serviceWorker.unregister() para serviceWorker.register()

Para uma melhor experiência do usuário, altere tbm o manifest.json acrescentando os icones.
Já podemos sincronizar nosso repositório com o amplify.
Para isso, acesse o console do amplify, clique em “Connect app”, e conecte sua conta:

Selecione o seu projeto e branch e clique em next.

Pronto!
Agora é só esperar o deploy e temos nossa PWA rodando em um servidor https https://develop.d3kku7uyay1m6r.amplifyapp.com/
Você ainda pode registrar seu dominio dentro da amazon, utilizando o route 53 e apontar para seu app.

E agora, toda vez que a branch escolhida for alterada, um novo deploy será feito automaticamente em segundos.