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.
\nSendo 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”
\nJavascript
\nAPIs
\nMarkup
\nTanto Netlify quanto Vercel, oferecem um rápido ambiente de desenvolvimento e infraestrutura para deploy de projetos em poucos passos. Sem a necessidade configurações de servidores, sem uma complexa esteira de devops e tudo isso a baixo custo.
\nResultando em sites mais rápidos, melhoria na experiência do usuário e também na classificação do Google.
\nAlguns exemplos em ambas plataformas:
\n\nCom base no git flow podemos entregar sites rapidamente e globalmente. 🙌
\nComo exemplo, me aventurei criando um encurtador de URLs utilizando javascript, mongodb e VueJS para uma simples interface.
\nCadastrando uma URL e associando um “apelido” (alias) que servirá como o identificador para a aplicação realizar o redirect.
\nVamos 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.
\nEntã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.
\nE como ficam a passagem de parâmetros?
\nNos nossos arquivos js podemos pegar os parâmetros de algumas formas:
\nmodule.exports = (req, res) => {\n res.json({\n body: req.body,\n query: req.query,\n cookies: req.cookies,\n });\n};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.
\nPassando parametros pelo path da API exige um passo a mais mas nada complicado.
\nhttps://.../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:
\nmodule.exports = (req, res) => {\n const {\n query: { name },\n } = req;\n\n res.send(`Hello ${name}!`);\n};Aqui um link para o teste prático.
\nPara o front utilizei uma simples app em VueJs com as CDNs diretamente no HTML.
\nToda 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. 😎
\nPara linkar seu repo com a conta na Vercel, vá em import
\nInsira 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.
\nNas variáveis de ambiente, podemos configurar informações para o usa na aplicação como a conexão do mongoDB e node_env.
\nAo acessar o projeto já temos uma pré-visualização do deploy.
\n