Text-based MMORPG com JavaScript

Preparando o setup

Como dito anterior vou utilizar o boilerplate da T3 para fazer o setup do projeto, caso você queira fazer usando outro framework, fique a vontade.

Para usar precisamos do node versão 18.17+ instalado, no meu caso eu estou usando a versão: v20.11.0.

Você pode encontrar mais detalhes sobre o T3 no site oficial.

Eu vou pular a parte de instalação do Node, npm porque se você está fazendo esse curso provavelmente você já manja dos paranaue, mas se você não tenha instalado faça a instalação e depois você volta aqui.

Para criar o projeto vamos usar o comando:

Se você estiver usando o BUN

bun create t3-app@latest

Para quem usa npm

npm create t3-app@latest

Para quem usa yarn

yarn create t3-app@latest

E para o Bernardo que usa pnpm

pnpm create t3-app@latest

Eu gosto do bun porque ele é bem mais rapido para instalar os pacotes eu ia usar ele, mas no momento da criação do curso eu não tinha ele instalado na minha maquina windows então vou usar o NPM mesmo, mas fique a vontade para usar o que você preferir.

Depois de criar o projeto, vamos entrar na pasta.

Configurações do T3Stack

Por padrão se você tentar rodar o projeto ele vai dar esse erro:

npm run dev

Esse primeiro erro é porque por padrão o NextAuth precisa de algum provider de autenticação, como vamos usar o Discord, vamos no arquivo .env e vamos alterar as informações de autenticação.

No final do arquivo você vai encontrar o seguinte:

# Next Auth Discord Provider
DISCORD_CLIENT_ID=""
DISCORD_CLIENT_SECRET=""

A principio podemos colocar qualquer coisa ali só pra fazer ele funcionar, depois voltamos aqui e configuramos corretamente as informações.

# Next Auth Discord Provider
DISCORD_CLIENT_ID="menthor"
DISCORD_CLIENT_SECRET="menthor"

Pronto, agora a gente salva o arquivo e rodamos o projeto novamente esse vai ser o resultado:

npm run dev

Podemos clicar no link e ver o projeto rodando, ou digitar http://localhost:3000 no navegador.

Depois de alguns segundos esse site deve ser carregado no seu navegador:

A primeira vez ele demora um pouquinho mais para compilar os assets, mas depois ele executa mais rapido, então não se preocupe se demorar um pouco.