I have set axios's base URL to be a variable from my .env file like this:
axios.defaults.baseURL = process.env.VUE_APP_SERVER_API
And this is the .env variable VUE_APP_SERVER_API="http://lolapi.example.com/api"
Whenever I make a GET request like this:
axios.get('/' + action + 'Summoner/' + trimmedSummoner)
The request goes to the wrong URL. It tries to GET from this URL:
http://localhost:8080/summoner/lolapi.example.com/api/getSummoner/TheOnyxKing
instead of this one:
http://lolapi.example.com/api/getSummoner/TheOnyxKing
If I hardcode the correct URL in the GET request, everything works fine:
axios.get('http://lolapi.kabzamalov.com/api/getSummoner/TheOnyxKing')
Any clue why is this happening? Also this doesn't happen if I build the Vue.js project, it only happens during development.
If this is a vue-cli app, try setting publicPath or baseUrl in your production and/or development environment.
https://cli.vuejs.org/config/#publicpath
I'm new to node js and vue development and I want to create a process where I can create and upload a JSON file to my server when the user saves data in a form. This process should be done in the background. Later I want to read and update that file from the server when the user changed something.
So my first idea was to use fs.writeFile() this doesn't work very well and I think this only works for local stuff is that correct?
var fs = require('fs')
export default {
methods:{
send(){
fs.writeFile("/test.json","Hello World!",function(err){
if(err){
throw err;
}
});
}
}
}
Furthermore it looks like fs.writeFile doens't work with vue because it throws this error:
TypeError: fs.writeFile is not a function at VueComponent
So my second idea was to use express js with the app.post('/api/apps',...) and app.get() method. Here I have no idea how to implement that into the vue framework because I have to call the api like mydomain.com/api/apps but this doesn't work too.
So what is the best way to create, read, upload, delte files into a specific folder on my server? And how it works with vue? I tend to express js.
I'm using vue cli :)
Thanks in advance :)
EDIT
Now what I do is:
I created a new folder in my vue project root and named it "backend". In this folder I created a file named index.js and put this code
app.post('/appjson',(req,res) => {
fs.writeFile("/appjson/myJson.json",req.body,function(err){
//handle error
});
});
on the client side I put this code
axios.post('myDomain.com/appjson', {
JSONdata: myJSONdata,
})
My project looks like:
So when I build I get the dist folder and this I can upload on my server and it works fine. But I can't do the call to my backend? Whats wrong do I call the wrong link? Or how can I access my backend? Is the project struture correct or do I need to add the backend to a specific folder?
Vue is client side, your code is trying to write something to the filesystem of the user thats using your website. what you want to do is send this data to your NodeJS server, this requires using a package like Axios to send data to and from the server without refreshing the page. Axios is pretty straight forward to use, what you need will look similar to the function below.
saveJSON (myJSONData) {
const url = myNodeJSURL/savescene
return axios.post(url, {
JSONdata: myJSONdata,
})
Read some tutorials on ExpressJS, It's a pretty painless framework to use. You'll get the data stored in the body of the HTTP request and then you can use fs.writeFile to save data to the local filesystem of your server. Let me know if you need more help.
EDIT:
Your front end needs to be access a domain or IP address associated with your back end in order to communicate with it. Add the snippet below to your ExpressJS application and then when you run the server any requests to localhost:3000 will be handled by your app. You'll also have to update the URL in your Axios call.
app.listen(3000, function () {
console.log('my server is listening on port 3000!')
})
this setup only works for testing purposes because client and server will have to be on the same machine for localhost to mean the same to both. If you want this project to be public then you need to get your own domain for your site and host the ExpressJS application through there. Google compute makes this pretty easy to do, I'd look into that if I were you.
I have a node server running on localhost:5000 and I'm able to get a hash sent in the url with the following code:
app.get('/:hash', function(req, res) {
const id = req.params.hash;
});
I then also have a front end react app running on http://localhost:3000, and a proxy setup in package.json, but when I vistor http://localhost:3000/somehash I'm not able to retrieve the value some hash. Is there a step I'm missing to be able to get that value from react and pass it to node?
Thanks!
Background:
I'm creating a url shortener. User visits the react app and inputs a url to be shortened. Node returns a hash the user can use and share with others. Users who are given the hash url can visit and be redirected to the original url. Works fine on localhost:5000(node) but doesn't work on localhost:3000 (react). For some reason node isn't picking up the hash from react when the user first visits the page.
You must configure a route to receive the hash on react too.
Then, the react code can fetch the backend and get the URL from the hash.
And only then, the react can perform the redirection with window.location = URL
If you are using react-router-dom you can create the route like this:
<Route path="/app/:hash" exact component={YourComponent} />
Then, in YourComponent you can get the hash like this:
const {hash} = this.props.match.params;
Your backend is listening on port 5000 not 3000.
When you navigate to localhost:3000/somehash, you're asking your frontend to load the page somehash which needs to correspond to a route in React.
If you want to access the server's API on port 5000 through your React app on port 3000, you need to write the corresponding feature. For example an HTTP request to your localhost. It may look like this
// SomewhereInYourReactApp.js
const someHash = 'hello_world';
fetch(`localhost:3000/${someHash}`)
.then(response => response.json())
.then(myJson => {
console.log(JSON.stringify(myJson));
});
I am trying to implement Google Leaderboard for my games.
So I have downloaded sample scripts from the following URL: https://github.com/playgameservices/web-basic-samples
and put it in the web server:
E:\wamp\www\sugumar\web-basic-samples-master
and in the browser I tried
http://localhost/sugumar/web-basic-samples-master/type-a-number-js/index.html
but it showed the following error
Not Found
The requested URL
/sugumar/web-basic-samples-master/type-a-number-js/index.html was not
found on this server.
so I checked the file permissions for the folder web-basic-samples-master (I have so many projects running under sugumar folder so no problem with that folder permission).
It was in read only mode, so I unchecked the readonly and clicked on apply and on the next screen I clicked ok for "Apply changes to this folder, subfolders files" and then I clicked on ok, and then run the following url again
http://localhost/sugumar/web-basic-samples-master/type-a-number-js/index.html
but it still shows the same problem:
Not Found
The requested URL
/sugumar/web-basic-samples-master/type-a-number-js/index.html was not
found on this server.
It seems you've skipped the entire Running the sample application guide accompanying the code sample:
To run this sample application in your own environment, perform the
following steps:
1.Get the latest Google APIs Client Library for PHP and extract it into your server directory.
- We recommend you retrieve this using git, to ensure you always have the latest version. (e.g. git clone
https://github.com/google/google-api-php-client)
- Alternately, you can get the gzip file from the downloads page. Please make sure you download version 0.6.2 or later (updated June 3,
2013), as the GameService contrib file does not exist in earlier
versions.
2.This application assumes you have PHP/MySQL already running on your server. Create a users table with the following setup:
CREATE TABLE IF NOT EXISTS `users` ( `temp_key` varchar(128) NOT
> NULL, `user_id` varchar(64) NOT NULL, `bearer_token`
> varchar(1024) NOT NULL, `last_modified` timestamp NOT NULL DEFAULT
> CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY
> (`user_id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Create your own application in the Play Console, as described in the Create Client IDs portion of the documentation. Make sure you
follow the "Web" instructions for creating your Client ID and linking
your application.
If you've already set up your own version of the Type-a-Number sample
application, you can repurpose that application here. Either create a
new linked application (which will give you a new client ID), or add
your test server to your list of Javascript Origins in the APIs
Console (which will let you re-use your current client ID)
When you link your Web application, ensure the hostname matches the server from which you'll be testing your application. (e.g.
http://localhost/ or https://www.mytestserver.com). Also, make sure
that you have the right protocol (http vs. https)
Make a note of your Client ID and Client Secret as described in the documentation
Create a Leaderboard as described in the Leaderbords documentation. Give it a creative name like "High scores".
Once that's done, you'll want to replace the following constants defined in the SampleAppConstants.ini file.
In the api section, replace the following: clientId (Replace this with
your OAuth2.0 Client ID) clientSecret (Replace this with your OAuth2.0
Client secret) In the db section, replace the following: user (Replace
this with your MySQL username) pass (Replace this with your MySQL
password) host (Replace this with your MySQL hostname) name (Replace
this with the name of the MySQL database you're using.) In the game
section, replace the following: leaderboardId (Replace this with the
ID of the leaderboard you created in the previous step.)
Move your AppConstants.ini file outside of your htdocs tree. This contains sensitive information and it shouldn't be located anywhere
where it could accidentally be displayed to the user.
Update the constructor in your GameHandler file to point to the new location of AppConstants.ini.
That's it! Your application should be ready to run!
SITUATION:
I follow this tutorial: https://cloud.google.com/nodejs/tutorials/bookshelf-on-compute-engine
Everything works fine until I do npm start and go to:
http://localhost:8080
I am met with the following text on the blank page:
Could not load the default credentials. Browse to https://developers.google.com/accounts/docs/application-default-credentials for more information.
Which makes no sense since I am using OAuth. I followed the link and read the page, but I have no GOOGLE-APPLICATION-CREDENTIALS field anywhere, and nothing about it in the tutorial.
QUESTION:
Could you please reproduce the steps and tell me if you get the same result ?
(takes 5 minutes)
If not, what could I have done wrong ?
Yes, I had the same error. It's annoying cause Google Cloud Platform docs for their "getting started" bookshelf tutorial does not mention this anywhere. Which means that any new developer who tries this tutorial will see this error.
Read this:
https://developers.google.com/identity/protocols/application-default-credentials
I fixed this issue by running:
gcloud auth application-default login
In order to run thisgcloud auth application-default login
Visit: https://cloud.google.com/sdk/install
1) You have to install sdk into your computer
2) That will enable you to run the code
3) Log in to your associated gmail account then you are good to go!
This will make you login, and after that you code locally will use that authentication.
There are 2 solutions for this problem. One option, as mentioned by others, is to use gcloud auth application-default login
Second option is to set the environment variable GOOGLE_APPLICATION_CREDENTIALS. It should point to a file that defines the credentials. To get this file you need to follow these steps:
Go to the API Console Credentials page.
From the project drop-down, select your project.
On the Credentials page, select the Create credentials drop-down, then
select Service account key.
From the Service account drop-down, select an existing service account
or create a new one.
For Key type, select the JSON key option, then select Create. The file
automatically downloads to your computer.
Put the *.json file you just downloaded in a directory of your
choosing.
This directory must be private (you can't let anyone get access to
this), but accessible to your web server code.
Set the environment variable GOOGLE_APPLICATION_CREDENTIALS to the
path of the JSON file downloaded.
See https://developers.google.com/identity/protocols/application-default-credentials for details
Create a service account key using and download the json file. https://console.cloud.google.com/apis/credentials/serviceaccountkey
Add this to your ENV file
GOOGLE_APPLICATION_CREDENTIALS = "<PATH_TO_SERVICE_ACCOUNT_JSON_FILE>"
E.g:
GOOGLE_APPLICATION_CREDENTIALS=/Users/hello/Documents/ssh/my-10ebbbc8b3df.json
I was facing the same issue. It got fixed with following command.
gcloud auth application-default login
It stores default gcloud cloud credentials on your system and uses the same.
I got this error because of initially I did like below:
var admin = require("firebase-admin");
admin.initializeApp(); // I didnt add anything because firebaserc file include appName
It worked when I deployed the functions but not in serve. So this is how I solved it:
Go to the firebase Project settings(click on setting icon from side nav).
Click on the Service accounts.
Copy the admin sdk configuration snippet from selecting your pro. lang.
Ex (node.js):
var admin = require("firebase-admin");
var serviceAccount = require("path/to/serviceAccountKey.json");
admin.initializeApp({
credential: admin.credential.cert(serviceAccount),
databaseURL: "https://your-domain.firebaseio.com"
});
Now we need to add serviceAccountKey.json file.
Click on the Manage service account permissions in top right corner.
Now, you will see services accounts for your project, in the table find the row with column name name and value firebase-adminsdk, in that row click on Action dots and select Create key.
From the pop up dialog select Key type as json and press create button.
You will prompt to download the file, download it to your functions directory in project(You can customize this as you want and if you pushing to github, make sure to ignore that file).
Now, if you save it into the same directory where you are initializeApp(), access that file like: ./socialape-15456-68dfdc857c55.json(In my case, both files are located: functions/index.js and functions/services.son in functions directory and in index.js file, I initialed my firebase admin sdk).
Ex(node.js):
const functions = require('firebase-functions');
var admin = require("firebase-admin");
var serviceAccount = require("./myapp-15456-68dfdc857c55.json");
admin.initializeApp({
credential: admin.credential.cert(serviceAccount),
databaseURL: "https://myapp-15456.firebaseio.com"
});
It's a best and good idea to create .env file and include your file there and access it as others mentioned. I leave that part to you.
Hope this help someone on the planet. Regards!
If you're running the app locally, then the gcloud beta auth application-default login command should suffice for acquiring local credentials (I updated the tutorial to say so).
When running the app on Google Compute Engine, if the Compute Engine instance was created with the proper scopes (cloud-platform should be sufficient) then the app will authenticate with Google Cloud Platform APIs automatically without any extra work on your part.
Go here: https://firebase.google.com/docs/admin/setup#initialize_the_sdk and follow the instructions to create a private key.
Then after you have downloaded your private key open command prompt in the project directory and do the following command:
set GOOGLE_APPLICATION_CREDENTIALS=C:\YOUR-PATH\YOUR-KEY.json
use this to solve your issue. this actually works:-
just put credential parameter and give reference to your key to it.
const serviceAccount = require('../key.json');
admin.initializeApp({
credential: admin.credential.cert(serviceAccount)
});
Another solution i found: in your package.json add an export command like this:
"scripts": {
"start": "export GOOGLE_APPLICATION_CREDENTIALS='./gcloud.json' && node ./bin/www --exec babel-node --presets babel-preset-env",
},
You have to create an object of your SessionsClient.
Here I will provide some steps, so you can run your code like a charm.
You have to go into your Dialogflow dashboard.
Click on setting ( Left navbar top-right gear icon)
in the General tab click Service Account link ( it will redirect you to another screen)
If you have a service account then ignore step 5
Create a service account ( Top-center +icon button)
Now you have a service account on a list click on
From the action, field presses the 3 vertical dots and create a key.
Download the JSON file on your local computer.
Assign object to your sessionClient.
const sessionClient = new dialogflow.SessionsClient({
keyFilename: "/var/www/html/moqatrips/dialog-flow.json"
});
For all people using firebase, what it worked for me was passing the credentials to the KeyManagementServiceClient constructor
const serviceAccount = require('../keys/file.json'); //<- your firebase credentials
const client = new KeyManagementServiceClient({
credentials: serviceAccount,
});
I also had this error problem, here I had not created the object of
keyFilename (stores the credentials of the api)
in the sessionClient object for nodejs app.
const sessionClient = new dialogflow.SessionsClient({
keyFilename: "./keyCredentials.json"
});
const sessionPath = sessionClient.sessionPath(projectId, sessionId);
To download 'keyCredentials.json' goto:
https://console.cloud.google.com/apis/credentials/serviceaccountkey
Also add the path of this file to the system variables
In windows open powershell
type GOOGLE_APPLICATION_CREDENTIALS = [PATH_TO_SERVICE_ACCOUNT_JSON_FILE]
you may find youself in another part of the world -- and land here. I'm adding to a three year old question because its keywords matched my issue and the preceding answers helped me although none describe my issue
firebase deploy --only functions --debug
produced
[2020-12-02T08:31:50.397Z] FirebaseError: HTTP Error: 429, Unknown Error
Error: Could not read source directory. Remove links and shortcuts and try again.
I could not find anything wrong with the source directory. But that was all so many tiny fish.
Examining the error in detail, from the top, lead to:
Our systems have detected unusual traffic from your computer network. This page checks to see if it's really you sending the requests, and not a robot.
The block will expire shortly after those requests stop.
Out of curiosity and exhaustion, I waited first. The wait reset duration is > than 30 minutes. So i pursued the captcha to prove my enduring humanity which did register eventually after some oauth warnings.
Although this question has been answered multiple times, I found myself in a situation not explained here.
After I created the variable: $GOOGLE_APPLICATION_CREDENTIALS, I was getting the same error as Coder1000.
However, I was running both: nodemon and: npm run dev in two separate sessions in Terminal, neither of which were aware of the variable.
Once I: shut the tabs down; added new tabs; and ran the commands again, the application was able to access the variable.
download Cloud SDK installer from this site. https://cloud.google.com/sdk/docs/install
run this command -> gcloud auth application-default login
If anyone ran into the issue just like me and doesn't want to set the variable each time before running their code it's best to manually set the environment variable. Name it GOOGLE_APPLICATION_CREDENTIALS and browse the downloaded JSON file. If you don't know the steps follow this: https://docs.oracle.com/en/database/oracle/machine-learning/oml4r/1.5.1/oread/creating-and-modifying-environment-variables-on-windows.html#GUID-DD6F9982-60D5-48F6-8270-A27EC53807D0