3
respostas

Subir o webapp /webpage para rodar online

Oi!

Como é o processo de subir um aplicativo/webpage feito com React, para um host online para acessá-lo online?

Obrigado!

3 respostas

Boa noite, Marcelo! Como vai?

Basicamente não tem muito mistério! Basta seguir a documentação dada pelo Facebook que orienta a executar o comando npm run build e colocar o conteúdo da pasta build que será criada no servidor de sua escolha!

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

"e colocar o conteúdo da pasta build que será criada no servidor de sua escolha"

Não entendi. Rodando o npm run build e usando a pasta built num host já tá ok?

E quanto ao código gerado no index.html, ele tá ok pra SEO?

Ou tem que fazer um outro procedimento para o html do 'index' ficar ok pra isso?

Fala Marcelo, tudo bem? Vamos lá:

Rodando o npm run build e usando a pasta built num host já tá ok?

O processo para publicar uma aplicação React segue algumas etapas:

  1. Empacotar a aplicação.
  2. Hospedar em algum servidor para fornecer o index.html.

Vamos aos detalhes de cada processo:

Empacotar a aplicação:

Nesse passo, precisamos pegar todo nosso código, bibiliotecas, estilos, imagens, fontes, etc... Todos os recursos e assets utilizados em nosso projeto e prepará-los para deploy.

Umas das maneiras para isso ser feito é através do comando build que pode ser executado com npm run build.

Isso vai gerar uma pasta build na raiz do projeto com o conteúdo empacotado e buildado. Será aplicado algumas técnicas e boas práticas de performance.

Hospedar em algum servidor para fornecer o index.html.

Uma vez que a pasta build foi gerado, ela já é sua aplicação final para deploy. O que você precisa fazer é subir essa pasta no seu hospedador e configurá-lo para devolver o index.html quando algum endereço ou IP for acessado pelo browser (navegador).

Eu recomendo você utilizar o Netlify:

https://netlify.com

Basicamente é só arrastar a pasta build que ele faz todo o resto.

Também pode utilizar outros serviços, por exemplo: GitHub pages, GitLab pages, S3 e CloudFront, DigitalOcean, etc....

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software