Executando o código localmente

Tudo neste curso roda no navegador no Scrimba, e você nunca precisa sair de lá. Mas em algum momento você pode querer o projeto em sua própria máquina: para continuar desenvolvendo depois que o curso acabar, para usar seu próprio editor, ou para colocar em um repositório Git seu.

Esta página cobre isso. É opcional, e nada mais adiante no curso depende disso.

O que você precisa primeiro

Uma versão LTS suportada do Node.js. Node 24 é recomendado, e Node 22 também funciona. Veja o que você tem:

$ node --version
v24.18.0

Se aparecer "command not found", instale a versão marcada LTS em nodejs.org.

npm. Node inclui npm, e downloads do Scrimba são projetos npm. Verifique se está disponível:

$ npm --version
11.18.0

JunoO que você precisa primeiro Use uma versão LTS suportada do Node.js: Node 24 é recomendado e Node 22 funciona. O curso tem um piso mínimo em Node 20.12 porque foi onde o Node adicionou a API de arquivo de ambiente integrada, mas atender um piso de compatibilidade não é a mesma coisa que rodar uma versão mantida.

Pegue o código

Clique com o botão direito no título do projeto no editor do Scrimba e escolha Download as Zip. Descompacte o arquivo baixado e mova para sua pasta no terminal:

$ cd intro-to-ai-agents-lesson

Dê uma olhada no que tem lá. Você deve ver server.js, package.json, package-lock.json, environment.js, vite.config.js e os próprios arquivos JavaScript da aula.

JunoPegue o código Baixe o projeto como Zip, descompacte e use cd para entrar na pasta que contém package.json. Essa pasta é onde todos os comandos desta página rodam.

Instale e execute

Esta é a única diferença real entre o Scrimba e sua máquina, e é o passo que as pessoas perdem.

No Scrimba, AI_URL, AI_KEY e AI_MODEL são armazenados nas configurações de sua conta, e o Scrimba os injeta no projeto em execução. Por isso não há um arquivo .env na versão do navegador: não é necessário lá, e seria um lugar ruim para guardar uma chave em um editor compartilhado de qualquer forma.

Nada injeta na sua máquina, então você fornece você mesmo. Abra as configurações de conta do Scrimba, copie os mesmos três valores e salve em um arquivo chamado .env na pasta do projeto, ao lado de package.json:

AI_URL=<cole das configurações do Scrimba>
AI_KEY=<cole das configurações do Scrimba>
AI_MODEL=<cole das configurações do Scrimba>

Um nome por linha, sem aspas e sem espaços em volta do =. environment.js lê esse arquivo quando o projeto inicia, usando o suporte de arquivo de ambiente integrado ao Node. Esse é o motivo inteiro do piso de versão mais acima na página.

Se você colocar este projeto em um repositório Git seu, mantenha .env fora dele. AI_KEY é uma credencial, e uma chave que alcance um repositório público é uma chave que você terá que substituir. Um .gitignore de uma linha na pasta do projeto resolve:

.env

O manual do Git entra no hábito mais amplo em ignorando arquivos e boas práticas.

Com isso em lugar, instale as dependências:

$ npm install

npm lê a lista de dependências de package.json e as versões exatamente resolvidas de package-lock.json, então você consegue a mesma árvore contra a qual a aula foi gravada. Ele escreve uma pasta node_modules, que é grande e reconstruível, então isso também pertence a .gitignore.

Depois inicie o projeto:

$ npm run dev

  ➜  Local:   http://localhost:5173/

Abra o endereço que ele imprime. Em uma configuração padrão do Vite isso é http://localhost:5173/, e ler a linha é melhor do que assumir, pelo motivo que a próxima seção cobre.

JunoInstale e execute Copie AI_URL, AI_KEY e AI_MODEL das suas configurações do Scrimba para um arquivo .env ao lado de package.json, porque nada injeta para você fora da plataforma. Depois npm install e npm run dev. Adicione .env a .gitignore antes de fazer qualquer commit: uma chave que alcance um repositório público é uma chave que você terá que substituir.

Quando a porta já está ocupada

Um servidor de desenvolvimento precisa de uma porta livre, e 5173 é o padrão do Vite, então qualquer outra coisa rodando Vite provavelmente a ocupou. Isso não quebra seu projeto. Vite pega a próxima porta acima, avisa, e continua:

$ npm run dev
Port 5173 is in use, trying another one...

  ➜  Local:   http://localhost:5174/

Se 5174 também estiver ocupada tenta 5175, depois 5176, contando para cima até encontrar uma que está livre. Então a porta não importa e você nunca precisa escolher uma. Leia a URL da linha que o Vite imprime e abra aquela. Criar o hábito de ler essa linha, em vez de digitar localhost:5173 de memória, é o que evita uma busca por "a página não carrega" depois.

Quando você realmente quer uma porta particular, passe:

$ npm run dev -- --port 4000

O -- simples é o que passa o resto da linha para o Vite em vez do npm guardar a flag para si.

Um caso se comporta diferente. Se um projeto define strictPort em vite.config.js, o Vite para em vez de contar para cima, e imprime Port 5173 is already in use. Aí você desliga o que está segurando a porta ou passa --port como acima.

JunoQuando a porta já está ocupada Vite não precisa de uma porta particular. Se 5173 está ocupada conta para cima até 5174, depois 5175, imprime aquela em que parou, e roda do mesmo jeito. Leia aquela URL impressa em vez de digitar localhost:5173 de memória, e recorra a npm run dev -- --port 4000 na rara ocasião em que você precisa de uma específica.

Por onde ir a partir daqui

O que você tem agora é um projeto npm normal, então qualquer coisa que você aprenda sobre ferramentas Node se aplica a ele diretamente. Se você quer em controle de versão, seu primeiro repositório guia pelo primeiro commit, e o .gitignore acima é a coisa a configurar antes de fazer.

Nada mais adiante no curso depende de nada disso. Se a cópia local der problemas, a versão do Scrimba ainda está lá e ainda funciona.