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.
Related
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
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.
I'm implementing an application using the full MEAN stack.
I created a login page to signup with facebook to be able to show a profile page. But I discovered some problems. For this reason, I created a smaller version of my webapp, maintaining the same project structure.
The complete code, executable (only replacing "client id" and "secret") with "npm install" and after "nodemon" is available here: https://github.com/Ks89/MEAN-OAuth_Example
If I'll call (with a browser) the rest API that I created to login with facebook at "http://localhost:3000/api/auth/facebook", everything will be ok!
But if I'll want to do the same thing, clicking on the "Login" button, I'll receive the error as in figure:
I know that the problem is related to CORS, but how can I'll fix this in my application, maintaining the same project structure?
I don't want to put the "rest path" inside the HTML. I tried for many days different solutions without success.
If you want, experiment directly on my application that I created exactly to write this question ;).
If really necessary, I'll able to post the entire source code here, but I prefer an organized and executable code into a repository for this particular question.
Please, give me some ideas and hopefully a solution, because I'm really blocked.
The example routes from the passport-facebook repo are intended for multipage apps, not ajax requests. If you look at what those routes are doing, /auth/facebook is just a redirect to Facebook where the user is expected to log in if necessary and authorize your application. When you make that same request from angular, it follows the redirect and tries to load the Facebook page, but the browser blocks you as your console screenshot shows. CORS would be relevant if Facebook wanted to allow you to request their login form across origins, but they don't because that would basically make you a phisher.
It looks like you're trying to handle authentication without leaving the page, but at some point you're going to need the user to leave your site and be redirected to Facebook in order to complete the OAuth flow. You can either open a pop-up containing the Facebook OAuth dialog (it looks like this is what the Facebook JavaScript SDK does by default) or just use your app's current tab with something as simple as <a ng-href="{{facebookOauthUrl}}">Log in with Facebook</a>.