I'm fetching data from commercejs.com and my localhost shows some error as "Invalid public key given to Commerce.js client". I choose the public api key one tho
This is my commerce.js:
import Commerce from '#chec/commerce.js';
export const commerce = new Commerce(process.env.REACT_APP_CHEC_PUBLIC_KEY, true);
This is my env:
REACT_APP_CHEC_PUBLIC_KEY=pk_test_32015299720e5050ac997c8e08a77c1a0e24bf21215b7
Put .env file in your project root
https://commercejs.com/docs/community/faq/
I'm following the same tutorial.
Try two things:
Restart your local server. Stop with CTRL+C, then run npm start.
Try using your Public Key (not test key).
Anyone else with issues, double check you've spelled everything correctly in commerce.js. I had written REACT_APP_CHECK instead of CHEC.
Your API key is not being provided to Commerce.js when you construct Commerce.
import { Commerce } from '#chec/commerce.js';
const commerce = new Commerce('put_your_api_key_here');
When using an environment variable, be sure that it is being loaded correctly. In this case please ensure that the .env file in your project is in the project root folder (same level as package.json), and that it has the environment variable defined correctly as referenced by your code. e.g.
const commerce = new Commerce(process.env.REACT_APP_CHEC_PUBLIC_KEY);
project
- node_modules
- src
-.env
-.gitignore
- README.md
- package.json
Related
I have a project in Next.js. I have that upload files and share that in public URL to this project.
With npm run dev first I uploaded files to public folder and it worked fine, but when I change to npm run start and upload files, the files upload to public folder but with URL http://mydomain/fileuploaded.jpg it did not show, is rare but it's there.
I searched on the Internet but I didn't find a solution for this problem.
From Next.js documentation:
Only assets that are in the public directory at build time will be served by Next.js. Files added at runtime won't be available.
You'll have to persist the uploaded files somewhere else if you want to have access to them in the app at run time.
Alternatively, you could setup your own custom server in Next.js, which would give you more control to serve static files/assets.
You can also achieve something similar using API routes instead. See Next.js serving static files that are not included in the build or source code for details.
a bit late but if someone need the same.
If your goal is to upload and get picture from your next server, you can instead of using the Next router, getting the image by yourself by create a route /api/images/[id] where [id] is your file name and you manually with fs send the picture back.
something like:
const file = await fs.readFile(`./uploads/image.png`)
console.log(file)
res.setHeader('Content-Type', 'image/png')
res.send(file)
Try and use nginx or another webserver to serve the public directory. That way it will serve newly added files without having to write extra code to serve files in nextjs.
server {
/images/ {
root /var/www/site/public
}
}
Hello guys may you help me?
I'm trying to configure my fake API to create some personal projects but in my case, the method using the /pages/api folder only works for me in localhost when I deploy to the server on Vercel the project can't find my endpoints.
In my case I'm using the src/ folder method to develop my app and I don't know if this structure can cause problems with api folder.
One thing that I tried and worked is deploying to vercel using the api folder at the root of the application (out of /src folder) but the api stop working on localhost.
This structure works on localhost but doesn't work on server:
├───public/
├───src/
├───api/
├───pages/
...
next.config.js
package.json
This structure works on server but doesn't work on localhost:
├───api/
├───public/
├───src/
├───pages/
...
next.config.js
package.json
This is the method that I'm using to get data:
AXIOS API:
import axios from 'axios'
const api = axios.create({
baseURL: '/api/'
})
export default api
SWR HOOK:
import api from 'src/services/api'
import useSWR from 'swr'
function SwrFetchHook<Data = any, Error = any>(url: string) {
const { data, error } = useSWR<Data, Error>(url, async url => {
const response = await api.get(url)
return response.data
})
return { data, error }
}
export default SwrFetchHook
SWR callback:
const { data } = SwrFetchHook<INavItem[]>('categories')
I hope that I could explain, my question here is how is the best way to work with this feature because the /src folder is common to use with nextjs but I don't know if this is the real problem with the api folder.
Thanks!
Not 100% sure if this is the same issue. I had this warning in my build phase:
warn - Statically exporting a Next.js application via `next export` disables API routes. This command is meant for static-only hosts, and is not necessary to make your application static.
Make sure you are using the correct build command in out package.json scripts.
I'm my case:
"next build && next export" needed to be changed to "build": "next build"
Note: I removed && next export
This disabled the static export feature and allowed the use of pages/api when running yarn start note: yarn start relies on the build script within Vercel's build pipeline. So do not override the default settings unless it is needed.
Also normal Node/JS projects you can define a source folder in the scripts area ie "start": "<SOME_COMMAND> ./src"....but Next.js does this automatically so I do not think having an src file is the issue. I too have an src file in my project and it is a very common way (preferred way) of organizing your JS project. You shouldn't have to touch this if you are using next.
I tried deploying my app on digital ocean and it worked cuz vercel was not providing a server. I was not able to call my api from POSTMAN as well. Deployed it on digitalOcean and then it ran a server just like my localhost.
Hi everyone I moved my gatsby site to netlify, I installed google-map-react on localhost: 8000 everything works fine my key is in a .env.development file and in a .env.production i saw i must call my var with GATSBY_***** so i made this
GATSBY_GOOGLE_API_KEY = "**********************"
And i call it in my component Map :
const key = process.env.GATSBY_GOOGLE_API_KEY
It works well in local but in netlify i go in my settings of my site and Environment variables
I make GATSBY_GOOGLE_API_KEY Variable and his value but i've got an error message :
backend.js:6 Google Maps JavaScript API warning: InvalidKey https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key
I must have missed something but I don't know what thank you very much if you have any leads
I am having problems getting Heroku to recognize my api keys that I have gitignored on my React app.
I have created credentials.js with my api keys and exported it.
export const API_KEY = 'redacted';
Then I listed credentials.js in gitignore.
credentials.js
I then imported API_KEY into my project file.
import { API_KEY } from '../credentials.js';
This works fine in development but when I push to Heroku, it fails to resolve the path to credentials and the compile fails since it's in a gitignored file. I have also tried using a .env file, but that does not work either.
I have tried not importing it and just running the Heroku "config set" command in the terminal, but to no avail.
$heroku config:set API_KEY=<key>
Also the issue is importing the API_KEY gitignored variable in the index.html file. How do you do this in a React app like you can do with application.yml file in rails and referencing it with #{ENV[API_KEY]}?
Does anyone have a tried and tested solution?
As you have already set the API_KEY on Heroku env using the command you mentioned, in order to use it you need to do something like:
const API_KEY = process.env.API_KEY;
This way you'll be able to read from Heroku env. You can see more info here.
I am creating a demo react native app that is implementing aeroFS https://github.com/redbooth/react-native-auto-updater library
[An aerofs library is nothing but each time when app opens it will check for update from remote server and if update is available it will download and ask the user to apply for the update without play store].
So far the app is able to download the file but after download i am not able to see any changes in the app.I'm sure the newly downloaded bundle is not used in the activity.
On further checking inside the library i found the following method in ReactNativeAutoUpdaterActivity class (main class):-
#Override
#Nullable
public String getJSBundleFile() {
updater=ReactNativeAutoUpdater.getInstance(this.getApplicationContext());
updater.setMetadataAssetName(this.getMetadataAssetName());
return updater.getLatestJSCodeLocation();
}
The ReactNativeAutoUpdaterActivity extends from ReactActivity which does not have this method.I think this is moved to ReactNativeHost so i knew this is the problem but now should i implement my own react native host class to over ride the method so that once new bundle file is downloaded i can apply it to app.
MainApplication.java
import android.content.SharedPreferences;
import android.preference.PreferenceManager;
.
.
.
#Override
public void onCreate(){
super.onCreate();
SharedPreferences preferences =
PreferenceManager.getDefaultSharedPreferences(getApplicationContext());
preferences.edit().putString("debug_http_host", "128.xxx.xxx.xxx:1234").apply();
}
When using a remote VM, port 8081 is not exposed, so:
npm start -- --reset-cache --port=1234
AppDelegate.m (iOS):
jsCodeLocation = [NSURL URLWithString:#"http://128.xxx.xxx.xxx:1234/index.js"];