GSI_Logger Given origin is not allowed in Electron + React application - reactjs

Being kinda new to React and everything clientside related, I am trying to build a Electron application with React.
At this point I can't tell if that's a good idea, but I wanted to try it.
Currently it works fine (see Github).
However I now wanted to add #react-oauth/google to give users the option to sign into their Google Account to allow the application to access their google drive and I'm struggling with that.
See the testing_auth_2 branch for that.
I enabled the drive-api in GCP and created credentials for a web application, adding http://localhost and http://localhost:3000 as authorised Javascript origins.
Now it works, but only when I start it as a webpage (npm start in my Github)
Starting it as an electron app failes, probably because electron doesnt run under localhost somehow (npm run electron:dev in my github code).
I tried creating Desktop and ios credentials since those dont ned authorised origins but the error persists.
Steps to recreate:
Enable drive api and create credentials in GCP
clone git#github.com:Urr4/electron-archive.git
checkout testing_auth_2 branch
Replace XXX in index.tsx with the client_id
The Google login should work using npm start, but not using npm run electron:dev
Any help is appreciated

Related

close all network request in chrome devtool

I created a React and Spring boot project (not mvc). I build the React part by using "npm run build" and added the ssl certificate. This project is running inside windows server. But when I make request to backend I can see all the request in dev tools and it is big issue for safety. also when user make request to login it is appeared in chrome devtools username and password. How can I hide them.
Thanks

ReactPress Manual Mode: Wordpress needs access to npm

I am trying to host a pre-existing react website on 101domains.com using wordpress and reactpress, but I am currently stuck in Manual Mode for reactpress. I have uploaded my build folder to wordpress, but I cannot start the server to host the react app. Here is the error:
Currently you are in Manual Mode, (this means, you can create React apps only in your command line) because:
Your WordPress installation needs access to "npm 6" or higher to create React apps from the admin interface. However you can go to the app directory and use create-react-app from there.
I am trying to figure out how to give WordPress access to npm, but I am new to WP, so I am quite lost. Any advice would be nice!
To use ReactPress with an existing create-react-app. You need to build it with ReactPress on a local WordPress system. I recommend localWP.
Install ReactPress there, copy your whole create-react-app into the apps directory, add a page slug from the WP admin and update the dev environment.
Then build your React app from the command line. Now you can push that build to your live website. There you must choose the identical page slug for your React app. Then it should show under your chosen page slug.

react hosted on S3 having trouble using env files for Auth0 values

This is more of a lack of understanding on my part but I cannot seem to debug this.
I have a react app that I use Auth0 for some authentication stuff.
I recently moved my site on production from using a docket container to running from S3. I thought this was working but its clearly not today it times out when I click login
Request URL: https://undefined/authorize?
This just times out
It works from local host and no longer says undefined it has my auth0 domain
In my react app I store that Auth0 Domain value in a .env file. I am assuming my issue is that react in my S3 bucket does not have my .env file because gitignore. I thought maybe at build that was somehow pulled into a build file ? So when I do npm run build does it do anything with that .env?
How do I use my .env with react running in S3
This assumes that is what my issue is it seems to be.
I had multiple issues going.
Cloudfront was caching my site so as I was debugging I was not viewing my latest code. I had to invalidate cloudfront cache after each push.
I added my Auth0 secrets into github action secret and then used them with an env: section in my github action. That allowed me to use environment variables when github action performed the build.
All works now I was just tangled up for a short time.

React router direct links not working on Azure Web App Linux

I've developed an PoC about PWA (Progressive Web Apps) using ReactJs to show how to use camera, geolocation, microphone, light sensors and etc from Browser API.
I've created a route for each feature in this web app and everything works fine in localhost. But when I deploy the npm build version of my react app on Azure Wep App Linux service it don't work properly. I can access the main page (index.html) and from there I can navigate to any other page, but when I try access any route direct form its url I receive an 404 error. Except from index page all urls don't work when refreshing or writing manually.
Ex:
https://pwa.mypoc.dev/ -- Works fine
https://pwa.mypoc.dev/lights -- Do Not Work
I'v used this command on azure "Settings" > "General settings" > "Startup Command":
pm2 serve /home/site/wwwroot/build --no-daemon
I've found a question related to it but the answer did not help me, as I'm not using web.config because it is a Linux machine running Node 10 LTS: React App not starting in azure app service
After a little more research I found the problem. As Linux Azure Web Apps uses pm2 to serve a node app I found the answer looking into the official documentation.
PM2 is a daemon process manager that will help you manage and keep your application online. Getting started with PM2 is straightforward, it is offered as a simple and intuitive CLI, installable via NPM.
https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/#serving-spa-redirect-all-to-indexhtml
Just need to add the --spa option into the Startup Command on Azure Web Apps Linux General Settings:
pm2 serve /home/site/wwwroot/build --no-daemon --spa
Using --spa option pm2 will automatically redirect all queries to the index.html and then react router will do its magic.

How can I deploy React App to GoDaddy domain

I am new to using Reactjs, I just finished a project for a client and I need to upload it to a domain on GoDaddy. I ran npm run build already and I now have a build folder. I'm just not sure how to proceed. Can somebody please help me?
A domain name is not enough, you need to host your application somewhere. You can use netlify or zeit (both have free tiers) to deploy your application. After deploying the app you can link your domain to navigate to the application.
There's a few options, but heres a simple one to get you up and running quick. Upload to github repo and link your github account to netlify. In the netlify account deploy your project which will show at a random netlify domain. Change the nameservers in netlify to point to your godaddy domain and your app is live.

Resources