{"id":19954,"date":"2020-02-12T10:48:54","date_gmt":"2020-02-12T12:48:54","guid":{"rendered":"https:\/\/king.host\/wiki\/?post_type=article&#038;p=19954"},"modified":"2025-06-11T11:56:36","modified_gmt":"2025-06-11T14:56:36","slug":"como-fazer-deploy-aplicacao-react","status":"publish","type":"article","link":"https:\/\/king.host\/wiki\/artigo\/como-fazer-deploy-aplicacao-react\/","title":{"rendered":"Como fazer deploy de uma aplica\u00e7\u00e3o React"},"content":{"rendered":"\n<p><em>Aprenda como realizar o deploy de sua aplica\u00e7\u00e3o React de uma maneira f\u00e1cil e simples, atrav\u00e9s desse artigo<\/em>.<\/p>\n\n\n\n<p>React \u00e9 uma biblioteca do JavaScript para cria\u00e7\u00e3o de interfaces, Sendo atualmente a biblioteca mais popular do JavaScript. <\/p>\n\n\n\n<p>Ent\u00e3o nesse artigo vamos ver que realizar o deploy de sua aplica\u00e7\u00e3o React pode ser muito simples.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/king.host\/?utm_source=wiki&amp;utm_medium=banner-artigo&amp;utm_campaign=banner-artigo-wiki-awareness-como-fazer-deploy-aplicacao-react\" target=\"_blank\" rel=\"noreferrer noopener\"><img data-original=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2015\/05\/banner_1.png\" alt=\"banner-kinghost\" class=\"wp-image-25436\" style=\"width:840px;height:auto\"\/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Preparando_os_arquivos_para_Deploy\"><\/span>Preparando os arquivos para Deploy<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Nesse tutorial, para exemplificar, vamos fazer o deploy da aplica\u00e7\u00e3o padr\u00e3o de quando iniciamos um projeto no React.<\/p>\n\n\n\n<p>Primeiramente vamos ir at\u00e9 a pasta onde se encontra nossa aplica\u00e7\u00e3o e rodar o seguinte comando:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\" lang=\"wp-block-preformatted\">npm run build<\/pre>\n\n\n\n<alerta class=\"wp-block-k-alerta\">Este comando deve ser executado em ambiente de <strong>desenvolvimento<\/strong>!!<\/alerta>\n\n\n\n<p>Esse comando ir\u00e1 gerar uma vers\u00e3o otimizada e pronta para deploy em qualquer ambiente. Quando rodar o comando, pode demorar uns minutos dependendo do tamanho da aplica\u00e7\u00e3o para que seja conclu\u00eddo. Ap\u00f3s isso a aplica\u00e7\u00e3o se encontrar\u00e1 dentro da pasta <strong>build<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"652\" height=\"179\" data-src=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-2.png\" alt=\"Como fazer deploy de uma aplica\u00e7\u00e3o React. Exibindo a pasta build criada dentro da pasta da aplica\u00e7\u00e3o.\" class=\"wp-image-19963 lazyload\" v-on:click=\"toggle_modal\" data-srcset=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-2.png 652w, https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-2-300x82.png 300w\" data-sizes=\"(max-width: 652px) 100vw, 652px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 652px; --smush-placeholder-aspect-ratio: 652\/179;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"652\" height=\"179\" src=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-2.png\" alt=\"Como fazer deploy de uma aplica\u00e7\u00e3o React. Exibindo a pasta build criada dentro da pasta da aplica\u00e7\u00e3o.\" class=\"wp-image-19963\" v-on:click=\"toggle_modal\" srcset=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-2.png 652w, https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-2-300x82.png 300w\" sizes=\"(max-width: 652px) 100vw, 652px\" \/><\/noscript><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Deploy_do_React\"><\/span>Deploy do React<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Ap\u00f3s termos os arquivos prontos para deploy, \u00e9 necess\u00e1rio passar os mesmos para o FTP do seu dom\u00ednio na pasta onde voc\u00ea vai querer fazer o deploy. <\/p>\n\n\n\n<p>Caso tenha alguma d\u00favida de como fazer o acesso ao FTP, pode seguir <a rel=\"noreferrer noopener\" aria-label=\"esse tutorial (abre numa nova aba)\" href=\"https:\/\/king.host\/wiki\/artigo\/acessar-ftp-via-filezilla\/\" target=\"_blank\">esse tutorial<\/a>. Esse deploy tamb\u00e9m pode ser feito via GIT, para isso acesse <a href=\"https:\/\/king.host\/wiki\/artigo\/como-integrar-o-github-ao-painel-de-controle-da-kinghost\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (abre numa nova aba)\">esse post<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"618\" height=\"300\" data-src=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-7.png\" alt=\"Exibindo arquivos no FTP.\" class=\"wp-image-19972 lazyload\" v-on:click=\"toggle_modal\" data-srcset=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-7.png 618w, https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-7-300x146.png 300w\" data-sizes=\"(max-width: 618px) 100vw, 618px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 618px; --smush-placeholder-aspect-ratio: 618\/300;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"618\" height=\"300\" src=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-7.png\" alt=\"Exibindo arquivos no FTP.\" class=\"wp-image-19972\" v-on:click=\"toggle_modal\" srcset=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-7.png 618w, https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-7-300x146.png 300w\" sizes=\"(max-width: 618px) 100vw, 618px\" \/><\/noscript><\/figure>\n\n\n\n<p>Nesse caso o caminho da aplica\u00e7\u00e3o ficou na raiz do nosso dom\u00ednio na <strong>www<\/strong>. Acessando em seu navegador <strong>https:\/\/seudominio.com.br<\/strong>  aparecer\u00e1 sua aplica\u00e7\u00e3o.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Deploy_em_subpasta\"><\/span>Deploy em subpasta<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Caso voc\u00ea queira utilizar o React em uma subpasta, \u00e9 necess\u00e1rio informar a URL antes de &#8220;<em>buildar<\/em>&#8221; a vers\u00e3o de produ\u00e7\u00e3o.<\/p>\n\n\n\n<p>Para fazer isso \u00e9 necess\u00e1rio alterar o arquivo <strong>package.json<\/strong> e adicionar essa linha:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\" lang=\"wp-block-preformatted\"> \"homepage\"&nbsp;:&nbsp;\"http:\/\/seusite.com.br\/pasta-da-aplica\u00e7\u00e3o\/\" <\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"472\" height=\"681\" data-src=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-8.png\" alt=\"Editando o arquivo package.json.\" class=\"wp-image-19978 lazyload\" v-on:click=\"toggle_modal\" data-srcset=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-8.png 472w, https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-8-208x300.png 208w\" data-sizes=\"(max-width: 472px) 100vw, 472px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 472px; --smush-placeholder-aspect-ratio: 472\/681;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"472\" height=\"681\" src=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-8.png\" alt=\"Editando o arquivo package.json.\" class=\"wp-image-19978\" v-on:click=\"toggle_modal\" srcset=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-8.png 472w, https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-8-208x300.png 208w\" sizes=\"(max-width: 472px) 100vw, 472px\" \/><\/noscript><\/figure>\n\n\n\n<p>Ap\u00f3s isso \u00e9 necess\u00e1rio rodar o <strong>npm run build<\/strong> e os arquivos ser\u00e3o gerados novamente.<\/p>\n\n\n\n<p>Agora \u00e9 s\u00f3 colocar eles no seu FTP dentro da pasta onde ficar\u00e1 sua aplica\u00e7\u00e3o. Ent\u00e3o voc\u00ea ter\u00e1 o retorno de sua aplica\u00e7\u00e3o, no nosso caso essa p\u00e1gina inicial.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"764\" height=\"688\" data-src=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-10.png\" alt=\"P\u00e1gina inicial da aplica\u00e7\u00e3o react.\" class=\"wp-image-19984 lazyload\" v-on:click=\"toggle_modal\" data-srcset=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-10.png 764w, https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-10-300x270.png 300w\" data-sizes=\"(max-width: 764px) 100vw, 764px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 764px; --smush-placeholder-aspect-ratio: 764\/688;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"764\" height=\"688\" src=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-10.png\" alt=\"P\u00e1gina inicial da aplica\u00e7\u00e3o react.\" class=\"wp-image-19984\" v-on:click=\"toggle_modal\" srcset=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-10.png 764w, https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-10-300x270.png 300w\" sizes=\"(max-width: 764px) 100vw, 764px\" \/><\/noscript><\/figure>\n\n\n\n<p>O React \u00e9 poss\u00edvel de ser utilizado em todos nossos planos de hospedagem,  voc\u00ea pode verificar os nossos planos <a rel=\"noreferrer noopener\" href=\"https:\/\/king.host\/node-js?utm_source=wiki&amp;utm_medium=texto&amp;utm_term=link-clicando-aqui&amp;utm_content=como-fazer-deploy-aplicacao-react&amp;utm_campaign=oferta-produto\" target=\"_blank\">clicando aqui<\/a>.<\/p>\n","protected":false},"author":9,"featured_media":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","article-category":[181,172],"article-tag":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/article\/19954"}],"collection":[{"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/comments?post=19954"}],"version-history":[{"count":4,"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/article\/19954\/revisions"}],"predecessor-version":[{"id":26648,"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/article\/19954\/revisions\/26648"}],"wp:attachment":[{"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/media?parent=19954"}],"wp:term":[{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/article-category?post=19954"},{"taxonomy":"article-tag","embeddable":true,"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/article-tag?post=19954"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}