JS na web: CRUD com JavaScript assíncrono : problema para rodar browser-sync | JavaScript

Após fuçar no Google , consegui subir o Doguito Petshop (só no Go Live) e sem erros no console !

1) Para levantar o json-server tem que ser npx json-server --watch db.json.

2) Eram algumas extensões do Google que causavam erros no console, basta desabilitar as extensões.

3) Se a pasta raiz é "admin" , o --startPath do browser-sync tem que ser "telas/lista_cliente.html"

Agora continuam as dúvidas :

1) Porque roda na Live Server e não no run/debug do VScode ou colocando "http://127.0.0.1:5500/telas/lista_cliente.html" direto no browser ?

2) Porque dentro do JS def. port 3000 para url do fetch => como http://localhost:3000/profile depois no browser-sync def. port 5000 => "browser-sync start --server --files . --host --port 5000 --startPath telas/lista_cliente.html" e qdo abro a page com o Live Server aparece port 5500 => "http://127.0.0.1:5500/telas/lista_cliente.html"

Seguindo uma resposta aqui do forum , consegui abrir só no Go Live , trazendo os dados ... mas no console do Dev Tools continua com erro

Insira aqui a descrição dessa imagem para ajudar na acessibilidade .

Dúvidas :

1) No Go Live tenho http://127.0.0.1:5500/telas/lista_cliente.html , porque 5500 e não 5000 (def. no --port) ?

2) Porque este url só funciona qdo abro pelo Go Live , pelo run/debug abre mas sem o cliente e se tento abrir direto pelo browser com http://127.0.0.1:5500/telas/lista_cliente.html , dá conexão recusada ! Este browser-sync está muito confuso !!!!

Após olhar várias respostas do mesmo tópico , consegui abrir a página Doguito Pet Shop , porém sem trazer os dados do cliente !

1) Se o "npm install -g browser-sync" for na pasta "admin" , o "browser-sync start --server --files . --host --port 5000 --startPath telas/lista_cliente.html" tem o --startPath def. uma pasta abaixo ! Assim abre a pagina , mas no DevTools traz erro :

Insira aqui a descrição dessa imagem para ajudar na acessibilidade Olá , estou na trilha em ref. , em 02 Fetch API item 04-Refatorando responsabilidades , é solicitado que se execute no Terminal do VScode :

1) npm install -g browser-sync

2) browser-sync start --server --file . --host --port 5000 --startPath admin/telas/lista_cliente.html

Após execução item 2) abre tab do browser com texto "cannot GET admin/telas/lista_cliente.html"

Aqui no forum sobre este tema , tem uma resposta que diz para executar: "browser-sync start --server --files . --host --port 5000 --startPath admin/telas/lista_cliente.html" (troca --file por --files) Então desinstalei : npm uninstall -g browser-sync , instalei novamente e rodei o comando c/ ..--files.. e continua o mesmo problema !

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Olá @Hu Chia Fo, tudo bem?

Parabéns por ter conseguido subir o Doguito Petshop sem erros no console! Vamos tentar responder suas dúvidas:

Parece que você está enfrentando algumas dificuldades com a configuração do seu ambiente de desenvolvimento. Vou tentar ajudar a esclarecer suas dúvidas e resolver os problemas que você está enfrentando.

Antes de prosseguir, é importante mencionar que o Live Server, o json-server e o browser-sync são ferramentas diferentes que podem ser usadas para diferentes propósitos durante o desenvolvimento web. Vou tentar responder suas perguntas com base nas informações fornecidas.

Dúvidas:

1) Por que o código roda no Live Server, mas não no run/debug do VScode ou ao acessar "http://127.0.0.1:5500/telas/lista_cliente.html" diretamente no navegador?

A diferença pode estar relacionada ao servidor que está sendo usado para servir os arquivos da sua aplicação. O Live Server usa um servidor embutido, enquanto o run/debug do VScode depende da configuração do servidor especificada no seu código. Certifique-se de que o servidor esteja configurado corretamente e em execução.

Ao acessar diretamente "http://127.0.0.1:5500/telas/lista_cliente.html" no navegador, verifique se o servidor está sendo iniciado corretamente e se a porta 5500 está sendo usada pelo servidor. Se houver um conflito de porta, o servidor não conseguirá responder às solicitações.

2) Por que há diferentes portas (3000, 5000, 5500) especificadas em diferentes partes do seu código?

As portas especificadas são usadas por diferentes ferramentas/servidores. O json-server geralmente roda na porta 3000, o browser-sync na porta 5000 e o Live Server na porta 5500. Essas portas podem ser configuradas de acordo com suas preferências ou necessidades.

Certifique-se de que as portas estejam configuradas corretamente e que não haja conflitos entre os servidores em execução. Caso contrário, pode ocorrer um erro de conexão recusada ao tentar acessar o aplicativo.

3) Por que ocorre um erro no console do Dev Tools ao usar o Go Live?

O erro exibido no console do Dev Tools pode estar relacionado a problemas de configuração do seu código ou a erros na lógica da aplicação. É difícil determinar a causa exata do erro sem mais detalhes sobre o código e a implementação.

Recomendo verificar o console em busca de mensagens de erro específicas e depurar o código para identificar a origem do problema. Verifique também se todas as dependências e arquivos necessários foram incluídos corretamente.

4) Por que o URL "http://127.0.0.1:5500/telas/lista_cliente.html" só funciona no Go Live?

O URL "http://127.0.0.1:5500/telas/lista_cliente.html" é específico para o Live Server. Essa é a URL padrão usada pelo Live Server para servir seus arquivos. Se você estiver usando outras ferramentas, como o browser-sync, pode ser necessário usar URLs diferentes.

Certifique-se de configurar corretamente as ferramentas que você está usando e ajustar as URLs de acordo com a porta e o caminho corretos para os seus arquivos.

5) Por que ocorre um erro ao abrir a página pelo browser-sync com o caminho "--startPath admin/telas/lista_cliente.html"?

O erro "cannot GET admin/telas/lista_cliente.html" geralmente ocorre quando o servidor não consegue encontrar o arquivo especificado no caminho fornecido. Verifique se o caminho para o arquivo "lista_cliente.html" está correto em relação à pasta raiz do servidor.

Certifique-se de que o servidor esteja apontando para o diretório correto e de que o arquivo "lista_cliente.html" esteja presente nesse diretório.

Recomendo revisar suas configurações e verificar se todos os caminhos e arquivos estão corretamente especificados.

Espero que essas respostas tenham sido úteis para esclarecer suas dúvidas. Se você puder fornecer mais informações ou detalhes sobre o seu código e configuração, poderei oferecer mais assistência para resolver os problemas que você está enfrentando.

Abraços e bons estudos.