Subindo seu projeto Front-end gratuitamente

Fala Dev's, tranquilidade?

Mais um artigo sobre subir seu projeto front-end gratuitamente. Dessa vez eu vim apresentar pra vocês uma ferramenta que eu vi há algum tempo atrás, mas que eu só fui testar e usar recentemente.

Prepara aí que o artigo de hoje vai ser bem mais rápido!

Introdução

Como havia comentado no artigo anterior, servir online de forma fácil e prática sempre foi um problema. Apesar do GitHub Pages ser bem interessante, quem leu o artigo ou o usa, sabe que não é tão trivial assim, uma vez que você precisa NO MÍNIMO, saber usar GIT, e esse fator (apesar de imprescindível), aterroriza muita gente.

Então, hoje eu apresento pra vocês o Surge, que tem na sua missão:

"Publicação estática na web para devs Front-End"

A Ferramenta

Antes de mais nada, quero deixar claro que eu vou apresentar o básico da ferramenta, ou seja, apenas como subir o seu serviço. Ela possui várias opções bem interesses e um pouco mais avançadas como, por exemplo, domínio e página 404 customizável, clean URLs e várias outras features interessantíssimas. Sugiro a você acessar a documentação completa (aqui) para entender como aplicar cada feature.

O Surge surgiu com uma proposta de resolver de uma vez por todas esse problema que nós sempre enfrentamos. As vezes queremos mostrar o andamento de um projeto, mas subir online parece ser tão custoso. E é pensando nisso que ele foi desenvolvido.

Caso você tenha um pouco de noção de inglês, sugiro você ler o post introdutório do Surge no Medium. Vale muito a pena.

Preço

O Surge totalmente gratuito. E aí você pode se perguntar:

Mas como isso é possível?

Segundo a própria equipe do Surge, os desenvolvedores se preocupam bastante com a comunidade de desenvolvimento e com plataformas Open Source. Para eles, a ideia de que todos possam subir facilmente seus projetos para web é muito importante (você pode ler esse pequeno texto aqui).

Porém, nem só de amor ao open source vive um time de desenvolvedores. Assim, além da versão grátis, temos uma versão paga. E aí fica aquele questionamento…

Projetos profissionais

Como você pode ver no quadro abaixo, existem algumas pequenas vantagens ao se pagar o plano mensal. Porém, acredito ser recomendado caso você seja um freelancer e esse tipo de serviço já esteja incluído no seu pacote de serviços.

Como funciona

Bom, o seu funcionamento é bem simples. O Surge possui uma CLI — Command Line Interface ou em uma tradução livre, Interface de linha de comando criada em NodeJS.

Para assimilar melhor, pense em CLI como aqueles comandos que a gente roda no terminal para executar alguma ação como, por exemplo, o próprio GIT. A gente digita um comando (git) , passamos comandos e então e alguma será executada.
Assim, o requisito mínimo para você usar o Surge é você ter o NodeJS (e consequentemente o NPM) instalado na sua máquina e um terminalzinho.

Mãos na massa

Instalando o Surge

Como qualquer pacote NPM, você pode instalar o Surge localmente ou globalmente. Por questões de praticidade, vamos instala-lo globalmente:

npm install --global surge

Obs.: Caso você tenha algum tipo de erro de permissão para instalar pacotes globais com o NPM, você pode seguir este tutorial do próprio NPM.

Caso prefira yarn:

yarn global add surge

Feito isso, o surge estará disponível para uso:

Subindo o projeto

Como exemplo, vou utilizar o mesmo projeto que eu fiz no post sobre GitHub Pages (você pode ver o código clicando aqui).

No terminal, já dentro da pasta do meu projeto, eu vou rodar o comando surge:

A primeira coisa que ele vai me pedir, é um e-mail e uma senha para criar uma conta.

Após a criação da conta, aparecerá o campo project path para que digamos exatamente qual pasta deverá ser hospedada no servidor. Ele assumirá como parte do caminho, a pasta que estamos logados (root do projeto), logo, basta digitarmos a pasta que queremos subir, que neste caso é a pasta dist/:

O próximo campo que aparecerá é o domain, ou, domínio. O Surge gera um domínio randômico para nós:

Porém, podemos colocar um domínio que condiz mais com o nosso projeto sem maiores problemas:

Lembrando que há a possibilidade de personalizar seu domínio de forma gratuita, porém, esse tópico não será abordado neste post.

Após confirmar o domain, será feito o upload do seu projeto para o servidor do Surge e o mesmo já estará disponível para acesso:

Acessando o nosso domínio (publish-frontend-pages.surge.sh), podemos ver o resultado como esperávamos.

Obs.: essa publicação será desligada do decorrer do post.