{"id":20010,"date":"2025-08-27T03:01:44","date_gmt":"2025-08-27T06:01:44","guid":{"rendered":"https:\/\/king.host\/wiki\/?post_type=article&#038;p=20010"},"modified":"2025-08-27T03:01:44","modified_gmt":"2025-08-27T06:01:44","slug":"fazer-deploy-de-react-com-node-js","status":"publish","type":"article","link":"https:\/\/king.host\/wiki\/artigo\/fazer-deploy-de-react-com-node-js\/","title":{"rendered":"React com Node.JS: como fazer deploy"},"content":{"rendered":"\n<p><em>Voc\u00ea tem d\u00favidas de como fazer o deploy de sua aplica\u00e7\u00e3o React com Node JS? Nesse artigo simplificamos para voc\u00ea, confira mais.<\/em><\/p>\n\n\n\n<p>O React sendo uma biblioteca muito vers\u00e1til do JavaScript \u00e9 poss\u00edvel combina-la com v\u00e1rias linguagens, a combina\u00e7\u00e3o mais comum entre elas \u00e9 junto ao Node JS. Nesse tutorial vamos ver como fazer essa integra\u00e7\u00e3o de uma maneira simples.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Criacao_aplicacao_painel\"><\/span>Cria\u00e7\u00e3o aplica\u00e7\u00e3o painel<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Primeira \u00e9 necess\u00e1rio que fa\u00e7amos a cria\u00e7\u00e3o de uma aplica\u00e7\u00e3o node no painel de controle, para que seja criado toda estrutura de pastas do ambiente.<\/p>\n\n\n\n<p>Para isso voc\u00ea pode verificar <a href=\"https:\/\/king.host\/wiki\/artigo\/como-criar-uma-aplicacao-nodejs-no-painel-de-controle-kinghost\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"este artigo (abre numa nova aba)\">este artigo<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Requisitos\"><\/span>Requisitos<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Antes de fazermos o deploy da aplica\u00e7\u00e3o \u00e9 necess\u00e1rio que instalemos o <strong>express<\/strong>. Para isso podemos rodar esse comando:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\" lang=\"wp-block-preformatted\">npm install express<\/pre>\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<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 data-original=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-2.png\" alt=\"Pasta build criada dentro da pasta da aplica\u00e7\u00e3o.\" v-on:click=\"toggle_modal\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Upload_de_arquivos\"><\/span>Upload de arquivos<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Fa\u00e7a o upload dos arquivos para onde voc\u00ea quer que fique sua aplica\u00e7\u00e3o React. No meu caso, irei deixar a pasta <strong>build<\/strong> dentro da <strong>apps_nodejs<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"617\" height=\"157\" data-src=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-14.png\" alt=\"Pasta build adicionada na pasta da aplica\u00e7\u00e3o no servidor.\" class=\"wp-image-20049 lazyload\" v-on:click=\"toggle_modal\" data-srcset=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-14.png 617w, https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-14-300x76.png 300w\" data-sizes=\"(max-width: 617px) 100vw, 617px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 617px; --smush-placeholder-aspect-ratio: 617\/157;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"617\" height=\"157\" src=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-14.png\" alt=\"Pasta build adicionada na pasta da aplica\u00e7\u00e3o no servidor.\" class=\"wp-image-20049\" v-on:click=\"toggle_modal\" srcset=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-14.png 617w, https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-14-300x76.png 300w\" sizes=\"(max-width: 617px) 100vw, 617px\" \/><\/noscript><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Edicao_da_mainjs\"><\/span>Edi\u00e7\u00e3o da main.js<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Para que possamos fazer um exemplo vamos usar uma <strong>main.js<\/strong> padr\u00e3o com o express para poder iniciar a aplica\u00e7\u00e3o.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\" lang=\"wp-block-preformatted\">var&nbsp;http&nbsp;=&nbsp;require('http');\nconst&nbsp;express&nbsp;=&nbsp;require('express');\nconst&nbsp;app&nbsp;=&nbsp;express();\nconst&nbsp;port&nbsp;=&nbsp;porta_da_aplica\u00e7\u00e3o;\napp.listen(port)<\/pre>\n\n\n\n<p>Com esse c\u00f3digo nossa aplica\u00e7\u00e3o node j\u00e1 deve estar rodando.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Criacao_da_rota\"><\/span><strong>Cria\u00e7\u00e3o da rota<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Agora o que falta \u00e9 fazermos a rota para que seja puxado o nosso front-end via React.<\/p>\n\n\n\n<p>Ent\u00e3o agora vamos criar rotas no express para que ele consiga puxar nossos arquivos que est\u00e3o na <strong>build<\/strong>.<\/p>\n\n\n\n<p>Para que fa\u00e7amos isso podemos usar essas 3 linhas de c\u00f3digo:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\" lang=\"wp-block-preformatted\">const&nbsp;baseDir&nbsp;=&nbsp;`${__dirname}\/build\/`\napp.use(express.static(`${baseDir}`))\napp.get('\/',&nbsp;(req,&nbsp;res)&nbsp;=&gt;&nbsp;res.sendfile('index.html'&nbsp;,&nbsp;{&nbsp;root&nbsp;:&nbsp;baseDir&nbsp;}&nbsp;))<\/pre>\n\n\n\n<p>Nesse caso estamos criando uma rota para que a aplica\u00e7\u00e3o React fique na raiz de nosso site, mas caso queira coloc\u00e1-la em outro caminho \u00e9 s\u00f3 editar a linha <strong>app.get(&#8216;rota-desejada&#8217;<\/strong>).<\/p>\n\n\n\n<p>Assim sua aplica\u00e7\u00e3o j\u00e1 deve estar no ar. No nosso caso retornar\u00e1 essa p\u00e1gina:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"528\" height=\"462\" data-src=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-15.png\" alt=\"Aplica\u00e7\u00e3o padr\u00e3o react com node rodando.\" class=\"wp-image-20053 lazyload\" v-on:click=\"toggle_modal\" data-srcset=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-15.png 528w, https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-15-300x263.png 300w\" data-sizes=\"(max-width: 528px) 100vw, 528px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 528px; --smush-placeholder-aspect-ratio: 528\/462;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"528\" height=\"462\" src=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-15.png\" alt=\"Aplica\u00e7\u00e3o padr\u00e3o react com node rodando.\" class=\"wp-image-20053\" v-on:click=\"toggle_modal\" srcset=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-15.png 528w, https:\/\/king.host\/wiki\/wp-content\/uploads\/2020\/02\/image-15-300x263.png 300w\" sizes=\"(max-width: 528px) 100vw, 528px\" \/><\/noscript><\/figure>\n\n\n\n<p>Viu como \u00e9 simples? Isso pode ser feito facilmente aqui na KingHost em nossos planos Node.JS, confira mais <a href=\"http:\/\/king.host\/node-js?utm_source=wiki&amp;utm_medium=site&amp;utm_term=&amp;utm_content=hospedagem-de-sites-wiki&amp;utm_campaign=content-marketing\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"clicando aqui (abre numa nova aba)\">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\/20010"}],"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=20010"}],"version-history":[{"count":2,"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/article\/20010\/revisions"}],"predecessor-version":[{"id":26958,"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/article\/20010\/revisions\/26958"}],"wp:attachment":[{"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/media?parent=20010"}],"wp:term":[{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/article-category?post=20010"},{"taxonomy":"article-tag","embeddable":true,"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/article-tag?post=20010"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}