How to deploy a Polymer dart application - deployment

I have a dart application using Polymer.dart, i replace the dart.js file by the boot.js (in my index.html), an now i want to deploy this application in order to have a working javascript one.
But, when i launch the build.dart, i have :
Total time spent on web/index.html -- 504 ms
Total time -- 555 ms
but nothing is created, no more "out" folder.
And when I do Pub Deploy, it create a "deploy" folder, but that version is not working (because the build.dart doesn't properly work i think).
Have you any idea?

Right now, it's a two step process. I suspect this will get easier. In the meantime:
Create a build.dart that looks like this:
import 'package:polymer/builder.dart';
main() {
build(entryPoints: ['web/index.html'], options: parseOptions(['--deploy']));
}
Take note, currently, a lot of warnings and hints are produced. You can ignore them for right now.

For the current version i have done these steps :
type on your console:
dart build.dart --deploy
dart2js out/web/index.html_bootstrap.dart -oout/web/index.html_bootstrap.dart.js
index.html:
<!DOCTYPE html>
<html>
<head>
...
<link rel="import" href="clickcounter.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</head>
<body>
...
<div id="sample_container_id">
<click-counter count="5"></click-counter>
</div>
</body>
</html>
build.dart:
import 'package:polymer/builder.dart';
main(args) {
build(entryPoints: ['web/aaa.html'],
options: parseOptions(args));
}

Related

Local module import tree possibility?

In my local package, there is a tree of modules, like this:
# source/main.py
from source import worker
def run():
return worker.func()
# source/worker.py
def func():
return 'hello'
I want to demonstrate this package with PyScript (before my package needs to be installed), but do not want to rewrite the whole package for the sake of PyScript. This "index.htm" calls the main.run(). It is OK until the main wants to import the worker module so that it can call its func().
<head>
..
<py-env>
paths:
- source/main.py
- source/worker.py
</py-env>
</head>
<body>
<py-script>
import main
main.run()
</py-script>
</body>
The "import worker" would work, but as I stated above, it is "from source import worker" and cannot be changed just to make it work in PyScript.
Could I define somehow that the root for the local module imports is above "source", and imports like "import source.module.py" should work?
It is not possible to do
from source import worker
because source is not a module, it is a folder. Pyscript is not same as python. The whole context is different. There is no need for it also. You can have it all together working and reachable if you declare nodes py-env and py-script like below.
index.html in application root folder:
<html>
<head>
<link rel="stylesheet" pyscript.css" />
<script defer src="pyscript.js"></script>
<!--<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js" onerror=scriptLoadFailure('pyscr ipt.js')></script> -->
<py-env>
paths:
./source/worker.py
./source/main.py
</py-env>
</head>
<body>
<py-script src="./source/worker.py"></py-script>
<py-script src="./source/main.py"></py-script>
</body>
</html>
The modules in py-env are declared with exactly 4 spaces indentation (no tab char) and starting from application root folder ( ./ ) folowed by subfolder and module. In body section both modules are declared as src attribute of py-script nodes. This way they are like unioned and operational without import one or other nor from one import something. You can just call the function from wherever you need to.
The modules are both in the source subfolder (though I prefer puting main in the app root along with index.html). There is just one change in main.py where I put the call of run() function for it was excluded from html.
Modules in ./source/ subfolder are
#
# source/main.py
def run():
return func()
run()
#
#
# source/worker.py
def func():
return 'hello'
Open it in browser and you'll see hello (tested with Chrome & Edge) meaning that run() command from main.py has called func() function from worker.py without importing anything.
And if you realy need to keep those imports all I can suggest is to do a replace of those imports to end up like below. It can be done with any editor and it will work both with python and pyscript.
try:
from source import worker
except:
pass
Regards...
Since the current PyScript does not do such, I created a patched version and proposed the PyScript project to pull it into a future version. See the ticket with my comment and the attached zip containing the solution:
Add Local Package Loading to Py-Env #519

React: 'paypal' is not defined

I copied this code straightly from the official page of PayPal with correct client credentials. Here is my code:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<script src="https://www.paypal.com/sdk/js?client-id=SECRET"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
YourComponent.js
import React from "react";
import ReactDOM from "react-dom"
const PayPalButton = paypal.Buttons.driver("react", { React, ReactDOM });
class YourComponent extends React.Component {
createOrder(data, actions) {
return actions.order.create({
purchase_units: [
{
amount: {
value: "135",
},
},
],
});
}
onApprove(data, actions) {
return actions.order.capture();
}
render() {
return (
<PayPalButton
createOrder={(data, actions) => this.createOrder(data, actions)}
onApprove={(data, actions) => this.onApprove(data, actions)}
/>
);
}
}
export default YourComponent;
App.js
import logo from './logo.svg';
import './App.css';
import YourComponent from './YourComponent';
function App() {
return (
<div className="App">
<YourComponent/>
</div>
);
}
export default App;
When I run it, it says PayPal at line 4:22 is not defined. I guess it is a silly error or might be my misunderstanding on the API too. Can anyone tell me what I can do?
https://www.paypal.com/sdk/js?client-id=SECRET
If you are actually using your REST App's API secret as part of the script src, that would be invalid. The REST App's client-id value must be passed here.
Load the app and check the browser's Developer Tools to make sure the script is actually being loaded successfully.
Instead of paypal.Buttons.driver you can try window.paypal.Buttons.driver
Alternatively, use the official react-paypal-js module instead.

Trying to add this script tag to my next.js app but am having Trouble

To start using EmailJS on your website just paste the following code snippet before closing tag, with the correct user ID:
Then i have to import it in index.html file but there isn't a index.html can someone please help me
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/emailjs-com#2/dist/email.min.js">
</script>
<script type="text/javascript">
(function(){
emailjs.init("YOUR_USER_ID");
})();
</script>
return (
<ProductProvider>
<div className="main-wrapper">
<Head>
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/emailjs-com#2/dist/email.min.js">
</script>
<script type="text/javascript">
(function(){
emailjs.init("YOUR_USER_ID")
})();
</script>
</Head>
<BusinessTheme ThemeClass="demo1" />
</div>
</ProductProvider>
);
}
const DynamicComponentWithNoSSR = dynamic(
() => import('../node_modules/emailjs-com'),
{ ssr: false }
);
)
How do i find Email js file to import?
I am getting error that emailjs is undefined
Next.JS is 2 side running (Server and client sideded). You can install emailJs on dependency instead on cdn. (Maybe cause of occurrence emailJS undefined)
$ npm install emailjs-com --save
And if emailJS running on client side (javascript), u can use dynamic import on next js and disable ssr Dynamic Import NextJS.
Thanks

VSTS Extension build summary section

I have added a custom summary section to "Build Summary" section through a VSTS extension.
I'm getting following error in VSTS Build summary section on build completion.
"VSTS Extension by ABC failed to load.Learn More about this extension, including available support options."
Contribution:
"id": "abcfef-build-status-section",
"type": "ms.vss-build-web.build-results-section",
"description": "ABC Scan Summary",
"targets": [
".build-info-tab",
"ms.vss-build-web.build-results-summary-tab"
],
"properties": {
"name": "ABC Summary Section",
"uri": "buildstatus.html",
"order": 20,
"height": 500
}
Scope:
"scopes": [
"vso.build",
"vso.build_execute"
]
Html page (buildstatus.html):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello World</title>
<script src="scripts/VSS.SDK.js"></script>
</head>
<body>
<script type="text/javascript">VSS.init();</script>
<h1>Hello World</h1>
<script type="text/javascript">VSS.notifyLoadSucceeded();</script>
</body>
</html>
Please help to resolve this.
Thanks in advance.
This is usually caused by the VSS.SDK.js file cannot be loaded when launching the extension, please check the things below:
The src path "scripts/VSS.SDK.js" in the html page is correct.
The src path and file is included in "files" section in "vss-extension.json" file.
I found the issue by analyzing console logs of Chrome browser. It seems my organization firewall is blocking the API call to retrieve resources. :)
https://xxxxxxxx.gallery.vsassets.io/_apis/public/gallery/publisher/xxxxxxxxxxxxxxxxxxxxxxxx=/Extension/status.html Failed to load resource: net::ERR_CONNECTION_CLOSED
Thanks-
It seems like this error may occur due to various reasons. In my case I forgot to include scripts folder into "files" in the manifest:
"files": [
{
"path": "scripts",
"addressable": true
}, ...
Hope someone will find it helpful.
As we know, there is an existing extension sample for Build Results Enhancer, and the source code can be found on GitHub: https://github.com/Microsoft/vsts-extension-samples/tree/master/build-results-enhancer
It seems there is nothing wrong with Contribution, you may focus on your Html page, and try to add usePlatformScripts: true in your HTML page to see whether the issue persists:
<head>
<title>Hello World</title>
</head>
<body>
<script src="scripts/VSS.SDK.js"></script>
<script type="text/javascript">
VSS.init({
usePlatformScripts: true
});
</script>
<h1>Hello World</h1>
</body>
</html>

Deploy VisiFire On JBoss Portal

I am trying to improve my JBoss Portal dashboard using some analytical charting tools then I found VisiFire. So I started to investigate how I could deploy a simple VisiFire page as a portlet onto JBoss Portal dashboard. Below is what I did:
- I created a dummy portlet (display "Hello World" on the index page, index.html)
- Replaced the content of the index.html with a simple chart which would be rendered by VisiFire:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Visifire Charts</title>
<script language="javascript" type="text/javascript" >
</script>
</head>
<body>
<!-- To embed in existing html copy the code below -->
<script type="text/javascript" src="Visifire.js"></script>
<div id="VisifireChart">
<script language="javascript" type="text/javascript">
var chartXmlString = ''
+'<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" Width="500" Height="300" BorderThickness="0" Theme="Theme1" ToolBarEnabled="True" >'
+'<vc:Chart.Titles>'
+'<vc:Title Text="Global Fortune 5 Companies 2007" />'
+'</vc:Chart.Titles>'
+'<vc:Chart.AxesX>'
+'<vc:Axis Title="Companies" />'
+'</vc:Chart.AxesX>'
+'<vc:Chart.AxesY>'
+'<vc:Axis Title="Revenue in Million dollars" AxisType="Primary" />'
+'</vc:Chart.AxesY>'
+'<vc:Chart.Series>'
+'<vc:DataSeries RenderAs="Column" AxisYType="Primary" >'
+'<vc:DataSeries.DataPoints>'
+'<vc:DataPoint AxisXLabel="Wall-Mart" YValue="351139" />'
+'<vc:DataPoint AxisXLabel="Exxon Mobil" YValue="345254" />'
+'<vc:DataPoint AxisXLabel="Shell" YValue="318845" />'
+'<vc:DataPoint AxisXLabel="BP" YValue="274316" />'
+'<vc:DataPoint AxisXLabel="General Motors" YValue="207349" />'
+'</vc:DataSeries.DataPoints>'
+'</vc:DataSeries>'
+'</vc:Chart.Series>'
+'</vc:Chart>';
var vChart = new Visifire("SL.Visifire.Charts.xap" , 500 , 300 );
vChart.setDataXml(chartXmlString);
vChart.render("VisifireChart");
</script>
</div>
<!-- Copy till here -->
</body>
</html>
I downloaded the VisiFire 3.6.1 Silverlight binaries and copied into the same directory as the index.html
I updated the web.xml with the MIME type:
xamlapplication/xaml+xml
xapapplication/x-silverlight-app
I deployed it onto my local JBoss AS, but the portlet is blank
I have been google around but could not find any useful information on how to deploy a portlet contains VisiFire Silverlight chart onto JBoss Portal. Have I don't anything stupidly unreasonable? Any hints or sample codes would be appreciated!
Thanks in advance
There is no "Silverlight" icon on the right click drop down menu.
I think JBoss is not allowing to download the file SL.Visifire.Charts.xap. Please check whether SL.Visifire.Charts.xap and Visifire.js are uploaded at correct directory. Also type the direct path of SL.Visifire.Charts.xap in address bar of the browser and try to download it.
Also try setting direct path like below
var vChart = new Visifire("http://www.example.com/SL.Visifire.Charts.xap" , 500 , 300 );
Can you please check whether you are able to see Silverlight on right click.