Neste artigo, exploraremos como criar uma aplicação Node.js utilizando o framework Express, juntamente com um cliente React.js. Além disso, abordaremos como configurar o package.json para permitir a execução simultânea das duas aplicações com um único comando.

Passo 1: Criando a Aplicação Node.js com Express

Instalação do Express

O primeiro passo é instalar o Node.js, caso ainda não esteja instalado. Em seguida, abra o terminal e crie um diretório para o projeto.

mkdir minha-aplicacao
cd minha-aplicacao

Agora, vamos criar a aplicação Node.js e instalar o Express:

npm init -y
npm install express

Configurando o Servidor Express

Crie um arquivo chamado server.js na raiz do diretório do projeto. Abaixo está um exemplo simples de configuração do servidor Express:

const express = require('express');
const app = express();
const PORT = process.env.PORT || 3001;

app.get('/', (req, res) => {
  res.send('Servidor Express rodando!');
});

app.listen(PORT, () => {
  console.log(`Servidor rodando na porta ${PORT}`);
});

Passo 2: Criando o Cliente React.js

Instalação do React.js

Agora, vamos criar o cliente React.js dentro do mesmo diretório do projeto:

npx create-react-app client

Executando o Cliente React.js

Para executar o cliente React.js separadamente, você pode navegar para o diretório client e executar o seguinte comando:

cd client
npm start

Passo 3: Configurando o package.json

Agora, vamos configurar o package.json para permitir a execução simultânea do servidor Express e do cliente React.js com um único comando.

No diretório raiz do projeto, abra o arquivo package.json e adicione os seguintes scripts:

"scripts": {
  "start": "concurrently \"node server.js\" \"npm run client\"",
  "client": "cd client && npm start"
}

O script start utiliza o pacote concurrently para executar tanto o servidor Express quanto o cliente React.js simultaneamente. O script client navega para o diretório do cliente React.js e inicia a aplicação.

Executando Ambas as Aplicações

Agora, você pode executar ambas as aplicações simultaneamente com o seguinte comando no terminal:

npm start

Isso iniciará o servidor Express na porta definida (3001 neste exemplo) e também iniciará o cliente React.js na porta padrão (3000).

Conclusão

Neste artigo, abordamos a criação de uma aplicação Node.js com Express e um cliente React.js. Demonstramos como configurar o package.json para permitir a execução simultânea de ambas as aplicações com um único comando. Essa abordagem é útil para desenvolvimento local e ajuda a simplificar o processo de teste e depuração das aplicações, tornando o desenvolvimento mais eficiente e produtivo.