empty page (root div) when using streamlit - streamlit
I want to run a streamlit application and for starting I run "streamlit hello"
on the console it shows:
my .streamlit/config.toml is:
[server]
enableCORS = false
enableXsrfProtection = false
and when I call it by curl the root div is empty:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/>
<link rel="shortcut icon" href="./favicon.png"/>
<title>Streamlit</title>
<script src="./vendor/viz/viz-1.8.0.min.js" type="javascript/worker"></script><script src="./vendor/bokeh/bokeh-2.4.1.min.js"></script><script src="./vendor/bokeh/bokeh-widgets-2.4.1.min.js"></script><script src="./vendor/bokeh/bokeh-tables-2.4.1.min.js"></script><script src="./vendor/bokeh/bokeh-api-2.4.1.min.js"></script><script src="./vendor/bokeh/bokeh-gl-2.4.1.min.js"></script><script src="./vendor/bokeh/bokeh-mathjax-2.4.1.min.js"></script>
<link href="./static/css/5.71be5c0a.chunk.css" rel="stylesheet">
<link href="./static/css/main.b46f6fce.chunk.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>!function(e){function t(t){for(var c,n,a=t[0],d=t[1],u=t[2],i=0,s=[];i<a.length;i++)n=a[i],Object.prototype.hasOwnProperty.call(f,n)&&f[n]&&s.push(f[n][0]),f[n]=0;for(c in d)Object.prototype.hasOwnProperty.call(d,c)&&(e[c]=d[c]);for(l&&l(t);s.length;)s.shift()();return o.push.apply(o,u||[]),r()}function r(){for(var e,t=0;t<o.length;t++){for(var r=o[t],c=!0,n=1;n<r.length;n++){var d=r[n];0!==f[d]&&(c=!1)}c&&(o.splice(t--,1),e=a(a.s=r[0]))}return e}var c={},n={4:0},f={4:0},o=[];function a(t){if(c[t])return c[t].exports;var r=c[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,a),r.l=!0,r.exports}a.e=function(e){var t=[];n[e]?t.push(n[e]):0!==n[e]&&{7:1}[e]&&t.push(n[e]=new Promise((function(t,r){for(var c="static/css/"+({}[e]||e)+"."+{0:"31d6cfe0",1:"31d6cfe0",2:"31d6cfe0",6:"31d6cfe0",7:"f5138d60",8:"31d6cfe0",9:"31d6cfe0",10:"31d6cfe0",11:"31d6cfe0",12:"31d6cfe0",13:"31d6cfe0",14:"31d6cfe0",15:"31d6cfe0",16:"31d6cfe0",17:"31d6cfe0",18:"31d6cfe0",19:"31d6cfe0",20:"31d6cfe0",21:"31d6cfe0",22:"31d6cfe0",23:"31d6cfe0",24:"31d6cfe0",25:"31d6cfe0",26:"31d6cfe0",27:"31d6cfe0",28:"31d6cfe0",29:"31d6cfe0",30:"31d6cfe0",31:"31d6cfe0",32:"31d6cfe0",33:"31d6cfe0",34:"31d6cfe0",35:"31d6cfe0",36:"31d6cfe0",37:"31d6cfe0",38:"31d6cfe0",39:"31d6cfe0",40:"31d6cfe0",41:"31d6cfe0",42:"31d6cfe0"}[e]+".chunk.css",f=a.p+c,o=document.getElementsByTagName("link"),d=0;d<o.length;d++){var u=(l=o[d]).getAttribute("data-href")||l.getAttribute("href");if("stylesheet"===l.rel&&(u===c||u===f))return t()}var i=document.getElementsByTagName("style");for(d=0;d<i.length;d++){var l;if((u=(l=i[d]).getAttribute("data-href"))===c||u===f)return t()}var s=document.createElement("link");s.rel="stylesheet",s.type="text/css",s.onload=t,s.onerror=function(t){var c=t&&t.target&&t.target.src||f,o=new Error("Loading CSS chunk "+e+" failed.\n("+c+")");o.code="CSS_CHUNK_LOAD_FAILED",o.request=c,delete n[e],s.parentNode.removeChild(s),r(o)},s.href=f,document.getElementsByTagName("head")[0].appendChild(s)})).then((function(){n[e]=0})));var r=f[e];if(0!==r)if(r)t.push(r[2]);else{var c=new Promise((function(t,c){r=f[e]=[t,c]}));t.push(r[2]=c);var o,d=document.createElement("script");d.charset="utf-8",d.timeout=120,a.nc&&d.setAttribute("nonce",a.nc),d.src=function(e){return a.p+"static/js/"+({}[e]||e)+"."+{0:"4d7af8be",1:"4b5a71cb",2:"8a8e4219",6:"673cfb07",7:"0f1d8953",8:"36495cde",9:"02c82aab",10:"58851391",11:"bd7dd145",12:"57852bcf",13:"42d52fc0",14:"7182e5ec",15:"353742a2",16:"b6f48f03",17:"0af08cc1",18:"b18472bd",19:"92c926e5",20:"75745840",21:"beab59e4",22:"107c7370",23:"9e3cb6aa",24:"0403f5ad",25:"e234116c",26:"4e8bc8a0",27:"a8f1482c",28:"7f928f5b",29:"907c8145",30:"90e1d1d9",31:"3d20a50e",32:"7f0c341b",33:"bb7d120d",34:"ee597234",35:"a376c150",36:"aeccf149",37:"02beb24d",38:"e18dc576",39:"fee314ac",40:"a9dc6cc4",41:"ea0c3f16",42:"81a04ba6"}[e]+".chunk.js"}(e);var u=new Error;o=function(t){d.onerror=d.onload=null,clearTimeout(i);var r=f[e];if(0!==r){if(r){var c=t&&("load"===t.type?"missing":t.type),n=t&&t.target&&t.target.src;u.message="Loading chunk "+e+" failed.\n("+c+": "+n+")",u.name="ChunkLoadError",u.type=c,u.request=n,r[1](u)}f[e]=void 0}};var i=setTimeout((function(){o({type:"timeout",target:d})}),12e4);d.onerror=d.onload=o,document.head.appendChild(d)}return Promise.all(t)},a.m=e,a.c=c,a.d=function(e,t,r){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(a.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var c in e)a.d(r,c,function(t){return e[t]}.bind(null,c));return r},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="./",a.oe=function(e){throw console.error(e),e};var d=this["webpackJsonpstreamlit-browser"]=this["webpackJsonpstreamlit-browser"]||[],u=d.push.bind(d);d.push=t,d=d.slice();for(var i=0;i<d.length;i++)t(d[i]);var l=u;r()}([])</script><script src="./static/js/5.c7ec7886.chunk.js"></script><script src="./static/js/main.3fe58c98.chunk.js"></script>
</body>
</html>
and of course in the browser I get an empty page.
a simple run, what do I miss here?
thank you...
after a lot of struggles I finally found the problem.
I had a redirection on my server, and in the WWW/.htaccess I wrote:
RewriteEngine on
RewriteBase /
RewriteRule ^lms/stream(.*?)$ ws://<HOST>:<PORT>/stream$1 [P]
RewriteRule ^lms/(.*)$ http://<HOST>:<PORT>/ [P]
instead of:
RewriteEngine on
RewriteBase /
RewriteRule ^lms/stream(.*?)$ ws://<HOST>:<PORT>/stream$1 [P]
RewriteRule ^lms/(.*)$ http://<HOST>:<PORT>/$1 [P]
Related
Why does my CSS not work when I pass two parameters to app.get?
I'm creating an express app and my CSS code stops working whenever i add an ":ID" parameter to the URL. I know it's a filepath issue because bootstrap still comes in fine, but on the page with the ID parameter it shows this: "Refused to apply style from 'https://XXXXXX.c9users.io/unapproved/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."
main.css is in my /public folder, but it looks like it's looking in a folder titled "unapproved".
I've tried changing the routing order, i've tried changing my app.use(express.static(__dirname)) code.
here's my app.get:
app.get("/unapproved/:id/", function(req, res){
var invoiceID = mongoose.mongo.ObjectId(req.params.id);
InvoiceObj.findById(invoiceID,function(err,foundInvoice){
if(err){
console.log(err);
}else{
res.render("invoiceScreen",{invoice:foundInvoice});
}
});
here's my html:
<% include partials/header %>
<h1><image src="<%= invoice.imageUrl %>"</h1>
<% include partials/footer %>
here's my header:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Invoice system</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src='https://code.jquery.com/jquery-2.1.4.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
I think change to css path absolute path will solve your problem <link rel="stylesheet" href="/main.css">
In this kind of situation, it's better to use virtual path for your static files because relative path doens't work very well; like:
Assuming folder structure:
app.js
public
| +-- main.css
app.use('/static', express.static(__dirname + "/public"))
And in you html, make path absolute
<link rel="stylesheet" href="/static/main.css">
instead of using ./ or ../ before your assest(images / css / js ) for example. ./css/style.css or css/bootstrap.css ../images/example.png you can use / for example /css/style.css or /css/bootraps.css /images/example.png / will tell your app to look from root dir.
Vue Firebase Hosting App Built Files Are Incorrect
I am working on a Firestore, Vue project and having an issue with building my project. Running the non-built files on a local server works just fine and after running the build command, the files all appear to be correct. However, after uploading the files to Firebase (or creating a local server using the built files using the firebase serve command), it just shows a blank page. So I inspected the files and the css and js files are the exact same as the HTML file.
I know that this guy had the same issue, Upload to Firebase Hosting not working correctly, but I have gone through every file I feel like may be the culprit and still cannot find where the issue is — although that may just be due to my lack of knowledge in how webpack works. I think it may be some misconfiguration in the vue.config.js file but not sure. I would appreciate any help in getting my project hosted! Thanks!
Here is my file structure:
- dist
- src
- assets
- css
- img
- js
- favicon.ico
- index.html
- public
- index.html
- src
- App.vue
- main.ts
- .firebaserc
- firebase.json
- package.json
- vue.config.js
Compiled index.html
<!DOCTYPE html>
<html lang=en>
<head>
<meta http-equiv=Content-Type content="text/html; charset=UTF-8">
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=msapplication-tap-highlight content=no>
<meta name=description content="Steel Tech of the Ozarks designs & manufactures pre-engineered metal buildings, driven by an intentional, no-compromise passion for excellence.">
<meta name=keywords content=steel,building,metal,structural,design,manufacture>
<title>Company Name</title>
<link rel="shortcut icon" href=../src/assets/favicon/favicon.ico>
<meta name=theme-color content=#6e8995>
<link as=style href=/dist/src/assets/css/app.64e0dd85.css rel=preload>
<link as=style href=/dist/src/assets/css/chunk-vendors.9e123139.css rel=preload>
<link as=script href=/dist/src/assets/js/app.00d6273a.js rel=preload>
<link as=script href=/dist/src/assets/js/chunk-vendors.90527da6.js rel=preload>
<link href=/dist/src/assets/css/chunk-vendors.9e123139.css rel=stylesheet>
<link href=/dist/src/assets/css/app.64e0dd85.css rel=stylesheet>
</head>
<body>
<noscript>
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id=app>
<script src=/dist/src/assets/js/chunk-vendors.90527da6.js></script>
<script src=/dist/src/assets/js/app.00d6273a.js></script>
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="msapplication-tap-highlight" content="no">
<title>Company Name</title>
<link rel="apple-touch-icon" sizes="180x180" href="../src/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="../src/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="../src/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="../src/assets/favicon/site.webmanifest">
<link rel="mask-icon" href="../src/assets/favicon/safari-pinned-tab.svg" color="#ff6600">
<link rel="shortcut icon" href="../src/assets/favicon/favicon.ico">
</head>
<body>
<noscript>
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<!-- Built files will be auto injected -->
<div id="app"/>
</body>
</html>
App.vue
<template>
<v-app>
<router-view/>
</v-app>
</template>
main.ts
import Vue from 'vue'
import App from './App.vue'
import router from '#/router'
import store from '#/store'
import '#/plugins/vuetify'
Vue.config.productionTip = false
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app')
.firebaserc
{
"projects": {
"default": "schedule-maxx"
}
}
firebase.json
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
vue.config.js
module.exports = {
runtimeCompiler: true,
lintOnSave: true,
productionSourceMap: false,
outputDir: 'dist',
assetsDir: 'src/assets',
baseUrl: process.env.NODE_ENV === 'production' ? '/dist/' : '/',
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8081',
changeOrigin: true,
pathRewrite: {
'^/api': '/api/v1'
}
}
}
}
}
With regards to your file structure, in particular:
dist
public
index.html
and to the fact that you rewrite to /index.html (cf. firebase.json file)
I think that your firebase.json file should start as follows. (However, since you don't show what's in the dist directory I am not 100% sure!):
{
"hosting": {
"public": "public",
....
}
}
and the static directory generated by webpack should also be deployed under the public directory. It is most probably under the dist directory for the moment.
It looks like I just had my vue.config.js file configured incorrectly. I changed the baseUrl field from '/dist/' to '.' and the file paths in the compiled files were correct.
nodejs/expressjs update(crUd) operation is not displaying css files
I am making a CRUD app in Nodejs/Expressjs, templating engine is EJS.
The idea for the update is display user_id from a database and when admin clicks on user_id it should redirect to edit_team.ejs page.
It is working fine but when it is redirecting to edit_team.ejs page, the css files are not getting load. I am getting below error
For every other .ejs files, all css files are loaded.
I have included 'public' folder in app.js file.
Code:
Folder Directory:
app.js:
app.use(express.static('app/public'));
view_team.ejs
<a class="button" href='/edit_team/<%= team[i].team_id %>'>
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
</a>
edit_team.js:
var express = require('express');
var path = require('path');
const { Client } = require('pg')
const connectionString = 'postgresql://localhost:5432/idid';
//router object
var router = express.Router();
router.get('/edit_team/:id', function(req, res){
res.render('login/edit_team');
});
module.exports = router;
edit_team.ejs (pasting only head section):
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
can someone please help me trying to figure out what is wrong here?
A URL such as /edit_team/23 serves up edit_team.ejs, which contains the relative path css/bootstrap.min.css. This is relative to the /edit_team path, so it'll be edit_team/css/bootstrap.min.css, which probably isn't what you want. You should be able to confirm this using your browser's dev tools. Look in the Network tab and check the paths for the files that aren't loading. Try using paths that aren't relative to the current path, such as: <link href="/css/bootstrap.min.css" rel="stylesheet"> Note the extra /.
Phpunit - Selenium2 - Wait for page to be completely loaded
I'm using phpunit with the extension of selenium 2 (Selenium2TestCase), for checking an interface of my website.
So my test page contains this :
testDisplay()
{
...
file_put_contents('/home/toto/www/screenshots/before.html', $this->source());
sleep(5);
file_put_contents(/home/toto/www/screenshots/after.html', $this->source());
$this->assertContains('toto42', $this->source());
...
}
Then when I execute :
$> phpunit testSelenium.php
I have 2 html files of my page, before the sleep(5) and after :
before.html :
<META charset="utf-8"/>
<META content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<TITLE>Test</TITLE>
<LINK href="/css/style.css" rel="stylesheet"/>
<LINK href="/css/bootstrap.css" rel="stylesheet"/>
<SCRIPT src="/js/jquery-1.7.1.min.js" type="text/javascript"/>
</HEAD></HTML>
after.html :
<META charset="utf-8"/>
<META content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<TITLE>Test</TITLE>
<LINK href="/css/style.css" rel="stylesheet"/>
<LINK href="/css/bootstrap.css" rel="stylesheet"/>
<SCRIPT src="/js/jquery-1.7.1.min.js" type="text/javascript"/>
</HEAD>
<BODY>
...
toto42
...
</BODY>
I don't understand why I have to put a sleep(5) to entirely load my page, did someone have an idea ?
And an other question what is the equivalent of clickAtAndWait (of PHPUnit_Extensions_SeleniumTestCase) for the Selenium2TestCase ?
Thanks in advance
I found an answer.
I'm looking for an HTML element in my page with a timeout and if it does not appear I wait with the function implicitWait();
testDisplay()
{
...
//I use 25000 for the timeout but anything else works too it depends on your loading page
$this->timeouts()->implicitWait(25000);
$this->assertContains('toto42', $this->source());
...
}
Linting Ajax URLs
I noticed a weird behaviour while testing linting Ajax URLs. A simple tech test can be found at http://jankrems.de/hashbang/#!/foo.php
When I lint http://jankrems.de/hashbang/foo.php directly, everything works fine: http://cl.ly/3f3t2c0i3M3t0x2Q1Z3l
When I lint the Ajax-Url http://jankrems.de/hashbang/#!foo.php there's some pretty strange output: http://cl.ly/3n3e0r1s122Q1L0U033k
I tried linting the Twitter hashbang-Urls and they were processed correctly. The code I used is pretty straight forward. In index.php there is a forward...
<?php
if(isset($_GET['_escaped_fragment_'])) {
Header( "HTTP/1.1 301 Moved Permanently" );
header('Location: /hashbang'.$_GET['_escaped_fragment_']);
die();
}
?>
And in foo.php I just output Open Graph tags...
<!DOCTYPE HTML>
<html prefix="og: http://ogp.me/ns#">
<head>
<meta property="og:title" content="Foo" />
<meta property="og:url" content="http://jankrems.de/hashbang/foo.php" />
<meta property="og:description" content="The foo to go to" />
<meta property="og:image" content="http://tailsmagazines.files.wordpress.com/2009/04/kitten.jpg" />
</head>
</html>
Maybe I'm just blind and missing something obvious.