So I have django project with jquery for interactivity in frontend. I already have .env file to store database configuration to be used by django settings.py, but I need jquery to be able to access the .env file too.
From what I read in dotenv documentation, I need to install the dotenv using npm or yarn. But I think jquery don't have/use npm? I am a newbie in javascript
Your script can't have access to .env, since it's running in your users' browsers.
First, if your API is hosted on the same domain as your page itself, you don't need to specify a hostname, just use relative URLs ('/api/v1/path/to/resource/'). That way your script doesn't need to know the host. Also, in Javascript, document.location will give you all the information about the current host.
Second, if it's not the same or you want other URL parameters to be set by Django for your script to use, set a variable in your template using a context variable. E.g. if your view fetches settings.API_URL and passes it as api_url to the context, you can do this in your template:
<script>var APIUrl = "{{ api_url }}"</script>
Then, as long as your jQuery script runs after this variable was defined, it will have access to it.
Related
can anybody please help on this.
I have strange issue in API. My backend is created in php and UI in react.
in my env file below path are present.
API_URL=http://localhost:8080
FRONT_URL=http://localhost:80
so API_URL is for backend and FRONT_URL is for UI. I have called my API like below in react.
axios
.get(process.env.API_URL+ '/code';)
.then()
.error
my code is working properly. same API I can access from reactas well as postman. there is no issue.
But when we deployed our application in UAT URL is appending undefined between API name and API URL.
Below are API value in UAT env file.
FRONT_URL=https://uat-solve.dell.com
API_URL=https://api.uat-solve.dell.com
Now my application throwing error. it is not running. when I checked what URL it is trying to reach out then it came below.
https://api.uat-solve.dell.com/undefined/code
It is appending undefined in between. when I tried to access same url from postman after removing undefined output is coming.
What could be the possible reason of it? this is the new component in react. existing application working properly
Edit 1:-
I changed env variable to REACT_APP* but still it did not work.
The Create React App documentation states that you must prefix all environment variables within your .env files with REACT_APP_ for them to be available from within your code process.env.REACT_APP_<variable name>
If you don't want to use REACT_APP_ prefix, you can use env-create-react-app
Try using backticks(``)
For Example : `${process.env.API_URL}/code`
Make sure you have the .env file in your root folder(same place where you have your package.json) and NOT in your src folder.
You mention you changed your environment variables to start with REACT_APP - do you have a trailing underscore? They should start with REACT_APP_.
Problem :
I am new to React JS, and looking for an option to read environment configs from an external property file. This problem is more specific for one of my clients, who is looking to have an option to change the environment files dynamically. E.g. change the hostname/port dynamically whenever there is a change. The build process is not owned by my client. I create a minified final package, which my client deploys it on tomcat/web server.
Tried Solution :
With some read-outs, I have configured .env files for different environments and able to successfully read configs from these files. However, these are more of a build process environment files. And, I am trying to find a way to read the configs from an external source after my package is created.
Possible solutions : Here is one possible approach I can think of -
Read external property file using libraries like "properties-reader". I will provide the property file as part of my release bundle (i.e. build folder). My client can change this property file whenever required.
Please suggest if this is the correct approach or is there a better solution to this problem?
A Solution which worked for me !!
1) Create a "config.js" file inside public folder of react project. Sample Content of the
"config.js" file -
window.env = {
API_DOMAIN_ADDR: "http://localhost:8080"
};
2) Refer "config.js" file inside index.html. Code for index.html will be -
<body>
<div id="root"></div>
<script src="%PUBLIC_URL%/config.js"></script>
</body>
3) Now, content of the config.js file will be accessible to react code. Sample code to retrieve the value of config.js variables -
window.env.API_DOMAIN_ADDR
Add this code wherever variable value needs to be accessed. I added this in my service class which is making ajax call.
I would suggest using something like Firebase Realtime DB. I had a similar requirement for pointing the App builds to production or development server APIs for my company. For this, we use to load a Firebase Config and from there the UI used to pick up the host server endpoint.
Advantages:
This saves you from deploying your build folder every time.
This is realtime and less prone to errors.
FirebaseDB is free for small stuff like this.
The second option is to create two environment files which I see you have already done.
I'm working on an app that is going to be deploy on-prem (no cloud) and there are requirement to deploy the application to different server path. For example in one company it might be company1.com and on another it might be company2.com/app because they already have a server and want to deploy it on the same server under a different context path.
The problem is in Webpack we compile the app and create HTML+JS+CSS files. The HTML and JS files have the server context path (part after the domain name) hardcoded into the code. For example loading the JS files will be done with <script src="/hello.js" /> so if the app will be deploy to company2.com/app I need the script tag to be <script src="/app/hello.js" />
I'm looking for way to change the server context path dynamically preferably using environment variable.
For compare we use Spring on the server side and there we can define env-var server.contextPath which will change the context path in which the app works.
If it changes anything the app is deployed as docker image.
Any ideas how to implement such thing?
That's an interesting question, and there are some ways you can resolve that. I'll list some options below.
I'm looking for way to change the server context path dynamically preferribly using environment variable.
I will list some other options, but the first one is using env vars.
Using Environment Variables When Building
webpack has a plugin (DefinePlugin) that allows us to set environment variables to the javascript code.
Then, you will be able to get those environment variables using process.env. For exemple, if you have the following configuration:
plugins: [
new webpack.DefinePlugin({
fruit: JSON.stringify('orange'),
MY_VAR: JSON.stringify('value'),
API_URL: JSON.stringify('http://some-api')
})
]
Then, in your code you can get them using:
console.log(process.env.fruit); // "orange"
console.log(process.env.MY_VAR); // "value"
console.log(process.env.API_URL); // "http://some-api"
This said, you can do something like this:
Passing environment-dependent variables in webpack
Then, for example, you can just use process.env.API_URL in your code, instead of using it hardcoded.
IMPORTANT: this method will only work if you have can build your code before releasing it to production. (I think it's not a problem for you).
I think this is the best option, because your code will be "clean", it is more "customizable" and it will "simply work", regardless your environment.
Using a Map
You can have some application logic to decide your variables. For example, you may "look" to the URL (i.e. location.href) and decide the values to use based on this address.
let api;
if (domain === 'domain1.com') api = 'api1';
if (domain === 'domain2.com') api = 'api2';
Using an Extra HTTP Server
You can always point to a hardcoded path in your server, lets say /api. Then, in your code, you will point to /api. So, all your requests will go to /api.
You will need to have an HTTP Server (it can be a Nginx, a NodeJS, whatever you want) listening to /api and then have this "routing" logic there.
It will work fine, but you will need to control the deployment of this HTTP server. This may not be a good option for you, but it may suit your needs.
One advantage is that you'll be able to only change the code of this HTTP server when changing some routes, without need to deploy your front-end code again.
I think that sums it.
Hope it helps!
I have a bizarre routing issue with my ASP.NET MVC project that I hope you guys can help me with.
Overall everything works fine when I run the project off my localhost or run it on the server while it's deployed directly at http://myServerName. The problems start when I deploy the application to various enviornments on the server located under different virtual directories. For example: http://myServerName/QaEnviornment or http://myServerName/TestEnviornment
The problem is that all Javascript calls to application URLs ignore my environment virtual directories and fail.
For example on my QA server whenever I have to make an Ajax call I take a standard approach such as:
var myUrl = '/ControllerName/ActionMethodName/'
$.ajax({url:myUrl,success:function(){Do stuff} })
Because my application is deployed on http://myServerName/QaEnviornment, when rendered I expect myUrl to be http://myServerName/QaEnviornment/ControllerName/ActionMethodName. Instead it comes back as http://myServerName/ControllerName/ActionMethodName and ofcourse fails.
To get around this for now I declared a global Javascript variable that contains the environment folder name and when I build URLs for javascript calls I have to remember to ALWAYS construct them as var myUrl = myGlobalFolderVar + '/ControllerName/ActionMethodName/'
Using a global JavaScript variable to get around this issue seems as a bad solution to me. Is there anything I can do to get routing to work properly so whenever JavaScript calls are made whatever subfolder the application is running under is always included in the URL ?
Instead of always having to remember to construct them correctly, make a helper function that you call to create your URLs
function CreateUrl(string path){
return myGlobalFolderVar + path;
}
To answer your second question, not really. Routing is not aware of what made the request and you cannot always rely on the X-Http-RequestedWith header to base that decision on. In addition, your site application root is not at the domain root, therefore routing would only kick in when it visits your application. The only other way I am aware of is to have MVC actually generate the Url for you (var url = '#Url.RouteUrl(params)';) but this does not help at all when you have your JavaScript in a single or a few .js files.
EDIT
The above function is a JavaScript function that can sit anywhere you would like in your application, including external JS files. As for setting your myGlobalFolderVar, there are a few ways you could set this.
1.Actually hard code the variable in your external JS file.
var myGlobalFolderVar = 'TestEnviornment';
This is hard however if you are deploying to several different testing servers.
2.If you are using web.config transformations, you could add an AppSettings key/value pair in your web.config transformations depending on build type. Then, using that value, set your global Javascript variable in your master page layout/views.
<appSettings xdt:Transform="Replace">
<add key="folderLocation" value="TestEnvironment" />
</appSettings>
In your external JS file
//this makes it a site wide/global variable in any place you
//include your external JS file
var myGlobalFolderVar = '';
And in your master view
<script type="text/javascript">
myGlobalFolderVar = '#ConfigurationManager.AppSettings["folderLocation"]'
</script>
3.Same as number two, but use the URL helpers to figure out what the path to your application is in your master view instead of using the web.config transformations
<script type="text/javascript">
myGlobalFolderVar = '#Url.Content("~/")'
</script>
The basic idea is using .NET to figure out where it lives and set a global JavaScript variable with that path information. Then, in conjunction with the helper JavaScript function provided at the top of this answer, you can correctly generate paths as needed throughout your application - regardless of path depth, deployment location or any other deployment type concerns.
var myUrl = CreateUrl('/ControllerName/ActionMethodName/');
$.ajax({url:myUrl,success:function(){Do stuff} });
I am developing a web app that accesses some external JSON data. I'm currently using jQuery's getJSON to get the data and call the callback.
My internet at home is terrible, so I'm regularly not connected. I am looking for a way to develop this app while disconnected from the internet.
My initial thought was to have an OFFLINE variable that I set, which changes the location of the scripts to a local file, but because jQuery's getJSON uses dynamically named functions for callbacks, it would need some server intelligence.
More info on how getJSON callbacks work here: http://docs.jquery.com/Ajax/jQuery.getJSON
I'm sure there's an easier way. Any suggestions?
** Edit **
Let me try and clarify a bit
I'm currently running a local web server. I have to - script tags can't reference a local file, for security reasons.
I'm currently calling getJSON with the url: http://twitter.com/status/user_timeline/user.json?callback=?
If I downloaded that json response and hosted it on the local webserver, it wouldn't work, because the callback name will change every time, yet the feed will have the function name it was originally fetched with.
I have a similar problem. Try xampp for an easy php/apache/mysql install on your machine.
I use dreamhost to host my site. I manage everything with a subversion repository, which allows me to simply do 'svn update' on my live site when I am ready to pull in my changes.
I also define all my paths relative to a base_url variable, which is set depending on the http host, so I don't have to change anything for my site to run on different webservers. I use codeigniter, and my config file looks like this:
switch($_SERVER['HTTP_HOST']) {
case "claytonhp":
$config['base_url'] = "http://claytonhp/<project_url>";
break;
// etc.
}
To use that same path in my javascript, I put the following at the top of each html file:
<script type="text/javascript">
siteUrl = '<?= base_url();?>';
</script>
<script type="text/javascript" src="<?= base_url();?>public/scripts/external/jquery/jquery.js"></script>
<!-- Local functionality -->
<script type="text/javascript" src="<?= base_url();?>public/scripts/common.js"></script>
<!-- etc -->
Then, my jquery ajax calls look like this:
$.ajax({
type: "POST",
url: siteUrl + "index.php/ajax_controller/getSomeData",
dataType: "json",
data: "id=5",
success: successCallback,
error: errorCallback
});
Just use a web server (IIS is built into Windows, or use Apache, or XAMP otherwise). That way, you're always connected to your web site (use http://localhost/...).
Quick solution is to just run a local web server. This is a good idea for all sorts of reasons.
If you don't want to do that, just define the URL to get the JSON from somewhere global, and pass it to getJSON(). Just don't forget to set it back before you put your code up on the server.
I used a local sinatra webserver, and replaced the hosts in my /etc/hosts file. It's nice because it's super easy to define new services.
I often forget to reset my hosts file, which can cause a lot of frustration, so I created a script to wrap the whole thing as well.
Here's an example that will serve up a twitter user feed.
run.sh
#!/bin/bash
cp /etc/hosts /etc/hosts.original
cat offline_hosts >> /etc/hosts
ruby server.rb -p 80
cp /etc/hosts.original /etc/hosts
offline_hosts
127.0.0.1 twitter.com
server.rb
#!/usr/bin/ruby
require 'sinatra'
# twitter user
# http://twitter.com/status/user_timeline/$USER.json&callback=?
get '/status/user_timeline/:username.json', :host_name => /twitter\.com/ do
render_file "feeds/#{params[:username]}.json"
end
def render_file filename
output = File.open(filename).read
output = "#{params[:callback]}(#{output});" if params[:callback]
output
end