I have deployed my backend in heroku and i got my endpoints and was tested from postman.Now when i updated my heroku endpoint in .env file of react js but still it doesnt work.what may be the issue behind it?
This is my .env file:
REACT_APP_BASE_URL ='http://payroll-account.herokuapp.com/api
This is my axios file and i am using .env file as following:
const BASE_URL = process.env.REACT_APP_BASE_URL || 'http://localhost:8080/api'
Now if i use as following in my axios file it works fine:
const BASE_URL = process.env.REACT_APP_BASE_URL || 'http://payroll-account.herokuapp.com/api'
Correct your REACT_APP_BASE_URL = 'http://payroll-account.herokuapp.com/api
You are adding a ' at the beginning of URL string. Please have a look that what is the different?
Anyway, now update your .env file:
REACT_APP_BASE_URL = http://payroll-account.herokuapp.com/api
And use it where you want something like below:
const BASE_URL = process.env.REACT_APP_BASE_URL || 'http://localhost:8080/api'
Hopefully now will work :)
Related
I would like to save JSON data into a variable using Axios in Javascript. The route that produces the JSON endpoint is my own servers route http://123.4.5.6:7890/json. This works successfully with the following function:
async function getClasses() {
const res = await axios.get('http://123.4.5.6:7890/json');
}
However, I figure this won't work with someone else's server when they pull up my project, so what line of code would go into the http:// spot? My mentor recomended using 'http://localhost:5000/json' however this error occurs when I tried this.
Here is the python code for my json route:
#app.route('/json')
def display_json():
"""view/signup for available yoga classes using API"""
serialized_classes = [c.serialize() for c in Classes.query.all()]
return jsonify(serialized_classes)
When I go to the http://123.4.5.6:7890/json route in my browser. JSON does successfully appear in the browser. Thanks, and any help is appreciated
I think it's a CORS issue, you can use the below code to solve this issue.
var config = {
headers: {'Access-Control-Allow-Origin': '*'}
};
async function getClasses() {
const res = await axios.get('http://123.4.5.6:7890/json', config);
}
on your app.py or main.py file
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
I have this code in my index.js
const config = require('./config.json');
and the content of my config.json is
{
"default_prefix": "?"
}
But I am getting an error: TypeError: Only absolute URLs are supported. What is causing the error?
If I have to show more code, ask me in the comments.
./config.json is a relative URL, and it's asking for an absolute URL.
Try converting it to an absolute URL: https://stackoverflow.com/a/38829194/2875073
const configAbsolutePath = require('path').resolve('./config.json')
const config = require(configAbsolutePath);
Or you could try another option here for reading a json file: Using Node.JS, how do I read a JSON file into (server) memory?
I'm new to javascript and trying to follow a Udemy tutorial and upload the code to github along the way. I need to hide an API key used in a URL that looks like the following:
https://api.darksky.net/forecast/api-key-here/37.8267,-122.4233
I created a .env file that contains a single line API_KEY=my-key-of-numbers-here
My entire code looks like this:
const request = require('request');
require('dotenv').config();
const api_key = process.env.API_KEY;
const url = 'https://api.darksky.net/forecast/${api_key}/37.8267,-122.4233';
request({ url: url }, (error, response) => {
const data = JSON.parse(response.body);
console.log(data.currently);
});
When I run node app.js in the terminal I get back undefined. However, if I use the actual key everything works fine, but I obviously can't make the key public. How can I fix this?
try ` instead ' – Estradiaz
Per the comment by #Estradiaz. I was using an apostrophe ' around the URL instead of backticks `. Solved.
Are you sure that you have dotenv installed?
try npm install dotenv in the terminal.
Not sure if this is an axios issue or not, but this works for me locally:
axios('/api/test').then(response => console.log(response.data))
But on my hosted server, it requires this:
axios('api/test').then(response => console.log(response.data))
Notice that the url request prefix '/' is there for local and not for server.
Is there any way to handle this (maybe Laravel Mix?) without doing something like this hack:
var p = location.hostname === "localhost" || location.hostname === "127.0.0.1" ? '/' : ''
axios(p + 'api/test').then(response => console.log(response.data)
I'm using Laravel(5.8)/Vue with the standard folder structure. The request route above is:
Route::get('test', 'TestController#index');
and located in the AppName/routes/api.php file.
You could simply add a variable in your javascript file to add the path.
var host = window.location.origin;
axios(host + '/api/test').then(response => console.log(response.data);
Hope this works
It maybe a flaw in the configuration of your Apache server (or nginx), but I suggest you use a configuration file to avoid problems like this:
// Define different API Url
const urlApiDev = 'urlApiDev'
const urlApiProd = 'urlApiProd'
const secretDev = 'secretDev'
const secretPROD = 'secretProd'
export default {
url: process.env.NODE_ENV === 'development' ? urlApiDev : urlApiProd,
version: 'api/1.0',
clientId: '2',
clientSecret: process.env.NODE_ENV === 'development' ? secretDev :secretPROD,
}
and import it where you need to use it.
Thanks for the suggestions, but my final solution was to deploy on my host server the way I believe it was intended. I made the public folder a root folder and pointed the server to that folder.
I'm trying to get an array from node.js (server-side) to react app.js (client-side)
so I need to get files to array from node and send it to app.js it seems like module.exports from node and import from app.js does not work like this here is what I tried
node.js file:
const fs= require('fs');
const files=fs.readdirSync('../Movies');
module.exports={
movies:files
}
app.js file
import { movies } from "./server/server.js";
console.log(movies);
do have have to
You can't do it.
app.js in client, It can't import "./server/server.js"
But you can send array has name of file in that forder when render.
node.js:
const files=fs.readdirSync('../Movies');
// when user request your page (this example use ejs)
res.render('<your_ejs_file>', {
myFiles: files,
});
// in your_ejs_file, create variable:
<script>
var yourFiles = <%= JSON.stringify(myFiles)%>
</script>
yourFiles is array named of file in your_folder
If you want load file from server, you can use AJAX to load it.
I use name of variable diffrent to you avoid mistake them.
If you want to send data from server-side to the client-side, you can use AJAX (sending HTTP requests to the server using front-end JavaScript). There are also other useful packages that you can use to simplify your work, like request or axios