Experimentando o jamstack da Vercel com um encurtador de URLs

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:

• https://jamstack.org/examples/
• https://vercel.com/docs/introduction

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 🐶