{"id":20010,"date":"2025-08-27T03:01:44","date_gmt":"2025-08-27T06:01:44","guid":{"rendered":"https:\/\/king.host\/wiki\/?post_type=article&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

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

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

<\/span>Cria\u00e7\u00e3o aplica\u00e7\u00e3o painel<\/span><\/h3>\n\n\n\n

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

Para isso voc\u00ea pode verificar este artigo<\/a>.<\/p>\n\n\n\n

<\/span>Requisitos<\/span><\/h3>\n\n\n\n

Antes de fazermos o deploy da aplica\u00e7\u00e3o \u00e9 necess\u00e1rio que instalemos o express<\/strong>. Para isso podemos rodar esse comando:<\/p>\n\n\n\n

npm install express<\/pre>\n\n\n\n
<\/span>Preparando os arquivos para Deploy<\/span><\/h3>\n\n\n\n
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
Primeiramente vamos ir at\u00e9 a pasta onde se encontra nossa aplica\u00e7\u00e3o e rodar o seguinte comando:<\/p>\n\n\n\n
 npm run build<\/pre>\n\n\n\n
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 build<\/strong>. <\/p>\n\n\n\n
\"Pasta<\/figure>\n\n\n\n
<\/span>Upload de arquivos<\/span><\/h3>\n\n\n\n
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 build<\/strong> dentro da apps_nodejs<\/strong>.<\/p>\n\n\n\n
\"Pasta<\/figure>\n\n\n\n
<\/span>Edi\u00e7\u00e3o da main.js<\/span><\/h3>\n\n\n\n
Para que possamos fazer um exemplo vamos usar uma main.js<\/strong> padr\u00e3o com o express para poder iniciar a aplica\u00e7\u00e3o.<\/p>\n\n\n\n
var http = require('http');\nconst express = require('express');\nconst app = express();\nconst port = porta_da_aplica\u00e7\u00e3o;\napp.listen(port)<\/pre>\n\n\n\n
Com esse c\u00f3digo nossa aplica\u00e7\u00e3o node j\u00e1 deve estar rodando.<\/p>\n\n\n\n
<\/span>Cria\u00e7\u00e3o da rota<\/strong><\/span><\/h3>\n\n\n\n
Agora o que falta \u00e9 fazermos a rota para que seja puxado o nosso front-end via React.<\/p>\n\n\n\n
Ent\u00e3o agora vamos criar rotas no express para que ele consiga puxar nossos arquivos que est\u00e3o na build<\/strong>.<\/p>\n\n\n\n
Para que fa\u00e7amos isso podemos usar essas 3 linhas de c\u00f3digo:<\/p>\n\n\n\n
const baseDir = `${__dirname}\/build\/`\napp.use(express.static(`${baseDir}`))\napp.get('\/', (req, res) => res.sendfile('index.html' , { root : baseDir } ))<\/pre>\n\n\n\n
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 app.get(‘rota-desejada’<\/strong>).<\/p>\n\n\n\n
Assim sua aplica\u00e7\u00e3o j\u00e1 deve estar no ar. No nosso caso retornar\u00e1 essa p\u00e1gina:<\/p>\n\n\n\n
\"Aplica\u00e7\u00e3o<\/figure>\n\n\n\n
Viu como \u00e9 simples? Isso pode ser feito facilmente aqui na KingHost em nossos planos Node.JS, confira mais 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":[],"class_list":["post-20010","article","type-article","status-publish","format-standard","hentry","article-category-javascript","article-category-linguagens-web"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t