Como posso mudar a porta do local host | server port | Erro na porta http://localhost:3000/

Como posso mudar a porta do local host

 Em caso de executar seu programa criando com "Vite "

E ele acusa um erro

Error "Cannot Get"  na porta 3000

http://localhost:3000/

Ao executar o programa com o comando npm run dev

É porque ele não consegue chegar até a porta solicitada, uma das causas é porque a porta está sendo usada por outro programa que está sendo executado na mesma porta.

Uma solução seria parar ou fechar o programa anterior com  CTRL + C

Ou também você pode deixar ele rodando e abrir este novo em uma outra porta.

Agora bem, a continuação vamos a seguir passo a passo como trocar ou mudar a porta do servidor (localhost).

Passo 1:

Clique no arquivo vite.config.js

Passo 2:

Vamos até a função defineConfig() E agregue código

server: {
port: 3001,
}

Este código é para trocar a porta que vite esta tentando abrir por defeito

http://localhost:3000/

E com este código estamos definindo que para este projecto vamos a usar a porta

http://localhost:3001/

Passo 3:

CTRL + S para guardar

Automaticamente ele reataurara o servidor

Passo 4: 

Clique no terminal

CTRL + C para parar execução da aplicação

Passo 5:

Digite no terminal o comando

npm run dev

pressionar ENTER no teclado

Ao executar ele vai apresentar a rota http://localhost:3001/

Passo 6: 

Pressione CTRL + CLICK

no link para ir até a porta

Passo 7:

Automáticamente será aberta uma janela com seu projeto rodando na nova porta  3001

http://localhost:3001/

Assim como colocamos a porta 3001, pode usar qualquer número

por exemplo pode também modificar para a porta

http://localhost:5173/

Só é colocar 5173 em lugar de 3001 no passo 2

Aqui deixo a documentação para mais informação -- https://vitejs.dev/config/server-options.html

DevRel  💜  Nadi Duno  ©Janeiro/ 2023

Usando Prisma ORM

 O Prisma nasceu no ecossistema JavaScript com a promessa de ser uma ferramenta facilitadora e produtiva para devs que trabalham diretamente com databases. Por uma série de razões, a tecnologia chegou a ser reconhecida como “uma das melhores coisas que já aconteceu” na programação backend entre usuários de Node.js.

Prisma é uma ferramenta open source, um ORM de próxima geração cuja arquitetura é desenhada em três camadas fundamentais:

• Prisma Client: um construtor de queries gerado automaticamente e type-safe para Node.js e TypeScript
• Prisma Migrate: sistema de migração;
• Prisma Studio: o produto principal da tecnologia. Trata-se de uma interface do usuário feita para visualizar e editar os dados na database;

Na descrição oficial da ferramenta, Prisma é descrito como um novo tipo de ORM, fundamentalmente diferente dos modelos tradicionais que eram aplicados anteriormente. Uma alternativa para outras ORMs, como TypeORM e Sequelize.

Nestas imagens aqui postada está o resultado do que com prisma estamos construindo junto à Rocketseat na primeira edição do NLW (janeiro 2023). Um modelo de entidade relacional que permite relacionar os hábitos com os dias nos quais eles serão registrados.

Aqui pode acessar ao repositório de uma aplicação que ao final emular o painel do GitHUb --> https://github.com/nadiduno/habit-project

Link da documentação oficial do prisma --> https://www.prisma.io/

Link da dependência para implementar no projeto com npm e gere o modelo de entidad --> https://www.npmjs.com/package/prisma-erd-generator

DevRel Nadi Duno - 01/2023

Desenvolvedor Web 

Pseudo-Class nth-child selector de CSS

Pseudo classe nth-child --> nth-child(odd)| nth-child(even)| nth-child(n)

Um pequeno exemplo bem colorido da implementação do selector de CSS nth-child. Aplicando a cor rosada para todos os filhos do p (parágrafo) que sejam ímpares e a cor cinza para todos os filhos do p que sejam pares.

A implementação está no argumento que recebe a função nth-child(), assim como usei odd e even também podem colocar um número qualquer e aplicar a estilização que deseje. 😉

nth-child(n) sendo n um número inteiro positivo.

Para profundizar aqui a documentação https://developer.mozilla.org/pt-BR/docs/Web/CSS/:nth-child

DevRel Nadi Duno