I use Yeoman/Grunt with the Angular generator, and after running grunt build, the AngularJS reference in my dist/index.html looks like this:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
So, http: is missing, which I manually have to change to:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
In the original index.html, the reference looks like this:
<script src="bower_components/angular/angular.js"></script>
Is this a config error in my Gruntfile.js?
// simply represents "use the protocol of the current file"
So if your index.html uses http, the CDN will be fetched using http. Same with https.
I'm guessing you are testing locally and the browser uses the file: protocol. Should work once you use a server.
Related
Why is an external script for type="text/babel" not working in ReactJS?
I put the index.html and foo.js in the same folder. Nothing show after I open the index.html file with Google Chrome
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>ReactJS</title>
<script src="https://unpkg.com/react#17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script type="text/babel" src="foo.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
foo.js
ReactDOM.render(
<h1>Hello World</h1>,
document.getElementById('root')
);
Just include the babel file before the main. It will work as expected.
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script type="text/babel" src="./main.js"></script>
You need to run a local server.
For example with https://www.npmjs.com/package/http-server :
npm -g install http-server
cd <path to app>
http-server
Then view your page on http://0.0.0.0:8080
There's also instructions for using python or php to run a local server here https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server .
lite-server package seems a bit more promising https://www.npmjs.com/package/lite-server
In comparison to http-server it:
opens your application immediately in browser
supports HMR
supports file-based configuration
installation and usage is pretty straightforward:
npm install --global lite-server
cd to your folder in terminal and execute lite-server command
If you go to your developer tools in your browser, you should see a message that CORS blocked the request when trying to open index.html:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource
followed by Reason: CORS request not http
This happens because the request origin that calls Babel to convert your React code to a browser compatible Javascript code come from a local file, such as file://, which triggers the CORS error. In order to avoid this error, your request origin should come from a http or https origin, which can be achieved by running a local web server. You can read more details about why it happens at MDN docs
If you have Python 3 installed, run the following command in the terminal, where you index.html is located. If you need help setting Python and the web server, check this MDN documentation:
python3 -m http.server
This will serve your page at http://localhost:8000 and by pasting localhost:8000 into your browser, now it can render your React code correctly.
Basically the heading. I have a strapi app at localhost:1337 which I will fetch in React. I'm not very sure how localhost works, and therefore I want to know if the path will still be relevant when I deploy the react app.
When you deploy your react.js app on any server your url named http://localhost:1337/Dashboard
will be changed. In it http://localhost:1337/ is the base url or domain name. Which will change the server to the new one.
your code will maintain same value for that API and you will have to re-build your code each time you change your API, (most of people use low cost hosting provider which allow only port 80 to be used) my advice is to move your endpoit (backend url) outside your code in a json, .env file ... but what will work on most of platform is a variable defined in your public/index.html (not a best pratice but it will work) ex:
<html>
<head>
<!-- you will add this tag here it will contain your backend url -->
<script>
var bakendUrl = "http://....";
</script>
<!-- some other code here -->
</head>
<body>
<div id="root"></div>
</body>
</html>
I have a Angular UI which i deployed as a Spring Boot Web WAR file on a Jboss container (By moving all html, js, css files to /resources/static folder). I used mvn package to create the WAR file and deployed it on Jboss. Now i realized that all static resources like my app.js are loaded in http://localhost/appcontext/js/app.js.
In my angular code i just have
<body>
<script src="https://code.angularjs.org/1.5.5/angular.js"></script>
<script src="https://code.angularjs.org/1.5.5/angular-messages.min.js"> </script>
<script src="https://code.angularjs.org/1.5.5/angular-resource.min.js"></script>
<script src="https://code.angularjs.org/1.5.5/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/cdaguerre/gmaps- utility-library/4f71018696f179acabbe445f188fc2de13f60c3e/markerwithlabel/src/markerwithlabel.js"></script>
</body>
When the code is executed, it is trying to look for app.js in http://localhost/js/app.js and doesnt find it. How do i make all static resources to load from http://localhost/appcontext?
Why don't you just call the resources specifiying their location relative to where they are?
Something like <script src="appcontext/js/app.js"></script>.
It seems that's what you need, but maybe I'm missunderstanding your problem
I am trying to run the google-cdn plugin via Gulp (gulp-google-cdn) to covert bower references in my HTML file into the CDN equivalent. Gulp-google-cdn does not do anything, and enabling the DEBUG, shows: google-cdn Could not find satisfying version for angular-material ^1.0.5
My task (I use a subdirectory with tasks per file):
gulp.task('HTML:Release', function() {
return gulp.src('../src/*.html')
.pipe(googleCdn(require('../bower.json')))
.pipe(gulp.dest('../dist/') )
;
});
HTML:
<!DOCTYPE html>
<html ng-app="OntarioDarts" ng-cloak lang="en">
<head>
</head>
<body layout="row" ng-cloak>
<div layout="column" class="relative" layout-fill role="main">
<md-content flex md-scroll-y>
<ng-view></ng-view>
</md-content>
</div>
</body>
<!-- Load JavaScript Last for Speed. Load from CDN for cache speed -->
<!-- Angular JS -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-material/angular-material.min.js"></script>
<script src="bower_components/angular-material-icons/angular-material-icons.min.js"></script>
The distribution file does not point Angular to the CDN, but still tries to use the bower_components, even though it did not complain that the files were not found.
One problem I found is that I have Angular set at ^1.5.0 in my bower.json. However, I was only using the default Google CDN, which does not currently have the 1.5.0 available. I changed the version in the bower.json file to be ^1.4.0, and then the file was changed to use the CDN with version 1.4.7.
The problem though is that the reference did not get changed to HTTPS://, but was left simply as src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"
Gulp-google-cdn does not do anything, and enabling the DEBUG, shows: google-cdn Could not find satisfying version for angular-material ^1.0.5
That's because the newest version available from the Google CDN is 1.0.4.
The problem though is that the reference did not get changed to HTTPS://, but was left simply as src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"
That's not necessarily a problem. That's a protocol-relative URL. If your page is served over HTTP, angular.min.js is fetched over HTTP. If your page is served over HTTPS, angular.min.js is fetched over HTTPS.
Unless you absolutely need angular.min.js to always be fetched over HTTPS you can just leave it like that.
EDIT: ... except for when you're trying to open a local HTML file in a browser. Then your protocol is file:// and the protocol relative URL will refer to your local file system. Which of course leads nowhere.
One way of fixing this would be to serve your html files through a locally running webserver (e.g. with gulp-webserver). When your HTML pages come from e.g. http://localhost:8000/ all the protocol relative URLs will be served over http:// as well.
If you just want all the CDN URLs to be prefixed with https:// instead, here's a way to wrap the google-cdn-data object to achieve this:
var gulp = require('gulp');
var googleCdn = require('gulp-google-cdn');
var jp = require('jsonpath');
function protocol(proto, cdn) {
jp.apply(cdn, '$.*.url', function(url) {
return function(version) {
return proto + url(version);
};
});
return cdn;
}
gulp.task('HTML:Release', function() {
return gulp.src('../src/*.html')
.pipe(googleCdn(require('./bower.json'), {
cdn: protocol('https:', require('google-cdn-data'))
}))
.pipe(gulp.dest('../dist/') );
});
You'll need to run npm install --save-dev google-cdn-data jsonpath for this to work.
I have an angular application with below index.html file
Consider in my index.html page I have the following code for SRI (SubResource Integrity)
<html>
<head>
<meta http-equiv="Content-Security-Policy"
content="script-src 'self' scripts/alert.js 'unsafe-inline' 'unsafe-eval' 'sha256-qznLcsROx4GACP2dm0UCKCzCG+HiZ1guq6ZZDob/Tng='">
<script src="scripts/alert.js"
integrity="sha256-qznLcsROx4GACP2dm0UCKCzCG+HiZ1guq6ZZDob/Tng="
crossorigin="anonymous"></script>
</head>
</html>
In case, if I am using require JS, then I have to move the script inclusion of 'alert.js' to 'main.js' file as below
require.config({
// alias libraries paths
paths: {
'jquery': '/scripts/alert'
},
// kick start application
deps: ['../app/require.bootstrap']
})
Can someone help me how to include the integrity attribute to the main.js file while referring the alert.js script in the paths.
If I understand your question correctly, you want to use Sub Resource Integrity for scripts referenced via require js. Note, that in order to do this you need RequireJS version 2.1.19 or later (see http://requirejs.org/docs/download.html).
For a working example (referencing jQuery), see this plunker: http://plnkr.co/edit/kzqLjUThJRtoEruCCtMt?p=preview. Hopefully you should be able to copy this method to your project.
My example uses integrity/crossorigin attributes for:
RequireJS itself (through the index.html file)
jQuery (via the config file main.js and the interesting thing for you)
This is built on the RequireJS hook onNodeCreated and code like
onNodeCreated: function(node, config, module, path) {
node.setAttribute('integrity', integrityForModule);
node.setAttribute('crossorigin', 'anonymous');
}
Please note that this example does NOT use SRI for the config file main.js file. In order to accomplish that, either
include the RequireJS config inline in the index.html page
...or reference main.js (the config file) through an extra script tag (with integrity/crossover), and not via the data-main attribute