Good evening, I'm trying to work with Reactjs and ServiceWorker to create a PWA but when creating a new project everything seems to work fine but when running npm run build and dispatch the result with npm's http-server opens the application correctly but the browser never records that there is a service worker.
I have already dealt with 3 projects and different browsers but everything remains the same.
The projects are as they are installed with create-react-app.
Does anyone know why the service worker is not installed?
Attached image of how it is not registered by the browser even though it is in the build folder.
If I do this without using react as proof with a simple service worker file if I can register it but with reacrt I do not get it that way.
Thanks.
Does you import your SW in the App entry point module? Example:
// index.js:
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
Thanks partners. I was able to solve it by modifying in line src / index.js the line 1 that I had:
serviceWorker.unregister();
By: serviceWorker.register();
And now it works.
Regards!
Related
I have a react app with the following file structure:
When I run npm run build the app compiles everything using webpack and npm gives me the following output:
In the output (build folder), it creates an asset-manifest.json file, containing the newly created files:
{
"files": {
"main.css": "/static/css/main.607e5368.chunk.css",
"main.js": "/static/js/main.08012c8a.chunk.js",
"main.js.map": "/static/js/main.08012c8a.chunk.js.map",
"runtime~main.js": "/static/js/runtime~main.a8a9905a.js",
"runtime~main.js.map": "/static/js/runtime~main.a8a9905a.js.map",
"static/css/2.8643d4fb.chunk.css": "/static/css/2.8643d4fb.chunk.css",
"static/js/2.1aae919f.chunk.js": "/static/js/2.1aae919f.chunk.js",
"static/js/2.1aae919f.chunk.js.map": "/static/js/2.1aae919f.chunk.js.map",
"index.html": "/index.html",
"precache-manifest.ca81004b99ff7fc6f769d98332234f01.js": "/precache-manifest.ca81004b99ff7fc6f769d98332234f01.js",
"service-worker.js": "/service-worker.js",
"static/css/2.8643d4fb.chunk.css.map": "/static/css/2.8643d4fb.chunk.css.map",
"static/css/main.607e5368.chunk.css.map": "/static/css/main.607e5368.chunk.css.map",
"static/media/index.scss": "/static/media/slick.f97e3bbf.svg"
}
}
However, if I go into my browser the react app doesn't update and keeps using the old filenames. If I go to the network inspector I can see that the files are loaded with 200 OK (from ServiceWorker).
Why are the newly genrated files not being used in the new index.html?
I've tried clearing my cache, using a clean installation of the template, using another browser, using incognito mode,...
It is due to service worker. Unregister your service worker to show updated content
In your index.js or whatever is main file in react app
// import registerServiceWorker from './registerServiceWorker'; // comment this line
import { unregister } from './registerServiceWorker';
Comment registerServiceWorker()
// registerServiceWorker()
unregister();// add this
I want to get the location where the resource is located on the local PC when yarn start is started with create-react-app.
Where is the development server's document root in my PC?
look into public/index.html.
in that you will see below element.
<div id="root"></div>
then look for index.js file in your src folder.
you will see below line.
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
that means it is generating App component and attaching the dynamically generated html to div id "root"
Is it mandatory to run create-react-app command to create app every time?
I don't want to fire create-react-app command which provides some react module files that help to run react application.
So can you guys help me to understand, is it mandatory to every time run this command.
import React from 'react';
const App = {
return (
<div id="root">
<p>Hello this is first react application</p>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
create-react-app (cra) is used to bootstrap a new react app fast.
You can use react without using it, you can run react with only react+react-dom CDN as you already wrote in your code example.
Or you can also bootstrap it yourself if you know a little webpack, you just need the react-jsx babel preset to convert JSX syntax to React.createElement calls.
You can run it once and make a local copy to just copy over every time.
You also can build an app from scratch although that will take longer.
The majority of the 5+ minutes is downloading required dependencies for the app.
NOTE: This is not good practice as it results in never getting newer updated dependencies in your app, and you literally just keep using the old one.
If you are just making a bunch of apps to test, then that’s fine. If you are instead making a bunch of apps for production purposes, remember that part of maintenance is updating dependencies regularly as security updates are released.
I've just cloned a repo from github, and started the server and able to see the default text showing at http://localhost:8080
The default text is showing inside src/components/app.js. And making any changes to the text, simply switch back to browser and reload the webpage to see the changes.
Now I try to create the src folder from scratch, so I've deleted src and recreated it and added a file index.js, without any content. (My web server is still running all this while)
So my question is, when I reload the webpage, I was expecting no content to be showing in the webpage. But truth is I can still see the previous changes showing on webpage. It seems to be cached or something? In order to reflect the latest changes, I have to kill the webserver and npm start again.
This is my first timer in Web Development so wondering if it's a common scenario and best practices to restart webserver everytime we make any changes?
Usually when developing with react you don't even have to refresh the page you are in. Once you save the changes in the Editor they sould be visible in the browser immediately. Maybe you have made a mistake by setting up the index.js
When starting with react I would suggest you to use https://github.com/facebook/create-react-app
With that it's very easy to start and you can play around a bit and get started with React.
You should use Hot Module Replacement.
Here is an example:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
if (module.hot) {
module.hot.accept();
}
Hot Module Replacement (HMR) is a tool to reload your application in the browser, so that the
browser doesn’t perform a page refresh.
BTW #Zander is right, you don't have to kill the server. The page automatically refreshes. For your help, I hope you installed create-react-app using npm as
npm install -g create-react-app and to initiate a new app as create-react-app yourApp. If done so, everything basic is automatically configured.
I'm trying to make a react project on github pages using [username].github.io. but when I go on the link, it just returns a white screen without any error messages. This also happens when I use a custom domain name.
However, it works when I run it locally and also when I use gh-pages instead of a user repo.
I used https://medium.freecodecamp.org/surge-vs-github-pages-deploying-a-create-react-app-project-c0ecbf317089 to upload all my files into github since I created the repo at the end after I finished, but I tweaked it a little to work without gh-pages.
I also referred to this answer: hosting gh-pages on custom domain, white empty page but it didn't do anything for me.
Does anyone know how to fix this? Thanks!
Change BrowserRouter to HashRouter as follow
Before:
import { BrowserRouter } from "react-router-dom"
ReactDOM.render(
<BrowserRouter><App /></BrowserRouter>,
document.getElementById('root')
);
After:
import { HashRouter } from "react-router-dom"
ReactDOM.render(
<HashRouter><App /></HashRouter>,
document.getElementById('root')
);
Check if you're getting an error on the console. You might need to switch from BroswerRouter to HashRouter, because gh-pages doesn't work well with the former.
I am a bit late to this discussion, but I ran into this same issue and I found a solution that was not listed here.
Here is the solution I found: https://github.com/gitname/react-gh-pages/issues/3#issuecomment-399787987
The issue this user was having was related to how GitHub serves your react build from GitHub Pages. GitHub pages serves your react build from a folder names after your repository directory instead of from the root server directory "/". Hopefully this link will help someone else out in the future.
Using react router in my create-react-app i had this same issue. What solved it for me was adding this line to the router.
<Router basename={process.env.PUBLIC_URL}>