Autor Tema: React Mu CMS (made with react) (Leído 728 veces)

cepoidevs

⚔️ React Mu - Site profissional para Servidor de Mu Online

Este projeto é uma aplicação web de alta performance criada para servir como painel de controle e site público para um servidor de Mu Online.
Utiliza uma arquitetura moderna baseada em Node.js (Express) e React com Server-Side Rendering (SSR) para otimizar SEO e desempenho inicial.

Imagens

Spoiler for Hiden:

🚀 Stack Tecnológico (Tech Stack)

Componente	Tecnologia	Notas Importantes
Frontend	React (v18) + Vite	Experiência dinâmica com SSR.
Backend	Node.js (Express v5)	API RESTful e middleware seguro.
Banco de Dados	Microsoft SQL Server (MSSQL)	Acesso direto às bases MuOnline e MuOnline_API.
Segurança	JWT, HttpOnly Cookies, bcrypt, Rate Limiting	Autenticação robusta e proteção de endpoints.
Performance	Cache de Rank e Status	Minimiza consultas repetitivas ao banco de dados.

🛡️ Segurança Implementada

O sistema de autenticação usa JWT com Cookies HttpOnly para proteger sessões de usuário.

Recurso	Propósito
HttpOnly	Evita ataques XSS. Os cookies não são acessíveis via JavaScript.
Recuperação Segura	Redefinição de senha com tokens de uso único e expiração curta.
Ativação por Email (Opcional)	Verificação por email para evitar bots e contas falsas.
Secure	Exige HTTPS. Protege contra ataques Man-in-the-Middle.
SameSite=Strict	Previne ataques CSRF garantindo envio apenas do mesmo domínio.
Lógica Separada	Hash de senhas é tratado em módulo separado (hashUtils.js).

Cita

🔒 Lembre-se: Para usar a flag Secure, o site deve rodar em HTTPS com certificado SSL válido.

🧰 Guia de Instalação e Uso para Desenvolvedores

⚙️ I. Requisitos Prévios

Certifique-se de ter o seguinte instalado:

Requisito	Versão mínima	Descrição
Node.js	18+	Ambiente de execução principal
npm	Incluído	Gerenciador de pacotes
Microsoft SQL Server	—	Acesso às BD MuOnline
Servidor do Jogo	—	Verificação de status em tempo real

🚀 II. Configuração e Instalação Inicial

O projeto está estruturado assim:

Código

/client  → Frontend (React + Vite)
/server  → Backend (Express + MSSQL)

1. Configurar Variáveis de Ambiente
Crie um arquivo `.env` dentro de `/server` com o seguinte conteúdo:

Código

# --- Configuração do Banco de Dados MSSQL ---
DB_SERVER=sua_ip_ou_nome_do_servidor_sql
DB_PORT=1433
DB_NAME=MuOnline
DB_USER=seu_usuario_sql
DB_PASSWORD=sua_senha_sql

# --- Configuração do Servidor de Jogo ---
GAME_SERVER_IP=ip_do_seu_gameserver
GAME_SERVER_PORT=55901

# --- Segurança e Autenticação ---
JWT_SECRET="Minha_Chave_Secreta_Super_Segura_Que_Só_Eu_Sei"
PASSWORD_HASH_METHOD="md5"
BCRYPT_SALT_ROUNDS=10

# --- Configuração de Administração ---
ADMIN_ACCOUNT_ID="nome_da_conta_admin"

# --- Configuração da API Pública ---
PUBLIC_API_URL="http://localhost:5000"

# --- Email de recuperação / ativação ---
EMAIL_HOST=smtp.exemplo.com 
EMAIL_PORT=587 
[email protected]
EMAIL_PASSWORD=sua_senha_ou_chave_de_aplicacao

ENABLE_EMAIL_ACTIVATION=false 
ACTIVATION_TOKEN_EXPIRY_HOURS=24

Cita

⚠️ Importante: Se usar HTTPS, altere PUBLIC_API_URL para seu domínio com https://

🚀 Guia de Deploy

📁 Arquivos necessários:

Arquivo/Pasta	Propósito
client/	Frontend otimizado e bundle SSR.
dist-obf/	Backend ofuscado (server.js, controllers, etc.).
package.json	Instalação de dependências em produção.
.env	Credenciais da DB e Game Server (manter privado).

🧩 Estrutura Final:

Código

/reactmu/
├── server/
│   ├── package.json
│   ├── .env  
│   ├── dist-obf/
│   └── node_modules/
└── client/
    └── dist/

⚙️ Comandos para iniciar o site:

1. Instalar dependências:

Código

cd /reactmu/server
npm install --production

2. Iniciar servidor:

Código

node dist-obf/server.js

Cita

💡 Use NGINX ou Apache como proxy reverso para lidar com SSL e portas 80/443.

🟢 Guia Rápido: Instalação do Node.js (v18+)

Opção 1: Download direto (Windows/macOS)
1. Acesse https://nodejs.org
2. Baixe a versão LTS
3. Execute o instalador (.msi ou .pkg)

Opção 2: Gerenciador de versões (NVM)

Código

nvm install 18
nvm use 18

Verificar instalação:

Código

node -v
npm -v

📚 Recursos Úteis

Por enquanto o site utiliza a base de dados dos files 97k do Kayito. Os únicos eventos exibidos no momento são Devil Square e Blood Castle, além de rankings de resets e guild.
Atualmente estou trabalhando no site e continuarei atualizando e adicionando mais compatibilidade e funções com bases mais recentes; o próximo passo será adicionar compatibilidade com a base utilizada pelo MuEMU até a Season 6.

Quanto ao design, planejo criar outros layouts para o site; este não será o único.

Qualquer atualização será publicada aqui no fórum; também podem me escrever no privado caso desejem contato.

DOWNLOAD

Créditos: Luiz Rios pelo design do site.

Autor Tema: React Mu CMS (made with react) (Leído 728 veces)

cepoidevs

React Mu CMS (made with react)

Gracias: