2

Publicando projetos HTML, JavaScript e CSS no HEROKU

#JavaScript #HTML #CSS
Jose Santos
Jose Santos

Boa tarde pessoal! Venho compartilhar uma flexibilidade bem legal que aprendi lá no site SHARE, que é a utilização do heroku para publicar seu código em HTML.

A primeira coisa que devemos fazer é acessar o site do heroku, através do link www.heroku.com . Nele você irá criar sua conta (caso não tenha), que é uma tarefa bem simples, basta clicar na opção “Sign Up” que fica no topo superior do site. A criação da conta é feita em poucos passos, com confirmação de cadastro através do email.


Com sua conta criada, agora basta entrar no Heroku com a suas credenciais e seguir as orientações para criar um NOVO aplicativo, esta criação se refere ao seu código (html/java) que já esteja no repositório do GitHub, importante lembrar que o HEROKU não aceita lower/Upper case compondo o nome do novo App a ser criado e deve ser ÙNICO para futuramente ser publicado em nuvem.

Após a criação do App no HEROKU conforme padrões estabelecidos, basta selecionar o GitHub a ser utilizado para se conectar com o HEROKU através de credenciais já validadas no repositório (GitHub) e informar o nome da projetos a ser conectado e proceder com os procedimentos de Deploy do HEROKU que certamente acusará erro por se tratar de linguagem NÂO suportada no processo de deployment, neste momento basta proceder conforme orientações abaixo, qual é o motivo deste artigo:

Segue um exemplo do erro causado por NÂO suportar o deploy na linguagem HTML no HEROKU:

"remote: ! No default language could be detected for this app.

remote: INT: This occurs when Heroku cannot detect the buildpack to use for this application automatically.

remote: See https://devcenter.heroku.com/articles/buildpacksremote:

remote: ! Push failed

remote: Verifying deploy...remote:


Esse erro nos informa que um projeto apenas com html, javascript e css não consegue ser detectado no heroku.

A dica aqui é então utilizar um arquivo php, como index e incluir o arquivo html do nosso projeto, fazendo com que ele seja encapsulado:


Exemplo: index.php(<?php include_once("index.html"); ?>)


Basta salvar o arquivo index.php dentro da pasta onde se encontra também o próprio index.html, NÃO esquecer de realizar a atualização do repositório GitHub via "push" e "commit" ou adicionar o index.php via "upload" no GitHub e proceder com o deploy novamente, agora seu código será publicado (deploy) e poderá ser executado via https totalmente cloud.


Abaixo segue o link do projeto replicando a tela do Netflix utilizando HTML,Javascript e CSS:


Site: https://netflix-bootcamp.herokuapp.com/

0
39

Comentários (1)

0
Leandro Carvalho

Leandro Carvalho

17/08/2021 18:58

Achei muito interessante esse método. Parabéns pelo excelente Artigo.

Gosto de música e esportes (Botafoguense), sou especialista em TI com foco em soluções criativas para os gestores, entusiasta em novas tecnologias e inovação.

Brasil