New Project -

JavaScript/TypeScript com
Node.js - React/Next.js

Novo projeto JavaScript/TypeScript com Node.js no

back-end e React/Next.js no front-end
1. Configuração Inicial.................................................................................................................................
1.1 Instale o Node.js:..................................................................................................................................
1.1.1 Baixe e instale o Node.js:...........................................................................................................
1.1.2 Confirme a instalação:................................................................................................................
1.2 Instale o Visual Code:..........................................................................................................................
1.2.1 Use o VS Code:............................................................................................................................
2. Criar o Back-end com Node.js..................................................................................................................
2.1 Inicialize o Projeto Node.js:.................................................................................................................
2.1.1 Comando para criar o package.json..........................................................................................
2.2 Instale os Pacotes Necessários:...................................................................................................
2.3 Configure o TypeScript:.......................................................................................................................
2.3.1 Gere o arquivo tsconfig.json:.....................................................................................................
2.3.2 Edite o tsconfig.json:..................................................................................................................
2.4 Crie a Estrutura de Pastas:..................................................................................................................
2.5 Configure o Servidor Express:............................................................................................................
2.5.1 No arquivo src/index.ts:..............................................................................................................
2.6 Adicione o Script de Desenvolvimento no package.json:................................................................
2.7 Inicie o Back-end:.................................................................................................................................
2.7.1 O servidor estará disponível em http://localhost:5000............................................................
3. Criar o Front-end com Next.js.....................................................................................................................
3.1 Volte à Pasta Raiz e Crie o Front-end:................................................................................................
3.2 Estrutura Inicial do Front-end:............................................................................................................
3.2.1 Execute o projeto para confirmar:.............................................................................................
3.2.2 O front-end estará disponível em http://localhost:3000..........................................................
3.3 Configure o Tailwind CSS (Opcional, para Estilo Rápido):..............................................................
3.3.1 Instale o Tailwind:.......................................................................................................................
3.3.2 Configure o arquivo tailwind.config.js:.....................................................................................
3.3.3 Adicione no app/globals.css:.....................................................................................................
4. Integrar o Front-end com o Back-end........................................................................................................
4.1 Configure um Cliente Axios no Front-end:........................................................................................
4.1.1 Volte para a pasta raiz e instale o Axios:..................................................................................
4.2 Crie o arquivo services/api.ts:............................................................................................................
4.2.1 Vá até o diretório do Front-end..................................................................................................
4.2.2 Crie a pasta services (se não existir)........................................................................................
4.2.3 Crie o arquivo api.ts dentro da pasta services.........................................................................
4.2.4 Conteúdo do arquivo api.ts........................................................................................................
4.3 Exemplo de Requisição ao Back-end:................................................................................................
4.3.1 No arquivo pages/index.tsx:.......................................................................................................
1. Configuração Inicial
1.1 Instale o Node.js:
1.1.1 Baixe e instale o Node.js:

Node.js.

1.1.2 Confirme a instalação:

node -v
npm -v

1.2 Instale o Visual Code:

1.2.1 Use o VS Code:

Visual Studio Code.

2. Criar o Back-end com Node.js

2.1 Inicialize o Projeto Node.js:
2.1.1 Comando para criar o package.json.

mkdir new-project
cd new-project
mkdir backend
cd backend
npm init -y

2.2 Instale os Pacotes Necessários:

npm install express cors dotenv body-parser

npm install typescript @types/node @types/express ts-node-dev --save-dev
npm install --save-dev @types/cors

2.3 Configure o TypeScript:

2.3.1 Gere o arquivo tsconfig.json:

npx tsc --init

2.3.2 Edite o tsconfig.json:

{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true
}
}

2.4 Crie a Estrutura de Pastas:

mkdir src
cd src
Windows:
echo. > index.ts
Linux/Mac:
touch index.ts
2.5 Configure o Servidor Express:
2.5.1 No arquivo src/index.ts:

import express from 'express';

import cors from 'cors';
import dotenv from 'dotenv';

dotenv.config();

const app = express();

app.use(cors());
app.use(express.json());

const PORT = process.env.PORT || 5000;

app.get('/', (req, res) => {

res.send('New Project Back-end está rodando!');
});

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

2.6 Adicione o Script de Desenvolvimento no package.json:

"scripts": {
"dev": "ts-node-dev src/index.ts"
}

2.7 Inicie o Back-end:

npm run dev

2.7.1 O servidor estará disponível em http://localhost:5000.

3. Criar o Front-end com Next.js
3.1 Volte à Pasta Raiz e Crie o Front-end:
cd ..
npx create-next-app@latest frontend --typescript
cd frontend

3.2 Estrutura Inicial do Front-end:

3.2.1 Execute o projeto para confirmar:

npm run dev

3.2.2 O front-end estará disponível em http://localhost:3000.

3.3 Configure o Tailwind CSS (Opcional, para Estilo Rápido):

3.3.1 Instale o Tailwind:

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init

3.3.2 Configure o arquivo tailwind.config.js:

module.exports = {
content: ['./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
};

3.3.3 Adicione no app/globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;
4. Integrar o Front-end com o Back-end
4.1 Configure um Cliente Axios no Front-end:

4.1.1 Volte para a pasta raiz e instale o Axios:

cd ..
npm install axios

4.2 Crie o arquivo services/api.ts:

4.2.1 Vá até o diretório do Front-end

cd frontend

4.2.2 Crie a pasta services (se não existir)

mkdir services

4.2.3 Crie o arquivo api.ts dentro da pasta services

Windows:
echo. > services/api.ts
Linux/Mac:
touch services/api.ts

4.2.4 Conteúdo do arquivo api.ts

import axios from 'axios';

const api = axios.create({
baseURL: 'http://localhost:5000', // URL do back-end
});
export default api;
4.3 Exemplo de Requisição ao Back-end:
4.3.1 No arquivo pages/index.tsx:

import { useEffect, useState } from 'react';

import api from '../services/api';

const Home = () => {

const [message, setMessage] = useState('');
useEffect(() => {
api.get('/')
.then(response => setMessage(response.data))
.catch(error => console.error(error));
}, []);
return (
<div className="flex items-center justify-center h-screen
bg-gray-100">
<h1 className="text-3xl font-bold">{message}</h1>
</div>
);
};
export default Home;