I tried hosting my page with firebase so I can make use of the authentication product, but after I hosted it, the page didn't open on my local server anymore.
NB: I created a react app
I followed the normal procedure for firebase hosting and I expected to get a link where my webpage was hosted, but stil be able to run it on my local server. Instead, when I ran npm start, my browser showed the following window:
Note that hosting it is a part of my building simce I needed to use the authentication product.
Then, I tried removing everything firebase related yo start afresh, even uninstalling firebase, but I got the same thing.
Next, I tried creating another project and pasting everything in my app.js and index.css there, so I can start afresh, and, the styles worked since the background colour of the webpage changed, but, no content was shown. The page was blank as shown below
Related
I have created a basic react login application using an external API from the following docuumentation : https://javascript.plainenglish.io/basic-react-login-using-external-api-e33322e480cd
So, I have made few changes in the code for routing part and it was working fine in the localhost.
Later I have created a build file for the react application and hosted it on the server.
After hosting I encountered the page showing blank so when I looked for a solution I came across this How to fix the white screen after build with create-react-app?
and it says to overcome we have to add "homepage":".", in package.json file
so I have added it in the package.json and created a build file.
On hosting that build file I was able to successfully see the homepage, but later what the problem is I'm unable either refresh the page or login to the page using the credentials. When I perform either of those actions the page shows the error not found message.
Can anyone tell me what the problem I'm facing and any mistake in my application or it might be the problem on the server side.
What is the reason that making me not able to stay on page when refreshing and also why the page doesn't redirect to other page on entering the credentials.
The hosted application is this : https://www.bizwy.in/signin
My github repo of the project is this : https://github.com/BhupathiVenkataSaiCharan/auth-app
Let me know if you need something to exactly understand my problem. And guide me through the problem and help me solve it.
I have create-react-app app that uses its stock service worker to cache files.
I want the app to be a downloadable PWA but whenever I update (with heroku & node expressjs..) the users downloaded app never updates.. Even when I refresh (drag down from top).
Have I missed some configuration in the docs to enable the auto update when its a PWA?
or
What is something I can do to either force refresh when updated. (I have read that's bad UI but I'm fine with that)
Notes:
It works as expected when viewing from a browser on a PC. (updates when tabs are all closed)
I found the solution.
The problem wasn't refreshing the app. I had to permanently close it. by swiping up from the multitask view.
Leaving this here in case anyone else didn't realize
I finished developing a professional portfolio website for myself (since I will be graduating this May). Everything looked great when I was using the development server. However, after I tried to deploy it to GitHub Pages, only a blank screen shows. The site should be reachable at https://shaynajrosado.github.io/Portfolio.
After getting frustrated, I tried seeing whether hosting it on Firebase would make a difference.
Click here to see Firebase-Hosted Project
Still, nothing shows up.
This links to a picture of the error message I get when I right-click on the blank page & Inspect
After clicking the error message, it takes me to the React website which translates the error message into: "e(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null."
However, in my code, there really aren't any return statements missing. Below is a link to the project repository:
https://github.com/shaynajrosado/Portfolio/tree/gh-pages
I currently have the project set to use branch gh-pages as the source.
Any words of advice would be very greatly appreciated as I continue to wrestle with this!
Hello Guys !
Today I deployed an app online to test it but didn't understood very well why it didn't work.
What I did :
I've created a sample react app using bootstrap and used firebase to deploy it. Here is the link.
What was expected ?
I wanted the app to be able to be downloaded on the phone as angular.io is.
Reality :
Nothing special. It's in fact registered in service worker and very fast to load and download, but nothing more.
Problem now :
I've done it today two times but wasn't able to use it as well as the image of service workers I had.
What should I do ?
You need a a 144px square PNG icon to be defined in your manifest.json to enable the web app install banner.
You can validate whether your application can be added to your homescreen from Chrome on a desktop computer.
To do so, open the Chrome developer tools on your website, open the 'Application' tab, click 'Manifest' in the left navigation and then click 'Add to homescreen'.
If there's a problem adding to homescreen an error will appear in the console, when trying it on the website you mentioned I received the error 'Site cannot be installed: a 144px square PNG icon is required, but no supplied icon meets this requirement'.
You can read more about the requirements for web app install banners here https://developers.google.com/web/fundamentals/app-install-banners/.
I use the angular-fullstack/generator-angular-fullstack for my project and for testing purpose I would like to run my project on two different browser windows.
The problem is that I got the same input for each text field on both browsers simultaneously.
For example:
On the login page, if I type my email address on one browser it will appear on the login email field in the other browser.
Any ideas of what I'm doing wrong?
Your project uses browserSync.
When your project is opened using localhost:3000, you should browse to localhost:3001 that will give you a BrowserSync configuration page.
Under Sync Options on that page you can disbable what to sync.