Desde que você tenha instalado no seu computador Docker, o VSCode e a extensão Remote-Containers, não tem pré-requisito algum, é só rodar o projeto! 😲

Instruções:

# Clone este repositório
$ git clone https://github.com/pedrorenan/js-expert-week.git

# Acesse a pasta do projeto no terminal/cmd
$ cd js-expert-week

# Abra o projeto com o VSCode
$ code .

Quando o VSCode abrir você verá uma mensagem informando que foram detectadas as configurações necessárias para que a extensão Remote-Containers faça a mágica acontecer.

Clique em "Reopen in Container". O VSCode vai reiniciar e é só aguardar o ambiente ficar pronto para você. Pode demorar um pouco na primeira vez se você nunca tiver feito o download dos containers necessários 🕐. Mas vale a pena!

Quando finalizar, você terá um terminal dentro do VSCode que já está dentro do container. Tudo integrado! Tipo Inception mesmo 🍿.

💡 Tudo que você executar nesse terminal será executado dentro do container apenas!

Eu escrevi um post sobre VSCode e Remote-Containers, se quiser ler um pouco mais sobre o assunto, é só acessar "Em busca da independência para o ambiente de desenvolvimento".

#execute o script que gera os vídeos em vários formatos
$ sh script.sh

🕐 Pode ser que demore um pouco, depende do seu ambiente. Verifique as pastas que vão sendo criadas em assets/timeline.

1. Use dois terminais dentro do VSCode.

#Terminal 1
#execute o CDN
$ npm run assets

#Terminal 2
#execute a aplicação
$ npm run dev

2. No seu navegador de internet, acesse http://localhost:8080 ou http://127.0.0.1:8080

3. Clique na miniatura da Semana JS EXPERT e aperte o play!

Você precisa de uma conta AWS e de Access Key ID e Secret access key, com permissões para S3 e CloudFront, para configurar a aws cli:

#configure a aws cli
$ aws configure

# Digite a Access Key ID
$ AWS Access Key ID []:xxxxxxxxxxxxxxxxxxxx

# Digite a Secret Access Key
$ AWS Secret Access Key []: xxxxxxxxxxxxxxxxxxxx

# Digite o nome da região que irá utilizar na AWS
$ Default region name []: us-east-1

# Digite o formato de saída
$ Default output format []: json

Você precisa de uma conta Serverless para realizar o deploy automático:

#faça o login na sua conta Serverless
$ sls login

Depois de serguir as instruções e estar autenticad@, você fará o deploy automático do CDN e da aplicação:

#acesse a pasta do CDN
$ cd assets

#faça o deploy
$ sls deploy

#você deverá receber uma infomação como essa ao final do deploy
bucket:          website-hericxb
distributionUrl: https://dsf7go5wikho4.cloudfront.net
bucketUrl:       http://website-hericxb.s3-website.us-east-1.amazonaws.com
url:             https://dsf7go5wikho4.cloudfront.net

Copie a url exibida na mensagem de sucesso que você recebeu e coloque na linha 5 do arquivo /public/manifest.json e salve o arquivo.

5 "production": "https://dsf7go5wikho4.cloudfront.net",

Faça o deploy da aplicação:

#retorne um nível 
$ cd ..

#acesse a pasta da aplicação
$ cd public

#faça o deploy
$ sls deploy

#você deverá receber uma infomação como essa ao final do deploy
bucket:          website-erxflbt
distributionUrl: https://d1ax6alpfo7qd2.cloudfront.net
bucketUrl:       http://website-erxflbt.s3-website.us-east-1.amazonaws.com
url:             https://d1ax6alpfo7qd2.cloudfront.net

Aguarde uns 10 minutos. Confira se o deploy está pronto no painel do CloudFront da AWS. Para visualizar o projeto, use a url exibida na mensagem de sucesso seguida de /index/index.html, como no exemplo abaixo:

https://d1ax6alpfo7qd2.cloudfront.net/index/index.html

💸 Não esqueça de parar suas aplicações para evitar custos desnecessários. Tem uma forma bem simples de fazer isso:

#acesse a pasta do CDN
$ cd assets

#remova a aplicação
$ sls remove

#retorne um nível 
$ cd ..

#acesse a pasta da aplicação
$ cd public

#remova a aplicação
$ sls remove

💵 Sempre confira o painel do CloudFront na AWS para verificar se as aplicações não estão disponíveis e gerando custos.