A Progressive Web App (PWA) can cache static assets, which allows an app to be rendered faster, and even allows it to operate offline!
We’ll start a new app with create-react-app
, and enable the service worker by registering it in index.js
. Then we’ll build and serve a production version of the app - and show that it can work offline by disabling the server and refreshing the tab.
Hello, I'm unable to serve -s build
to start localhost: 5000
Getting the below message:
/Users/sam/.rbenv/versions/2.4.4/lib/ruby/2.4.0/un.rb:63:in `block in setup': invalid option: -s (OptionParser::InvalidOption)
I tried uninstalling .rbenv all together but I couldn't get my head around this. Please advice.
Ah - it looks like you have a ruby command also called "serve", which is conflicting with the npm serve command. There are two things you could do:
Install serve globally with: "yarn global add serve". However! this would mean you can't use the ruby serve command - so this may not be what you want.
Install server locally to the project with "yarn add --dev serve". Then, to start the server, you can run: "./node_modules/serve/bin/serve.js -s build"
Option #2 may be better for your situation, so that you don't conflict with your existing ruby command.
thank you so much! It solved the problem beautifully. Now I can go on and finish this course :D
Great! Glad it helped.
Hi, I am trying to follow your course but got stuck at express server setup. Do you have an instruction? Thanks.(Also my system doesn't have nodemon.)
Sure, follow these instructions to get it working:
I was using nodemon because I was doing development on the server, and nodemon will automatically restart the server whenever you change the server.js file - but to just run the server, you don't need nodemon, you can use node directly.
Hope that helps!
I had problems running serve -s build
. It may have been related to https://github.com/zeit/serve/issues/382. Anyhow adding serve as dev dependency and putting "serve": "node .\\node_modules\\serve\\bin\\serve.js -s build"
into "scripts" in packages.json on my Windows machine fixed it.
In the transcript there is a typo, the code snippet mentions index.js but it should be App.js
I'm wrestling with the setup and though I have the app running and server -s build
working, it fails to find items.json
which I'm not seeing in either of the two repos mentioned here:
https://github.com/eggheadio-projects/progressive-web-apps-in-react-with-create-react-app/tree/master/lessons/02-create-a-progressive-web-app-with-react-and-register-a-service-worker
or
https://github.com/nanohop/todo-pwa/tree/register-service-worker
@Stephen - the items.json are served by the server.js file located here: https://github.com/nanohop/todo-pwa/tree/master/server
(It's not a static file that gets served - it's dynamic from the express app there). Let me know if you have trouble with that!
Regarding the serve -s build
not working, what I did was add the following to scripts
of package.json
:
"serve": "serve -s build",`
And run it with yarn serve
.