Here I import from view file:
<script src='javascripts/tic-tac-toe/main.js'></script>
<link rel="stylesheet" type="text/css" href=stylesheets/tic-tac-toe/style.css'>
public folder structure:
[]
routes file:
GET /assets/*file controllers.Assets.versioned(path="/public", file: Asset)
When I try to access the view page I receive following error in firefox console and the files are not loaded :
The resource from
“http://localhost:9000/assets/stylesheets/tic-tac-toe/style.css'” was
blocked due to MIME type (“text/html”) mismatch
(X-Content-Type-Options: nosniff).
How to access js and css resources from view file ?
I can browse directly locally to the files on the browser via the address bar:
http://localhost:9000/assets/javascripts/tic-tac-toe/main.js
http://localhost:9000/assets/stylesheets/tic-tac-toe/style.css
Seems I need to prepend with "assets":
<script src='/assets/javascripts/tic-tac-toe/main.js'></script>
<link rel="stylesheet" type="text/css" href='/assets/stylesheets/tic-tac-toe/style.css'>
Related
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.
I've looked around and I'm sure this is common but can't seem to get the right answer.
I've just recently set up a Codeigniter 3 project on my localhost and a migrating some Codeigniter 2 code.
The index.php file is a bit different.
I can get the project up and running except the main folders references in the index.php file such as APPLICATION and others I've added like "ASSETS" etc are loading like this:
<link href="http://[::1]/projectOne/E:\public_html\projectOne\assets\css\style.php?1537317115" rel="stylesheet" type="text/css" >
Even when I set a base_url:
<link href="http://localhost/projectOne/E:\public_html\projectOne\assets\css\style.php?1537317115" rel="stylesheet" type="text/css" >
I've checked it wasn't just the folders I added by echoing out the APPPATH variable:
define('APPPATH', $application_folder.DIRECTORY_SEPARATOR);
echo APPPATH;
Which produces:
E:\public_html\projectOne\application\
What am I missing here?
How do I get my paths to folder set in the index.php to just use the project root, and not the whole filepath on the computer?
Figured it out. For anyone else that hits this issue.
This new part in CI3:
if (($_temp = realpath($application_folder)) !== FALSE)
{
$application_folder = $_temp;
}
Allows you to more securely/easily have your application folder outside of the website root.
My additional ASSETS folder was then showing the full web path which you obviously don't want.
So commenting out this part leaving only:
$application_folder = strtr(
rtrim($application_folder, '/\\'),
'/\\',
DIRECTORY_SEPARATOR.DIRECTORY_SEPARATOR
);
And then setting you base_url value in the config.php file gives your CSS, JS and IMAGES proper site relative paths.
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>
In my directory I have:
shop.rb (App < Sinatra::Base)
lib directory - Ruby models inside
views directory - erb files inside
Gemfile
Where should I place my style.css ? I tried every place possible, I created public folder and tried with also every possible place, but my styles doesn't work.
In layout I have:
<link rel="stylesheet" href="/style.css"/>
I tried also with:
<link rel="stylesheet" href="style.css"/>
It might be because the app is not configured to find the public directory/ First make sure the public directory exists relative to the main entry file of your application (assuming shop.rb) and use the following configuration:
class Shop < Sinatra::Base
configure do
set :public_folder, File.expand_path('../public', __FILE__)
set :views , File.expand_path('../views', __FILE__)
set :root , File.dirname(__FILE__)
end
get '/' do
erb :index
end
end
Once set up, Sinatra should now know where to find your public directory and you can just include the asset file like this:
CSS:
<link rel="stylesheet" href="/style.css"/>
Image:
<img src="/img/background.png" alt="Image" />
JavaScript:
<script src="/js/main.js"></script>
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));
}