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

Teste Unitário - Node

Neste espaço vamos fazer um teste unitário usando Jasmine.

Jasmine é uma estructura de teste de código aberto para JavaScript. Para mais informação de Jasmine aqui o link da documentação https://jasmine.github.io/

Eu me acostumei a ter em uma pasta todos os projetos para deixar eles mais organizados. Mas fica a seu critério, se cria o projeto na área de trabalho em documento, cria onde sinta-se mais cômodo.

No meu computador eu criei uma pasta chamada project, e aí vou criando meu projetos.

Vamos passo a passo a criar um projeto usando node e faremos um teste usando Jasmine.

Bora lá

Passo 1: Abrir GitBash

Passo 2: Abrir o diretório.

O diretório deve estar criado, em caso de não ter uma pasta para armazenar seus projetos, pode criar usando o comando mkdir e o nome de sua preferência. Eu vou usar project.

mkdir project e pressione enter no teclado.

E usaremos o comando cd para entrar nela

cd project e pressione enter.

Ao pressionar enter, o directório vai modificar.

Pronto já estamos no diretório desejado.

Passo 3: Criar o projeto.

Usamos o comando mkdir mais um nome.

mkdir testesNode e pressione enter

Agora vamos a listar o diretório usando o comando ls, para visualizar-o

ls e pressione enter

Passo 4: Abrir o projecto

cd testesNode e pressione enter

Ao pressionar enter, o directório vai modificar

Passo 5: Abrir o editor de texto

code . e pressione enter

Usaremos o Visual Studio  Code (VS Code)

Já aberto vamos para o seguinte passo.

Passo 6: Abrir o terminal interno de VS Code

Clicar em barra de menú terminal

Clicar em novo terminal

Ou usar a combinação de teclas de acesso rápido (Control + Shift + ' )

Abrirá um terminal integrado em nossa janela de VS Code

Clica na setinha

Selecionamos Git Bash para trabalhar 

Passo 7: Inicializar node

npm init -y e pressionamos enter

Este comando vai criar um arquivo package.json

Neste arquivo vamos a mexer depois na seção de test.

Passo 8: Criar um arquivo JavaScript (JS)

touch main.js e pressionamos enter

Faça assim por linhas de comando  ou pela interface gráfica do programa

Clicar en nuevo arquivo

E escreva o nome do arquivo

main.js e pressione enter

Criarmos uma classe no arquivo JS, o código pode pegar deste link

Passo 9:  Instalar Yasmine

No terminal escrevemos o comando:

npm i jasmine -D e pressionar enter

A flag -D  instala como dependência de desenvolvimento.

Passo 10:  Inicializar Yasmine

npx jasmine init e pressionar enter

Este comando vai criar a parte do spec, onde se vão a conter os teste.

Passo 11:  Criar um arquivo spec.js

main.spec.js e pressione enter

Neste arquivo vamos a criar os teste unitários