I have a problem with ember-cli build option.
While running server by ember s it's showing normal page with content, styles etc.
But now I want to build this app and put it on my website by ftp so i tried ember build which build my project into /disk folder but the index.html file doesn't contain the stuff from application.hbs + no styles from styles/app.css.
I'm new to ember. What am I doing wrong? Docs of ember are saying nothing about this.
All of your app is actually pulled in through external assets.
So, looking at your pre-built index.html, you'll see something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>emberclear</title>
{{content-for "head"}}
<link rel="stylesheet" href="{{rootURL}}assets/vendor.css">
<link rel="stylesheet" href="{{rootURL}}assets/emberclear.css">
{{content-for "head-footer"}}
</head>
<body class='has-navbar-fixed-top'>
{{content-for "body"}}
<script src="{{rootURL}}assets/vendor.js"></script>
<script src="{{rootURL}}assets/emberclear.js"></script>
{{content-for "body-footer"}}
</body>
</html>
my application is https://emberclear.io, named emberclear, so substitute your app name where applicable.
In the head, we see two link tags.
the first link is for all the styles that your addons may include (maybe such as material-ui, or bootstrap, or bulma).
The second link is your actual app styles. for me, emberclear.css includes everything from app.css, and all of its dependencies (I'm actually using scss, so I can include stuff via scss' #import).
Down in the body we see two script tags.
vendor.js will contain ember itself, and any addon dependencies that need to be included at run time, such as ember-paper's library of components.
emberclear.js includes your app -- routes, templates, etc.
This technique is common for all single page apps, and isn't exclusive to ember. anything built with react, or vue, has a similar pattern.
If you're wanting to have html and css be a part of your index.html, fastboot (https://www.ember-fastboot.com/) + prember (pre-rendered ember: https://github.com/ef4/prember ) may be of interest to you.
Hope this helps! :)
If something is wrong, feel free to copy your built index.html from dist (and maybe additional files as well).
Some follow up questions for you, depending on the issues you are running in to:
Are you getting any errors?
What happens when you try to open the dist/index.html file locally?
You're uploading the contents of dist to an ftp folder. This in-of-itself is fine, but has the web-sever been told to use that ftp folder for a website?
How are you attempting to access the ftp folder via browser?
Maybe there is a domain/path we could look at to see additional details?
Related
This R Shiny application appears to use DT to display its tables. At least in the source code I see:
<script src="plotly-binding-4.10.0/plotly.js"></script>
<link href="datatables-css-0.0.0/datatables-crosstalk.css" rel="stylesheet" />
<script src="datatables-binding-0.20/datatables.js"></script>
<link href="crosstalk-1.2.0/css/crosstalk.min.css" rel="stylesheet" />
<script src="crosstalk-1.2.0/js/crosstalk.min.js"></script>
It also has a "CSV" button to download the data:
How do I download the data from this website myself without clicking? I suppose the button runs some javascript, which makes a network call, but the "network" tab of the chrome debugger doesn't show any activity.
Ideally I could find a URL to the data, and then I could use the language of my choice (e.g., wget, curl, python, ..).
Looks like the raw data are coming from here via the project github. Seems like git pull could do it for you pretty easily.
https://github.com/Metropolitan-Council/covid-poops/blob/main/R/d_covid_cases.R
https://static.usafacts.org/public/data/covid-19/covid_confirmed_usafacts.csv?_ga=2.86006619.233414847.1642517751-2016304881.1642174657
And the other data are in this repo.
https://github.com/Metropolitan-Council/covid-poops/tree/main/data
I was able to use the python requests library to pull the raw data.
import requests
x = requests.get('https://static.usafacts.org/public/data/covid-19/covid_confirmed_usafacts.csv?_ga=2.86006619.233414847.1642517751-2016304881.1642174657')
print(x.text)
Edit: It looks like the shiny data are coming from here. I would just grab them via git. The github readme states, "The Shiny app is located in ./metc-wastewater-covid-monitor. /data contains relevant CSV data and /www contains CSS, HTML, and relevant font files the app needs upon running."
https://github.com/Metropolitan-Council/covid-poops/tree/main/metc-wastewater-covid-monitor/data
You can write a script to use a headerless browser to navigate to the page and download the file. Selenium is the usual first choice for this kind of work.
I saw some examples,bu it don't solve my problem!
Any help will be Appreciated....
As you already have the files locally in the static folder, you can just use them in the html templates, for example:
{% load static %}
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
CDNs, or content delivery networks, are code files hosted on the web that you can include in your project. Using a CDN is the fastest way to get set up with Bootstrap.
Find a CDN for Bootstrap. MaxCDN hosts the latest version:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Simply include the code above in your HTML head element and you will be good to go!
Another option is to download your own copy of Bootstrap and integrate it into your project structure.
I have solved this problem ,the version of the Django is 1.11. I check the Django website,it told me I must build files like this and set setting.py like this.But thanks for all of you!
enter image description here
The dart-polymer transformer assumes that your html are static assets. But I want my html to be dynamically generated server-side. The reason for this is that I want to build a multi-page web-app (or perhaps I should call it a multi-app web-site), and use server-side templating to keep the page structure between pages.
Is there a way to use dart-polymer without using the "compiled" html produced by the polymer transformer? Ideally I want to serve a page like this from the server:
<!DOCTYPE html>
<html>
<head>
<script src="packages/browser/dart.js"></script>
<script type="application/dart"
src="packages/web_components/webcomponents.dart"></script>
<title>Films</title>
<link rel="stylesheet" href="style.css"/>
<link rel="import" href="player/film_player.html"/>
<link rel="import" href="filmlist/film_list.html"/>
</head>
<body>
<film-player id="player"></film-player>
<film-list href="/api/movies"></film-list>
<script type="application/dart" src="main.dart"></script>
</body>
</html>
I know it is not supported having dart.js at the top, but it would be nice if dart.js did as webcompontents.dart.js need to run before the html import tags. At least I guess it does.
I really would like to avoid all the javascript and css inlining done by polymer transformer.
Polymer.dart doesn't support that scenario.
I'm not sure I understand your multi-page attempt. Dart is much better used for single-page application where you dynamically change what is shown at the current page. If you navigate to other pages a whole new Dart application is loaded and you don't have access to variables of the previous page and it is slow because Dart has some overhead and that only pays off if you stick to the one page.
A typical Dart application is built so that the client is basically an entire application that communicates with one or more servers but only sends and receives data but not application logic or views (except for very specific use cases).
Dart supports lazy loading to not load the entire application at once but not yet for Polymer.
Currently using RiotJS and Mocha for unit testing. Was wanting to know if I can use a headless browser webkit like PhantomJS & CasperJS to do additional tests on my RiotJS tags/pages. Up to now all my attempts to load the tags/pages and perform queries on the document have failed. Would appreciate any samples/links.
Thanks
Updated:
querySelector fails for '#testId', but succeeds for 'testId2'.
Extract from my unit test:
page.open('http://localhost/src/default.html', function (status) {
var test = document.querySelector("#testId"); // returns undefined
}
<!-- html page -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Riot.js Example</title>
</head>
<body>
<!-- mount points -->
<spinner data-url="./data.json" data-sourceId="instance1" data-model="myModel" id="testId"></spinner>
<imageoutput data-sourceId="instance1" data-model="myModel"></imageoutput>
<div id="testId2">this content</div>
<!-- mount the same way -->
<!--[if lt IE 9]>
<script src="../dist/scripts/es5-shim.js"></script>
<script src="ie-stuff.js"></script>
<![endif]-->
<script src="../dist/scripts/require.js" data-main="./main"></script>
</body>
</html>
Patrick,
It would be nice you better specify which test objectives you want to do, what to do on each page to see if the CasperJS / PhantomJS realize do it!
The CasperJS, working with the PhantomJS can work independently and I confess that today, any automation project pages or testing, I use them only and give the trick!
For a layout test (images, fonts, CSS), you can study the PhantomCSS, but if your goal is to navigate, click, test elements and even download archive (assuming avoid URLs with Silverlight, Java ... the CasperJS will give account to do anything you want ... and the returns you can get at log.xml to treat it in any other tool or system.
I'm finishing my new site and it, post several tutorials and tips regarding the CasperJS and PhantomJS ... and in the future, perhaps a course ...
If you want you can find me on facebook, twitter, github ... post there when everything is online.
I have had some success with using Protractor and Karma with riotjs. Granted we used RiotTS for the project, but the principles remain the same.
Although Karma and Protractor are typically used for commonly used testing angular applications they are agnostic.
There is tons of information out there, and is widely supported.
From the source I can see you are probably doing something asynchronous, (data-url="./data.json") which will mean you need to raise a flag in your app that the data is loaded or page is ready.
You can always introspect riot by doing document.querySelector('imageoutput')._tag to the investigate the state of your riot tags.
I had a favicon working for a while on my index template, but not any any other template, and now even my index template won't show it.
I'm just in development, so I'm using ember server.
index.html
<link rel="icon" href="favicon.ico">
Just throwing around my favicon to see if it shows up anywhere, I now have it in the following locations:
app/
public/
public/assets
I think this should be very straightforward, especially since the index page doesn't change, just get's new stuff loaded into its outlets, so I can't figure out why it can't find my favicon file.
When running ember server, where actually is the / root pointing to?
If you keep the favicon file in public/assets/ you can reference it like this:
<link rel="icon" href="/assets/favicon.ico">
The Ember CLI docs have a good section on this
You could also check out ember-cli-favicon.
It's an addon that takes your source public/favicon.png and automatically outputs all the different favicon formats and sizes for different devices, as well as injects the appropriate HTML into your index.html file as part of the build process.