I am using yeoman to build an angular js application. For this I am using google map api like this<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=weather" type="text/javascript"></script>
But after build the project using "grunt build" the file is not included in the html in the dist folder.
Can anyone suggest me how to include this file?
Thanks in advance.
Nabaraj
You have to put your Google Map <script> tag outside of the commentaries which looks like
<!-- build:js(.) scripts/vendor.js -->
The fact is that all the scripts contained inside are concatenated and minified after a build, breaking the Google Maps API since it's a CDN.
Related
I'm using Create React App and I would like to use a JS library that isn't available via npm. How would I go about integrating that into my app? I think I can simply add a script tag for it in public/index.html for development purposes but I'm guessing that won't include it in the final build code. Any suggestions would be welcome.
You can add your script to the public folder and include it in the public/index.html file.
<script type="text/javascript" src="%PUBLIC_URL%/my-script.js"></script>
Is there a way to achieve this? I use react.js in the front end only and want to keep it like this.
When you build your application via Yarn/npm, that's what basically you'd be doing. The system will bundle your assets and generates an HTML file. If you open the built index.html you should see your parsed React app in plain JS and HTML.
If you plan to put the build on a CDN, all you need to do is move the assets (JS and CSS) and the index.html wherever you want to host them. Ensure that <script> and <link> are pointing to the bundled assets within your index.html.
<script type="text/javascript" src="/static/js/your-bundle-main.js"></script>
<link href="/static/css/your-bundlemain.0a265734.css" rel="stylesheet">
You can use unpkg, is a fast, global content delivery network for everything on npm. Use it to quickly and easily load any file from any package using a URL like:
<script src="unpkg.com/react#15.3.1/dist/react.min.js"></script>
<script src="unpkg.com/react-dom#15.3.1/dist/react-dom.min.js"></script>
I was mess around this for a couple of days. I was trying to get browserfiy to work well with angular based app. I have tried following options but still cannot decide on a better way to do it, it will be appreciated if anyone can give any suggestion on this.
Option 1
Bundle all angular related libs, like angular, angular-animate, angular-ui-router, etc into vendor.js by using bundle.require
Bundle all app reated source files into app.js by using bundle.external
That works fine in dev environment, all modules in vendor.js could be required from app.js
But it crashed in prod environment. The minified angular files are not all CMD. Although I can browserify-shim angular.min.js and bundle.require angular-ui-router.min.js, it's kind of cubersome to do this file by file.
Option 2
Leave all angular libs into <script> and only output bundle for app files. That means in app.js, I have to refer to angular as a global var which is not good.
So what's the best practise to do this?
Even if you do require() angularjs, it still exposes the angular namespace in the context of its environment (Window object for browsers). What I usually do is simply put all angularjs modules dependencies (e.g. ui.router, ngResource and etc) below the bundled(browserified) javascript where your angularjs application resides. In my case, I use gulp-useref to concatenate all the script provided by the gulp-inject tags(this includes scripts bundled by browserify).
As you may have noticed below, the bower components(bower:js tag) are added below the bundle(inject:js tag). Since requiring the angular module will attach the angular object in the window object, then any components external to browserify can access window.angular.
The answer I provided is somehow similar to option 2 but without the disadvantage of referring angular as a global variable within your browserified code.
e.g.
<!-- build:js({./.tmp,./}) js/index.js -->
<!-- inject:js -->
<!-- endinject -->
<!-- bower:js -->
<!-- endinject -->
<!-- endbuild -->
UPDATE:
I've create a github repo that resembles the answer provided above. Try to clone it, and see what you can do with it.
I'm fairly new to Grunt, Bower and Yoeman so please forgive me if I'm not asking the right question. I've added the angular-google-maps module to my build and set it up manually and everything looks fine. However whenever I restart my project in Webstorm or build using grunt, my google maps api reference keeps getting lost. I've added the google and lodash dependencies to the package.json file and those references are being added just fine. However, how do I add a dependency to an api or should I just be putting the reference before the bower/components block? I've been searching the web for the last day or so and nothing seems to address this that I've found.
Here's an example of the api I need to add -
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
Thanks for the help in advance!
Please make sure to put your reference outside of the <!-- bower:js --><!-- endbower --> block in your HTML. This section is overwritten by grunt-wiredep when you build your application
I'm trying to integrate a RequireJS setup on my front-end generated / administered by Yeoman, with the Laravel PHP framework on the backend. Everything is golden except the concatenation part of the build step in Yeoman / r.js for my javascript files.
My problem in a nut-shell: the r.js build step in Yeoman looks for an index.html file with the HTML comments like <!-- build:js scripts/amd-app.js --> around the RequireJS script tag, which kicks off the optimisation and concatenation routine in the RequireJS optimiser. However: I'm using the Laravel framework, so there is no index.html, since it is generated dynamically.
I've managed to make the process work by doing an ugly hack and adding in an index.html in the app directory file, that just has:
<!-- build:js scripts/amd-app.js -->
<script data-main="scripts/main" src="scripts/vendor/require.js"></script>
<!-- endbuild -->
Which lets Yeoman / r.js find an index.html file with the appropriate tags and filepath, do all its awesome concatenation of my AMD modules and output it into a dist directory.
Only this is a horrible hack, and I'm sure there is a much simpler of achieving the same end. I assume it has to do with editing the Gruntfile containing the Yeoman build settings to reflect the info above. I'm just not sure how :(
Anyone with some experience integrating Yeoman / RequireJS setup, with a backend framework might help? (I imagine this question applies equally to rails as well).
If you check (at least on Mac/linux):
/usr/local/lib/node_modules/yeoman/tasks/rjs.js
You'll see a line:
var appIndexPath = path.resolve('mainFile' in options ? '../app/' + options.mainFile : '../app/index.html');
My guess is you can speficy another html file to kickoff the process by
rjs: {
// no minification, is done by the min task
optimize: 'none',
baseUrl: './scripts',
wrap: true,
name: 'main'
mainFile: 'kickoff.html'
},
Actually,
<!-- build:js scripts/amd-app.js -->
This is used by the usemin task, not rjs.
To skip the need of a html file at all, I would have to dig deeper.