External javascript not being run from React (CRA) - javascript

I have a plain HTML template which I am trying to convert into a small React app (using create-react-app). I have inserted the following script tags into the index.html file located in the public directory, but it doesnt seem to be running some of the scripts
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="app"></div>
<script src="%PUBLIC_URL%/js/jquery.js"></script>
<script src="%PUBLIC_URL%/js/popper.min.js"></script>
<script src="%PUBLIC_URL%/js/bootstrap.min.js"></script>
<script src="%PUBLIC_URL%/js/TweenMax.js"></script>
<script src="%PUBLIC_URL%/js/jquery-ui.js"></script>
<script src="%PUBLIC_URL%/js/jquery.fancybox.js"></script>
<script src="%PUBLIC_URL%/js/owl.js"></script>
<script src="%PUBLIC_URL%/js/mixitup.js"></script>
<script src="%PUBLIC_URL%/js/appear.js"></script>
<script src="%PUBLIC_URL%/js/wow.js"></script>
<script src="%PUBLIC_URL%/js/custom-script.js"></script>
</body>
</html>
if i load the page and go into the console and type $ === jQuery it returns true, which tells me that the jquery.js file is being loaded, but a lot of functionality from the other files does not seem to work.
There are no errors being generated in the console either
Am i doing something wrong in the way i am bringing these files into the project?

Related

How can I integrate chess.js and chessboard.js?

I am trying to integrate Chess.js and Chessboard.js but I am having some problems along the process. I have downloaded successfully Chessboard.js, unzipped the folder and within it I created a file called index.html that looks like the following:
<html>
<head>
<title>Chess Match</title>
<link rel="stylesheet" href="css/chessboard-0.3.0.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/chessboard-0.3.0.min.js"></script>
</head>
<body>
<div id="board" style="width: 400px"></div>
<script type="text/javascript">
var board = ChessBoard('board');
</script>
</body>
</html>
This proves that the library is working properly. Now I would like to integrate the Chess.js library in order to play a random match as described in this integration page.
How can I do that?
First I need to install Chess.js so I download the repo and I put the chess.js and chess.min.js files inside the js folder, but I am not sure of how should I proceed from here. Do you have any idea?
Add
<script src="js/chess.js"></script> into your file.

cloud9, cannot link js file to ejs

I am new to server programming.
I cannot get the bootstrap js files to link to my ejs file. I am trying to link the js files to index.ejs.
I have this code:
<script src="jquery.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>
They are in the same original folder, so why doesn't this work?
Thanks for your help
Screenshot of the situation

AngularJS where to put all script tags location

I'm new to AngularJS.
Where do I place all .js files like module,routes and controllers?
I found examples but they put all of it inside of tags.
like I currently code like this:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="app/app.module.js"></script>
<script src="app/app.routes.js"></script>
<script src="app/components/home/homeController.js"></script>
<script src="app/components/skills/skillsController.js"></script>
</html>
Is this normal? Or is there a proper way to include the files?
I have heard of RequireJS. But there a way without using it?
Thank you very much.
Regards,
Yuri
There is no right answer.
There are multiple ways. One of them being using <script> tags as your code does.
Other options are:
Gulp
Gulp + Bower
Webpack
RequireJS
SystemJS
You can also use Yeoman to scaffold your project with build pipeline in place.
You can include files normally before end body tag </body> - it's ok.
But more efficient way is pack your files into one or few groups (Libraries, Core, Modules) and minify. It is better to have fewer HTTP requests, so you should reduce amount of files.
To bundle your files and minify you can use gulp or webpack:
See example with gulp:
https://github.com/jhades/angularjs-gulp-example
See example with webpack:
https://github.com/zombiQWERTY/angular-webpack-starter
Few tips, you should pick and choose which ones are applicable to your app.
After all your application markup, load your scripts.
You may use a bundler, here is a starter project I created some time ago gulp-browserify-starter. #1 still applies.
Go through a bit more pain and use webpack to bundle your vendor and app code as distinct bundles.
Good luck
You need to put all your javascript just before body close tag instead of head
<html>
<head></head>
<body>
.......
.......
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="app/app.module.js"></script>
<script src="app/app.routes.js"></script>
<script src="app/components/home/homeController.js"></script>
<script src="app/components/skills/skillsController.js"></script>
</body>
</html>

Meteor React External JS Files

I have an HTML template which is bought from Themeforest, index.html of this template has js files included in the following order:
<!-- Scripts -->
<script src="js/vendor/jquery-2.1.0.min.js"></script>
<script src="js/helper.js"></script>
<script src="js/vendor/HeadsUp.js"></script>
<script src="js/vendor/chart.min.js"></script>
<script src="js/vendor/jquery.mixitup.min.js"></script>
<script src="js/vendor/jquery.swipebox.min.js"></script>
<script src="js/vendor/masonry.min.js"></script>
<script src="js/vendor/swiper.min.js"></script>
<script src="js/vendor/materialize.min.js"></script>
<script src="js/main.js"></script>
</body>
How and where should I include these external js files in my Meteor React application?
As mentioned in this meteor documentation, you can create a compatibility folder from on client.
This folder is for compatibility with JavaScript libraries that rely on variables declared with var at the top level being exported as globals. Files in this directory are executed without being wrapped in a new variable scope. These files are executed before other client-side JavaScript files.
It is recommended to use npm for 3rd party JavaScript libraries and use import to control when files are loaded.

Bootstrap.js missing from dist folder after using Grunt command

I'm scaffolding a project with Yeoman and I encountered a problem recently. When I use grunt command on a command line to make distribution version of a project it modifies my index.html and deletes bootstrap.min.js script. Everything else stays the same, it just from some reason deletes that one line of code.
Anyone knows what's the problem?
In the webapp generator, all bootstrap.js files get concatenated into the plugins.js file.
If you look in your index.html file (in the app folder) you should see the block of code I've added here
note the build:js scripts/plugins.js - that's what tells grunt to concatenate the files into the plugins.js file
You can rename plugins.js to bootstrap.min.js in that line if you'd like
<!-- build:js scripts/plugins.js -->
<script src="../bower_components/headroom/headroom.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/modal.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tab.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/affix.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/alert.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/dropdown.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tooltip.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/transition.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/button.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/popover.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/carousel.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/scrollspy.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/collapse.js"></script>
<!-- endbuild -->

Categories

Resources