I am trying to implement the front-end of a very large Python project with React.
It seems that most of the tutorials ask that we use Node to access the packages, is there any way to get around without them?
Initially I thought I could use it similarly to bootstrap or jquery where I just download the files or use the CDN and tag them in the HTML file, but it is not working.
Where do I go from here? Is there an easy way for me to install React?
Thanks!
Edit: I should probably add the code of what I am currently doing. I have tried to access the files which are on react's website, but nothing seems to be working, and from what I read in other questions and tutorials, they always ask to install via npm to make it all work, or so it seems...
<div id='app'></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/react#15.3.1/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.3.1/dist/react-dom.js"></script>
<script type="text/babel" src="//cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/babel">
var React = require ('react');
var ReactDOM = require ('react-dom');
var Test = React.createClass({
render: function(){
return(<h1>it is working! </h1>);
}
});
ReactDOM.render(<Test />, document.getElementById('app'));
You can certainly use React with your own flavor of Python framework (Tornado, Flask, Django, etc.). In the final deploy, you don't have to have any Node dependencies. I've run Tornado with React and just used NPM and webpack locally to manage package dependencies and trans-compile.
Related
I am trying to get HTML/webpage interface to run a python script I wrote that generates a graph and saves it in a local directory. I would like to click a single button and have the python code run, generate the graph and save it in a folder which then HTML could embed it on the HTML page. My issue is this code isn't working, the code is not run and no new graph is generated. Both the HTML and Python file (Create_Chart.py) are in the same folder.
Python code
globals().clear()
import numpy as np
import matplotlib.pyplot as plt
import os
rand=np.random.normal(100,1,size=[100,1])
chart=plt.plot(rand)
plt.savefig(r'C:\Users\...\example_chart.png')
HTML/Javascript code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="button" id='script' name="scriptbutton" value=" Run Script " onclick="goPython()">
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
function goPython(){
$.ajax({url: "Create_Chart.py",context: document.body}).done(function() {alert('finished python script');;});
}
</script>
</body>
</html>
I am trying to follow the example from this other stackoverflow thread. What am I doing wrong?
How can I execute a python script from an html button?
The javascript code is being called from the following link 'http://code.jquery.com/jquery-3.3.1.min.js'. Do I need to install Jquery on my local computer?
You'll need a webserver software (as in nginx) which understands how to run python scripts (as in a WSGI application). The script then needs to be something that understands HTTP. Your script needs then to answer with an HTTP response.
Since you're asking a question on that level, these are many concepts. I suggest you to watch into Django or FastAPI (Python web frameworks; google them). Those come with inbuild test webservers and get you started.
I plotted a bunch of things in a dash layout. I want to save them to an html file so I can look at them later. when I reopen the saved html file, I first see everything correctly. However, within <1s, the page goes blank and I get an error: “Error loading layout”. (see gif below)
How can this be fixed?
Thanks!
This solution is not fully working:
You have to save your Webpage complete.
To prevent the javascript creating any errors
i have removed the bundle(2).js file.
This file contains the function dash_renderer which tries to interact with the server and creates issues.
<footer>
<script id="_dash-config" type="application/json">{"url_base_pathname": "/", "requests_pathname_prefix": "/"}</script>
<script src="./Dash_files/react.min.js"></script>
<script src="./Dash_files/react-dom.min.js"></script>
<script src="./Dash_files/bundle.js"></script>
<script src="./Dash_files/plotly-1.38.0.min.js"></script>
<script src="./Dash_files/bundle(1).js"></script>
<!-- <script src="./Dash_files/bundle(2).js"> --></script>
</footer>
The result is the same page as you can see for ~1s.
Big disadvantage: The interactivity from plotly is lost.
A Dash app layout is serialized as JSON and served to the front-end by the Dash server (an extension of a Flask server).
All Dash components included in your layout are bundled as JS/CSS files. These bundles are also served by the Dash server to the front-end.
Without the server, there is no one to send JSON, JS, CSS bundles to the front-end, so nothing will be rendered.
I'm not sure why you can see your app for a brief moment. My guess is that Dash saves a PNG image of your app every time you run it. Think of it like a splash screen you see before the real, reactive app shows up.
Have a look at this high-level overview on how Dash works under the hood.
I'm using custom fonts from Pixeden, which are similar to FontAwesome. For some reason, the custom font-faces are not rendering, though I've placed all of the necessary files in my static folder. How do you get custom fonts working on Heroku with Python?
I'm using Django Storages, Django Pipeline, and Amazon S3.
I'll reply because I have had this problem lately and I resolved it. If you are using a font for example from googleapis in your html page, just remove http: at the beginning, so inside <head> instead of:
<link href="http://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
use:
<link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
This is an old question, but it might benefit someone who stumbles upon it:
The issue here is that you cannot import the fonts with good old insecure http. It will work for your local enviroment, but not on Heroku.
You should use https instead!
Do it like this:
<link href="https://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
I have a bigger project to handle, so this is what I want to do:
I have a Server with an MySQL database and Apache webserver running on. I save some machine information data in the database and want to create a web app to see, e. g. if the machine is running.
The web app should be designed responsive, i. e. changing design in accordance to the screen resolution of the current used device. This is important because the app will be used from smartphones and tablets mainly, but should also work on a normal pc.
I wrote a Python programm for my machine to get the data, and another Python programm on my server receiving information and saving in the database.
So my job now is to create the "responsive website" for my smartphone etc.
Then I want to broadcast this with my webserver.
Another Point is, that the web app should be build dynamically.
If I add another machine to my database, it should appear on my web app to be clickable and then show the related information.
First I thought about doing this in HTML5 and CSS3, with the use of jQueryMobile.
But I never used javascript. I'm just experienced in the "old" HTML and CSS.
Is Django a better choice, since I'm quite experienced in Python?
Or do I need both perhaps?
I haven't worked with any webframework yet, please help me choosing.
Or do I need one at all?
It looks like your server layer is OK for getting server informations and storing informations in database. Done with python.
And now, if I can resume, you need :
a reponsive web client
notification features
dynamically able to display new set for html elements
Based on this, I doubt in the fact that you will find a complete already packaged solution. Django should have this kind of features but it is not my favorite approach for such custom requirements.
If I have to do this I would use :
NodeJS for serverside code managing notifications
AngularJS for clientside managing client (!) and clean dynamic DOM manipulation with directives.
CSS Framework like Foundation or Bootstrap where responsive is native
What I would do is :
Init Phase
install nodejs and yeoman
initialize an angular app
write basic nodeJS server with a basic HTTP service
test your HTTP service with curl & your app with chrome or FF
Integration Phase
write basic angular HTTP call to this service
add communication between Node and Python (See
Combining node.js and Python
or something like this)
Client & Look and feel phase
add CSS framework for responsive and use it (navbar, table...)
look at Angular directives, develop a directive for adding new DOM elements
Finish / Clean your code and rollout
My solution now is as follows:
I will use the bottle microframework for generating serverside dynamic html-pages on request.
This will cause me to reload the page everytime I want to see new machine information, but for now it is enough for me.
Later I can add AJAX for live monitoring (I know this is javascript, I think I have to learn it anyway.)
Thanks for your solutions though.
You can put Bootstrap too for making responsive website.
Follow the code below code in your index.html in Django template.
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% block head %}
:
:
{% endblock %}
{% block body %}
.
.
.
{% endblock %}
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</html>
Does anyone know if it is possible to use Coffeescript on Google App Engine? If so how can this be done with the app engine Python or Go platforms?
Coffeescript compiles to Javascript, which can be run in a web browser. In that case, App Engine can serve up the resulting javascript.
I don't know of any way to compile coffeescript to python, java or go though, so you can't use it as a server side language.
It's possible.
1. Script Tag Method
You may use the Coffeescript compiler:
http://coffeescript.org/extras/coffee-script.js
Add it into your page header:
<script type="text/javascript" src="/coffee-script.js" />
<script type="text/coffeescript" src="/your_script.coffee" />
Use this method for testing or lite-app
2. MediaGenerator for Django
If you use Django frameworks, this may be the best for you:
http://www.allbuttonspressed.com/projects/django-mediagenerator#coffeescript
It will compile your coffeescript and get things done for you!
final few words: I am newbie in development. I only can read JS but like Coffeescipt a lot. After a lot of exploration. I finally choose Ruby on Rails instead of Python on some frameworks. Because asset pipeline is less-config and easy to learn for me. BTW, Python is still my favour language over Ruby XD