I would like to pass a variable from django to react app. I know I can do it by passing window object from html page but I would like to know if its possible to do it using environment variable. I came across this link How can I pass a variable from 'outside' to a react app? which mentions using .env file. Please advise on how it can be used with Django/Python setup.
Just render it into a script tag in your template:
<script type="text/javascript">
var globallyVisibleVar = {myVar}
</script>
But you will have to make sure, that the variable is JSON serialized. You could either write a template tag or JSON serialize it before passing it to the template context. Also make sure to use var and not const or let because they are block scoped and will not be globally visible in your react app.
As the documentation of create-react-app says:
The environment variables are embedded during the build time. Since Create React App produces a static HTML/CSS/JS bundle, it can’t possibly read them at runtime. To read them at runtime, you would need to load HTML into memory on the server and replace placeholders in runtime, just like described here. Alternatively you can rebuild the app on the server anytime you change them.
Since you do not want to rebiuld your whole JavaScript on every request you can't use that to share dynamic data between your server application (Django) and your client application (react).
So if you follow the link you will read this:
Injecting Data from the Server into the Page
Similarly to the previous section, you can leave some placeholders in
the HTML that inject global variables, for example:
<!doctype html>
<html lang="en">
<head>
<script>
window.SERVER_DATA = __SERVER_DATA__;
</script>
Then, on the server, you can replace __SERVER_DATA__ with a JSON of
real data right before sending the response. The client code can then
read window.SERVER_DATA to use it. Make sure to sanitize the JSON
before sending it to the client as it makes your app vulnerable to XSS
attacks.
Related
It is necessary to make a static application that uses a constant connection to the server to receive messages or updates the page in a period of time. With Django, python 2.7 and without js and jquery.
Just immediately do a page refresh by adding <meta http-equiv="refresh" content="0"> to the of your page. Then sleep instead of responding until you actually want to update the page.
Thats still a shitty hack and you should propably reconsider your design. Client-Side Updates and no JS doesn't mix.
I want to do something very simple that I am a little surprised people are not talking about more. I would like to generate on my server my own index.html from the files that are created from building ember for production. I use ember for part of my application and so when a certain URL is hit, I would then like my ember app to take over. I have tried generating my own index.html by changing the flag storeConfigInMeta in ember-cli-build.js.
storeConfigInMeta: false
This gets rid of the ember app having its configuration stored in a meta tag but the app still does not work and gives the error,
Uncaught ReferenceError: define is not defined
I have the latest version of ember and I am building ember with the command,
ember build --env production
My server generated index.html looks identical accept for the integrity attributes set on the include js and css scripts. Is their anything I am missing about approaching ember this way? Should I not be trying to do this?
when a certain URL is hit, I would then like my ember app to take
over.
You need to configure app server to return index.html file for the certain URL.
Generally, it's not required you to create your own index.html.
May be you can check ember-islands addon to include Ember components anywhere on a server-rendered page.
I made a mistake. I was grabbing the production assets with a regular expression with my server and generating my index.html file with these assets in the wrong order. To anyone looking to do this, it is very possible and is more preferable in my opinion to using the generated index.html unless you are using ember for your entire site's routing. However do use the setting in ember-cli-build.js,
storeConfigInMeta: false
This will make it so your ember app stores it's settings in javascript instead of in a tag. This is required for generating your own index.html file.
I got a job on a freelance site to make a calculator where the user enters values into text fields. The problem is all they told me is they need to be able to publish it in html. I'm used to using asp.net and c#. I've never used javascript but it seems like that maybe what I need to use. is there any way I could make an app with java or c# and be able to add it to html?
I would use HTML and javascript, all you need to do is type <script> *javascript Here* </script>. I currently have a web app that calculates how much insulin a diabetic will need. Post a comment and ill send you a link to it for reference. It's as simple as
<script>
var x = document.getElementById('textX').value;
var y = document.getElementById('textY').value;
var z = x + y
document.getElementById('labelA').innerHTML = z;
</script>
<body>
<input type="text" ID="textX" onchange="valuechanged();" /> +
<input type="text" ID="textY" onchange="valuechanged();" /> = <br>
<label ID="labelA"></label>
That will make a value + value calculator. You can develop this code to be as complex as you want. Also remember to add the header tags ect.
Java / C# are SERVER technologies, HTML / JavaScript are CLIENT technologies. If the requirement is that the page be only a basic html publish (no server technology present) then JavaScript is your only choice. ASP.net or Java are basically programs on the server which decide what HTML to render dynamically, instead of an .html page which is static content.
Once the HTML is downloaded, then JavaScript can be used to manipulate the Document Object Model (DOM) to change the HTML that is rendered from memory. To do calculations in an HTML/JavaScript application, the browser is doing the computation and replacing the information without ever communicating with a server, asking for a new page or for more information, etc. In contrast, a C# application would be running on the server, waiting for the browser to send something to calculate, then the server would do the calculations and send back a new page with the result.
There are hybrid options as well, so it's definitely not wasted effort to learn JavaScript.
I am using Django to create a small web app, however I do not know where i must put my HTML and JS files. I don't want to use the templateing system because I have no need to pass the values from Django directly to the HTML template, Instead the HTML will be static and I will fetch all the data necessary and send the data to be input back into the database using AJAX with Jquery.
My Question is where must I put my HTMl and JS files so they are accessible from the web browser and will be in the same directory so that I can send my ajax requests to something like
http://localhost:2000/webapp/RPC/updateitem/ (more stuff here)
and where the HTML files are
http://localhost:2000/webapp/index.html
Thanks,
RayQuang
You let your main webserver (the one you're running django on) deal with the static files. In most cases this means that you simly server the files through apache (or lighttpd or cherrypy or whatever). Django is only ment for the rendering of dynamic things and thus should not be used for serving static files.
If you're running from a development server (which I can't recommend), this tutorial will help you through setting it up: Serving static files
I am integrating WebKit (via Qt) into an application. Instead of having WebKit retrieve scripts, CSS files and images via URLs, I want my application to provide them (e.g. retrieved from a database).
For example, a "regular" web page may contain this tag:
<IMG src="photos/album1/123456.jpg">
Instead of WebKit fetching this image from a server or the file system, I would prefer some kind of callback that allows my application to provide this image.
How can I accomplish this?
Maybe this is a bit overkill, but maybe it could work for you.
Simply have your application act as a HTTP server. Then you could have paths like this:
<IMG src="http://localhost:73617/photos/album1/123456.jpg">
Where 73617 is a random port, you can have your application listen on another port. Then, when your app retrieves the request for the image, it fetches it from wherever you want it to. It still involves a a server but at least you have complete control on where you get your resources from.
So, WebKit sees the url in the image, sends a request, your App gets the request, reads the resource, returns the resource. So basically you are still getting it from your App.
Hope this helps.