I'm facing a problem. I want to know if there have any way to hide api key without .env file in react + express file..
Related
So I am trieng to create react app in a suitlet. but I cant figure it out how to upload the field to the file cabinet, how to call the index.html file and what to do with the node_modules folder?
for example, I have a suitelet with a HTML field, but how can I call the react from there?
I'm trying to embed an existing react app to my WordPress site using the plugin ReactPress. I created a react app inside the plugin section:
and added my build folder of the existing react app inside the path where is needed (using file administrator plugin):
The Path is wp-content/plugins/reactpress/apps/dase-mural-design. The problem is when I click on the URL Slug in order to see this section (where the build folder is placed) I don't see the react app I've just uploaded, I just see header and footer and these errors:
What I'm doing wrong? How can I fix it?
Thanks in advance.
Update:
I used FileZilla to upload these files but is still not showing anything. Any idea?
I changed the package.json homepage to: "homepage": "/wp-content/plugins/reactpress/apps/dase-mural-design/build",
But in the console of the WordPress site I see:
Thanks
It's an encoding issue, try setting your site encoding to utf-8 or uploading the files of your react app with a different tool, it could be the file manager plugin is changing the encoding when uploading.
I want to use an API key for one of my frontend components, but I can't seem to get require('dotenv').config() to work. It works perfectly fine in my backend. Do I need a relative path for it to work?
My file structure is
client
-src
--components
---component.js
server
-server.js
.env
(so require('dotenv').config() works in server.js, but not component.js)
I have a public key for my frontend and a secret key for my backend both in .env. When I try console.log(process.env.REACT_APP_FKEY) to check my public key, I get undefined.
Any help is appreciated!
React cannot access files out side the react project which I assume is client. You can create an env.local file in your client folder, and inside there you want to start your variable names with REACT_APP first, example.
So new file structure
client
-src
--components
---component.js
-.env.local // inside client folder
server
-server.js
-.env //this should be inside server folder
the .env.local file
REACT_APP_FKEY=your_key
and then you can access it as, process.env.REACT_APP_FKEY
This way you do not need dotenv on your FE
My application having multiple request to different API URL's request, when a particular component renders.
I am facing the CORS issue since I am using multiple URLs' , so in order to avoid i haved installed http-proxy-middleware package.
In setupProxy.js, I used below code. which is not working
Note: I having same endpoints with different api urls's in my project. How deal with this cases
app.use(proxy("/rest/V1/orders",{target:"https://example.com/",changeOrigin:true}));
app.use(proxy("/rest/V1/orders",{target:"https://example.net/",changeOrigin:true}));
app.use(proxy("/rest/V1/orders",{target:"https://example.org/",changeOrigin:true}));
Try this. Download as ZIP file and check setupProxy.js in the SRC folder.
https://github.com/lyhd/reactjs/tree/fix-cors
PrintJs package is also not working. if there is any other way either by some package or downloading the file to local storage of browser Do suggest.