3
respostas

Não inicializa o projeto

Referente ao curso React: obtendo dados com React Query, no capítulo Evoluindo o Alura Books e atividade Preparando o ambiente

por Herlon Neri Hostins
| 65.4k xp | 72 posts

fiz o teste para api e deu ok, mas para o npm start e para nos gets

https://github.com/einnovationline/AluraBook

PS D:\Desenvolvimento\projetos\react\AluraBook> npm run start-auth

> json-server-api@1.0.0 start-auth
> node server.js

API disponível em http://localhost:8000
Deseja finalizar o arquivo em lotes (S/N)? s
PS D:\Desenvolvimento\projetos\react\AluraBook> 
 *  History restored 

> json-server-api@1.0.0 start-auth
> node server.js

API disponível em http://localhost:8000
Deseja finalizar o arquivo em lotes (S/N)?
Deseja finalizar o arquivo em lotes (S/N)? s
PS D:\Desenvolvimento\projetos\react\AluraBook> npm start

> json-server-api@1.0.0 start
> json-server --watch ./database.json


  \{^_^}/ hi!

  Loading ./database.json
  Done

  Resources
  http://localhost:3000/posts
  http://localhost:3000/comments
  http://localhost:3000/profile

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database
  Watching...

GET /posts 200 20.079 ms - 77
GET /comments 200 30.750 ms - 68
GET /profile 200 16.512 ms - 24
GET /%PUBLIC_URL%/manifest.json 404 2.753 ms - 2
GET /%PUBLIC_URL%/favicon.ico 404 7.484 ms - 2

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

3 respostas
por RODRIGO SILVA HARDER
| 2312.7k xp | 4888 posts

Oi, Herlon, tudo bem?

O erro que aparece no console do navegador está relacionado à tentativa de acessar um arquivo "manifest.json" que não foi encontrado no diretório esperado. Esse problema ocorre quando a aplicação está configurada para usar %PUBLIC_URL% como parte do caminho, mas o servidor JSON não está tratando corretamente essa variável. Uma solução seria remover o %PUBLIC_URL% do código que faz o link com o "manifest.json" no arquivo "index.html" localizado na pasta "public".

Imagem do arquivo index.html mostrando os locais onde deve ser removido o %PUBLIC_URL%

Ao remover o %PUBLIC_URL% , o código ficará assim:

<head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="/logo192.png" />
    <link rel="manifest" href="/manifest.json" />
    <title>React App</title>
</head>

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Herlon Neri Hostins
| 65.4k xp | 72 posts

boa tarde, obrigado

fiz mas não está subindo, cliquei no http://localhost:3000/ pra abrir e não tem nada no console pra indicar erro e não abriu automaticamente.

PS D:\Desenvolvimento\projetos\react\AluraBook> npm start

json-server-api@1.0.0 start json-server --watch ./database.json

{^_^}/ hi!

Loading ./database.json Done

Resources http://localhost:3000/posts http://localhost:3000/comments http://localhost:3000/profile

Home http://localhost:3000

Type s + enter at any time to create a snapshot of the database Watching...

s Saved snapshot to db-1711136327887.json

depois disso nada

por RODRIGO SILVA HARDER
| 2312.7k xp | 4888 posts

Oi, Herlon,

Desculpe a demora em te responder!

O problema para não iniciar a aplicação acontece, pois no arquivo "package.json" que está localizado na raiz do projeto, tem o comando npm start configurado para abrir o json-server especificamente o arquivo "database.json".

Para ser possível abrir o projeto, é necessário instalar o pacote "react-scripts" e alterar a configuração do arquivo "package.json".

Para instalar o pacote "react-scripts" use o seguinte comando no terminal:

npm install react-scripts --save-dev

Além disso, altere o arquivo "package.json" com o seguinte codigo:

{
  "name": "json-server-api",
  "version": "1.0.0",
  "description": "Simple Fake API",
  "main": "main.js",
  "scripts": {
    "start": "react-scripts start",
    "start-auth": "node server.js"
  },
  "author": "ME:)",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "json-server": "^0.16.3",
    "jsonwebtoken": "^8.1.0",
    "react-scripts": "latest"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Após essas alterações, será necessário abrir duas guias de terminal para rodar tanto o back-end, quanto o front-end.

Para abrir o back-end, use o comando:

json-server --watch database.json --port 8000

E para abrir o projeto front-end, use o comando:

npm start

Contudo, recomendo que sejam criadas duas pastas, assim como no curso, uma contendo os arquivos de back-end e outra com os arquivos referentes ao front-end, dessa forma, cada pasta terá suas próprias responsabilidades, evitando problemas de falta de configurações necessárias e mistura de arquivos.

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!