I have Electron app which access react app running on dev server. I use loadURL("http://localhost:3000/") to access the reactapp within electron. The react app having console logs however not able to view the logs anywhere. how do I view these log messages
NB: I am new to JS /react/Electron and come from enterprise java background
For the render process you can start here.
https://electronjs.org/docs/tutorial/application-debugging
for the main process you can see here.
https://electronjs.org/docs/tutorial/debugging-main-process
if you are using vscode you can use this handy guide.
https://electronjs.org/docs/tutorial/debugging-main-process-vscode
Related
I want to active menu on scroll in my react app. I have used a react-scrollspy-nav for this functionality. It works fine when i run it on local server but when i deploy so it shows a blank screen
i have used a react-scrollspy-nav in my app, which is working perfectly on local server on my laptop but after deploying on netlify, it shows blank screen with an error on console that says
Uncaught TypeError: Super expression must either be null or a function
at ScrollspyNav.js:423:1
Link of my react app
If i remove this module react-scrollspy-nav and deploy it, my app does not show blank screen and works well but without the functionality of scrollspy which i want in my app
I am working on a react application that is using React Stripe package to connect to Stripe.
I am trying to use Stripe PaymentElement to gather card information. Everything works fine in development mode but when I build the code for production and I deploy it on a test server I get this errors in the browser console:
The resource at “https://js.stripe.com/v3” was blocked due to its Cross-Origin-Resource-Policy header (or lack thereof). See https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)#
How can I fix this error?
When I put a new react app version to production in amplify, for some users they only see a white screen and in the console I have seen the error message which said "rejected". Browser did not download my js or css files.
I'm using rtk query to cache my end point calls and service workers to enable Pwa if they may be relevant.
Thanks!
I'm using Nextjs for a front-end application and dotnet core 3.1 for the Web API. There are some pages that are static and other that are dynamic I followed the official documentation to achieve this. On development mode (local machine) everything works fine. Both static and dynamic routes are working properly and fetching data from the dontnet core Web API.
However, when publishing the Nextjs app following this steps:
yarn build
yarn export
An out folder is generated at the root of the project
The content of that folder is uploaded to the server
After, the deployed files are uploaded and when loging to the app, it redirects to the main page (until here is working OK), but as soon as I click on the reload page botton (Chrome) I am gettint the 404 error.
Looking at the console in the developer tools I got this:
I found this Stackoverflow link with same issue but there the answer is to use Express for server routing. In my case I am using dotnet core Web API for server requests. So, not sure how to do that.
Is there a way to fix this from the client side? Might be a configuration is missing?
The only thing I noticed while doing the export was a message saying: No "exportPathMap" found. Not sure if that would the the reason.
I had got similar issue in react when all of my pages after building and exporting had ".html" extensions. I solved it by the following code in next.config.js file.
next.config.js
module.exports = {
exportTrailingSlash: true,
}
Note: Do not work with the above code while in development. Use it just before building the project.
You can find the documentation link here: https://nextjs.org/docs/api-reference/next.config.js/exportPathMap#adding-a-trailing-slash.
UPDATE
The above code was for next.js v9.3.4 which I was using at that time. For newer versions below code should be used according to docs.
next.config.js
module.exports = {
trailingSlash: true,
}
it has been fixed update your nextjs package
npm install next#latest
based on the current version of Next js you have, visit here to see if there's any breaking change before updating what you have
I had a similar issue where after deploying the out folder created by next export all URL's would redirect me to the homepage. Everything was working fine during development and all URL's were accessible with next/link but in order to access pages with a URL I had to add a .html extension at the end of the URL.
Because I needed a quick workaround I added a useEffect block in the _app.tsx file for rerouting so that upon landing on the homepage it would act as if a Link component was clicked redirecting to the entered URL.
useEffect(()=>{
router.push(window.location.href)
},[])
Situation:
I'm building a React app with React Router.
It was generated from create-react-app.
I need to host it statically.
If I visit the home page first and then click around, everything works fine.
Problem:
When visiting a sub page directly such as https://www.example.com/path/page server returns 404 error because /path/page is not a valid directory on the server.
For as far as I can tell, the server is just serving up files statically, and I cannot change how the server is written (I know I could solve this problem by routing all accesses to the react app with some server code, but this is not an option).
How can I make all urls directly visitable by only changing code in my react app?
After some research, I figured out that what I needed was a static site generator.
There are a couple of options available that works with React.js
React Static
Gatsby
Next JS
Some useful articles on getting started:
For Gatsby: https://medium.com/codingthesmartway-com-blog/gatsby-static-site-generator-for-react-introduction-b9fce7df6b24
For React Static: https://medium.com/#tannerlinsley/%EF%B8%8F-introducing-react-static-a-progressive-static-site-framework-for-react-3470d2a51ebc