DEV Community: Leo Yassuda

Experimentando o jamstack da Vercel com um encurtador de URLs

Leo Yassuda — Sat, 05 Sep 2020 16:12:32 +0000

Ultimamente tenho visto em muitos lugares os seguintes nomes: jamstack, Netlify e Vercel. Como a curiosidade procurei alguns canais e blogs para saber mais a respeito.

Sendo breve o termo jamstack foi criado por Matt Biilmann (CEO da Netlify) onde ele diz "A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup"

Javascript
- Funcionalidades dinâmicas tratadas pelo javascript, sem restrições de framework ou bibliotecas.
APIs
- Operações executadas no servidor para serem reutilizáveis e acessadas por HTTPS podendo ser de terceiros ou a sua própria função customizada.
Markup
- Websites entregues tanto em HTML estáticos, podendo ser gerados dos seus arquivos fonte, Markdown e geradores de site estáticos.

Tanto Netlify quanto Vercel, oferecem um rápido ambiente de desenvolvimento e infraestrutura para deploy de projetos em poucos passos. Sem servidores, sem uma complexa esteira de devops e baixo custo.

Resultando em sites mais rápidos, melhoria na experiência do usuário e na classificação do Google.

Alguns exemplos em ambas plataformas:

O Projeto Chiwawer 🐶

Com base no git flow podemos entregar sites rapidamente e globalmente. 🙌

Como exemplo, me aventurei criando um encurtador de URLs utilizando javascript, mongodb e VueJS para uma simples interface.

Cadastrando uma URL e associando um "apelido" (alias) que servirá como o identificador para a aplicação realizar o redirect.

Links:

Site
Github

Aqui vemos uma estrutura básica do projeto:

Vamos aproveitar e focar na estrutura das pastas de API , pela documentação do Vercel, para criarmos nossa camada de REST, basta incluir nossos arquivos diretamente na pas API. Dentro da pasta API, criamos o arquivo index.js ele será a chamada raiz do nosso REST e cada arquivo funcionará com um serviço servless.

Como por exemplo fazendo um GET em https://chiwawer.vercel.app/api o index.js irá responder com uma mensagem como na imagem abaixo.

Então para estruturar a sua camada de API, as pastas serão os paths, a pasta URLS será associada ao path /urls e quem irá responder será o index.js pertencente a ela.

E como ficam a passagem de parâmetros?

Nos nossos arquivos js podemos pegar os parâmetros de algumas formas:

Query Parameters
Body Parameters
Path Segments

Query Parameters e Body Parameters

module.exports = (req, res) => {
  res.json({
    body: req.body,
    query: req.query,
    cookies: req.cookies,
  });
};

No arquivo index.js da nossa API, podemos receber os parâmetros req e res manipularmos conforme a nossa necessidade. Dentro do objeto req temos os objetos body e query são respectivos das chamadas REST, sendo uma query parameter https://.../api?name=Leo e assim temos o valor name = "Leo" e para o body, em um POST por exemplo, podemos ter { "sobrenome" : "Yassuda" } .

Aqui contém um exemplo na prática, teste também fazendo um POST passando um body json para ver o resultado.

Path Segment

Passando parametros pelo path da API exige um passo a mais mas nada complicado.

https://.../api/name/Leo - Request de exemplo.

Para receber esse valor, basta criar a estrura de pastas /api/name/ e nela o nosso js com o nome [name].js e sim, o arquivo tem nome entre colchetes pois na abstração de roteamento da vercel saberá encaminha a requisição para este arquivo.

E no arquivo:

module.exports = (req, res) => {
  const {
    query: { name },
  } = req;

  res.send(`Hello ${name}!`);
};

Aqui um link para o teste prático.

Site

Para o front utilizei uma simples app em VueJs com as CDNs diretamente no HTML.

Toda estrutura do VueJs e arquivos estáticos deverão ser alocadas na pasta public.

Sem dores de cabeça e gastos com SSL para o seu site, por de baixo dos panos a Vercel usa o Let's Encrypt para adicionar o certificados aos sites e com renovação automática. Portanto desde o primeiro dia em produção com HTTPS habilitado. 😎

Github + Vercel

Para linkar seu repo com a conta na Vercel, vá em import

Insira a url do seu repo, nas próximas etapas de projeto é onde feita a configuração do framework usado, build e a localização da pasta do código.

Nas variáveis de ambiente, podemos configurar informações para o usa na aplicação como a conexão do mongoDB e node_env.

Feito deploy, já é possível acessar o dashboard com o projeto em execução.

Ao acessar o projeto já temos uma pré-vizualição do deploy.

Como o projeto está associado ao repo do github, a cada atualização na branch master, automaticamente será feito o build e deploy em produção.

Um bom jeito para o desenvolvimento é seguir um git flow e fazendo os pull request, a cada pull request é possível realizar testes do que foi alterado um uma url pertecente a essa etapa do flow. Após essa verificação e realizando merge em master, o procedimento de produção será inciado.

Para os detalhes do projeto, visite o repo no github 😊

👉 chiwawer 🐶

Automação de feed do seu blog no perfil do github 🤖

Leo Yassuda — Sat, 08 Aug 2020 22:15:50 +0000

Que tal linkar seus novos posts de conteúdo no perfil do github de forma automática?

Funciona com a maioria das plataformas de blogs como DEV, Wordpress, Mediume até playlist de youtube. Assim que você publicar um conteúdo novo, através do github actions, irá verificar de tempos em tempos se há uma atualização de FEED, com isso fará um update no readme do seu perfil.

Caso não saiba como fazer um readme para o seu perfil, clique aqui. 👈

Então bora lá! 🦾

Na imagem, tem como exemplo meu único post feito no dev.to 😜, mas assim que publicar esse conteúdo, teremos dois links na lista. 🤟

Passo a passo:

No seu arquivo REAMDE.md vamos inserir duas tags de marcação.

# Lastest Blog posts
<!-- BLOG-POST-LIST:START -->
<!-- BLOG-POST-LIST:END -->

Agora na raiz criaremos duas pastas a primeira .github e dentro a pasta workflows .
Dentro da pasta workflows , criaremos o arquivo de configuração yaml blog-post-workflow.yml com o seguinte conteúdo.

name: Latest blog post workflow
on:
  schedule:
    # Runs every hour
    - cron: '0 * * * *'

jobs:
  update-readme-with-blog:
    name: Update this repo's README with latest blog posts
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: gautamkrishnar/blog-post-workflow@master
        with:
          feed_list: "https://dev.to/feed/seu_usuario,https://medium.com/feed/@seu_usuario"

Obs.: no atributo feed_list passamos uma String separadas por vírgula dos links dos feeds que vocês queiram, nesse caso um exemplo para linkar o dev.to e o medium.

Agora podemos fazer o commit e push, e esperar pelo github actions ser rodado. ✌️

Para mais customizações ou opções avançadas, segue o link do autor dessa automação.

blog-post-workflow

Espero que tenham gostado =]

Um README para o seu user do Github?

Leo Yassuda — Thu, 06 Aug 2020 21:15:18 +0000

Dê um upgrade para o seu perfil =]

Em poucos passos podemos modificar a página do nosso perfil e acrescentar uma cara mais bacaninha como se fosse um "about me". 🖖

Bora lá e sem enrolação!

Passo a passo:

Qualquer editor de texto (se tiver suporte para tipografia Markdown é bem vindo).
Um repo com o mesmo nome de seu USERNAME do Github.
- no meu caso, eu já tenho como podem ver na imagem 😛
Esse repo tem de ser PÚBLICO.
Na raiz do repo criar o arquivo README.md ou na própria página de criação de repo deixar clicado a opção de criar o arquivo junto do repo.

Pronto! Agora basta customizar o README.md como quiser! 🙌

Se quiser pode usar o meu de exemplo [readme-exemplo] 👈

Dica:

Caso não apareça o README renderizado no seu perfil, vá no repo e clique no botão "Share to Profile"