Progressive Web Apps: construa aplicações progressivas com React

Livros
1

Olá,
Por favor, preciso de uma ajuda para correr o servidor. Digitei o seguinte comando no cmd como está no livro na pagina 115 e recebo o seguinte erro:

C:diretorio\front-end>node_modules/webpack-dev-server/bin/webpack-dev-server.js
‘node_modules’ is not recognized as an internal or external command,
operable program or batch file.

Obrigado

2

Bom dia amigo!

Seguinte, isso está ocorrendo porque o comando no Windows é ligeiramente diferente:

node_modules\.bin\webpack-dev-server

Até coloquei uma errata sobre isso.
Há outros probleminhas que você pode se deparar. Vou resumi-los a seguir:

Comandos no Windows:

node_modules\.bin\webpack-dev-server
node_modules\.bin\webpack

Configuração final do package.json:

// ...
"scripts": {
    "start": "set NODE_ENV=development && node_modules\\.bin\\webpack-dev-server",
    "build": "set NODE_ENV=production && node_modules\\.bin\\webpack"
},
// ...

Muito obrigado pela leitura!
Abraços.

3

Olá,
Executei o comando mas continuo com um erro que não estou conseguindo resolver. Será k podia me ajudar mais uma vez, por favor!
O output é:

//
C:\Users\Alexander\Documents\Projeto-DAAM\app\front-end>node_modules.bin\webpack-dev-server
i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from ./dist
× ｢wdm｣: Hash: ba2acd69b9b52c4042d0
Version: webpack 4.6.0
Time: 2340ms
Built at: 2018-04-24 17:46:49
1 asset
Entrypoint main = bundle.js
[154] ./node_modules/react-dom/index.js 59 bytes {0} [built]
[170] ./node_modules/react/react.js 56 bytes {0} [built]
[171] ./src/index.jsx 453 bytes {0} [built]
[173] (webpack)/hot/emitter.js 77 bytes {0} [built]
[175] (webpack)/hot sync nonrecursive ^./log$ 170 bytes {0} [built]
[178] ./node_modules/html-entities/index.js 231 bytes {0} [built]
[179] ./node_modules/ansi-html/index.js 4.16 KiB {0} [built]
[180] (webpack)-dev-server/client/overlay.js 3.58 KiB {0} [built]
[182] (webpack)-dev-server/client/socket.js 1.05 KiB {0} [built]
[183] ./node_modules/loglevel/lib/loglevel.js 7.68 KiB {0} [built]
[185] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
[188] ./node_modules/querystring-es3/index.js 127 bytes {0} [built]
[192] ./node_modules/url/url.js 22.8 KiB {0} [built]
[193] (webpack)-dev-server/client?http://localhost:8080 7.75 KiB {0} [built]
[194] multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.jsx 40 bytes {0} [built]
+ 180 hidden modules

WARNING in configuration
The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment.
You can also set it to ‘none’ to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

ERROR in ./src/index.jsx
Module not found: Error: Can’t resolve ‘file-loader’ in ‘C:\Users\Alexander\Documents\Projeto-DAAM\app\front-end’
@ ./src/index.jsx 11:0-28
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.jsx
Child html-webpack-plugin for “index.html”:
1 asset
Entrypoint undefined = index.html
[0] (webpack)/buildin/module.js 497 bytes {0} [built]
[1] (webpack)/buildin/global.js 489 bytes {0} [built]
[2] ./node_modules/lodash/lodash.js 527 KiB {0} [built]
[3] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 432 bytes {0} [built]
i ｢wdm｣: Failed to compile.

//

4

Alexander, boa tarde.
Pelo que vi no log, me parece um problema no plugin file-loader do webpack. Caso você já tenha instalado, sugiro removê-lo com npm uninstall file-loader e usar exatamente a versão apontada no capítulo 3 do livro. Outra alternativa é seguir o tutorial de instalação/configuração do plugin no link abaixo.

Esses problemas de compatibilidade entre os plugins do webpack é bastante comum, principalmente quando há mudanças na major version, como é o caso do Webpack 3, que foi publicado há alguns meses. Alguns plugins não acompanham a alteração de versão e acabam quebrando com frequência.

Espero ter ajudado :slight_smile:

5

Olá Guilherme,
Copiei o seu código package.json que se encontra no git hub e colei no meu. Em seguida fiz delete da pasta node_modules e corri o comando npm install dentro da pasta front-end e já funcionou. Porém fiz uma pequena modificação a configuração do package.json como você tinha sugerido na resposta anterior para Windows.

Obrigado mais uma vez!

6

Perfeito então. Qq coisa pergunte ai.
Mais uma vez, obrigado pela leitura!
Abç

7

Olá Guillerme,

Mais uma vez venho recorrer a sua ajuda porque o meu ficheiro bundle.js maior do que esperado.
Baixei a configuração do ficheiro webpack.config.js que é recomendado no livro na página 142, porém quando corro o comando npm run build, tudo funciona normal mas constatei que o meu ficheiro bundle.js não está com o tamanho desejado. E abri o ficheiro bundle.js e constatei que a minificação não funcionou.

img/favicon.ico 17 kB [emitted]
bundle.js 748 kB 0 [emitted] [big] main
style.css 16.5 kB 0 [emitted] main
index.html 311 bytes [emitted]

Poderia me dar uma dica por favor???

8

Boa noite Alexander.
Desculpe a demora.

Seguinte, penso em algumas sugestões que talvez lhe ajudem:

  • Recentemente houve uma atualização do uglify que está dando erro quando relacionado ao webpack. Isso inclusive afetou outros frameworks, como é o caso da v5 do Angular. Isso pode estar acontecendo com você se você instalou uma versão diferente do uglify sugerido pelo livro. Se for o caso, sugiro reinstalá-lo.
  • Outra situação mais provável é que o webpack, por algum motivo, talvez não esteja pegando sua variável de ambiente apontando para produção. Para descartar essa hipótese, sugiro retirar a condição que existe na configuração do webpack e sempre deixar ele minificando. Se isso resolver, verifique a passagem correta da variável de ambiente nos scripts do package.json.

Tente essas duas sugestões e depois post aqui por gentileza se você teve ou não êxito.
Abraços

9

Boa tarde,
Cheguei ao fim do seu livro mas fiquei com a sensação de que a app faz o registro do nome do utilizador.
E as partes restantes da App como segue no seu link, as gentilezas e tudo isso? https://behappywith.me/

10

Boa tarde Alexander.
Então, o escopo do livro fica restrito a essa tela mesmo. Na verdade as demais telas não possuem nada de diferente do que utilizamos (com exceção do CSS e um ou outro componente de menor importância). Digo, basicamente para construi-las, caso você queira, seria replicar o que foi tratado até o capítulo 7.

De qualquer forma, no Git do projeto há um branch chamado “master_pt-BR”, cujo link direto é: https://github.com/lgapontes/behappywith.me/tree/master_pt-BR

Neste branch você encontrará o projeto completo, exatamente como está publicado no endereço https://behappywith.me/

Espero ter ajudado.
Abraços

11

Olá, Guilherme! Estou estudando o seu livro: PWA e encontrei um problema que até agora não consigo sair, ele está na página 278 no método validar(). Alarece sempre um erro dizendo que “usuario.validarNome is not a function” como posso resolver esse problema?