Integrating Chessboard.js in meteor project - javascript

I am using meteor, which I am new to, for my current project and want to replace the current chessboard I made with that from chessboardjs.com and was hoping some one may have experience with this. I downloaded the files from the website, put the css files in a css directory I created and the images in my public/image directory but was wondering where to place the .js files. I am not used to working with multiple files in meteor. I am creating a client and server directory. Should I just place the .js files in the client directory? Also, on the site it says to get started add
to the javascript
var board1 = new ChessBoard('board1', 'start');
and to the html
Could some one suggest a way to use meteor templates to put this in the .js files? I am a bit confused.

You should place external client libraries somewhere in /client folder. Usually it's either /client/lib to ensure they're loaded before the rest of your code, or /client/compatibility to ensure they work even if they aren't designed to work with Meteor, or /client/lib/compatibility for both.

Related

Linked javascript file in Visual Studio 2015 not being included in build/deploy

I have a bunch of Javascript files in a centralized project in my solution that I would like to share amongst other projects. However, when building and testing a project with such a linked file, it is 404 when I try to access it in testing my solution.
The script is linked to from the standard Scripts directory in my project - nothing unusual in it's placement. It doesn't get loaded in my view (#Scripts.Render("~/Scripts/Models/InteractionDetails.js")), though the script tag for it does appear in the source and all the other JS files get loaded including a test non-linked js file in the same subdirectory.
How might I get the dratted thing to be properly deployed to the server on build?
This is not a duplicate, as I am using the method outlined to include the files in my project from another project. The issue is that they are not being used when I build the project (eg, I cannot path to the JS files directly on the server, and they are not included in pages referencing them).

how to hide the js files in the header in meteor

This is my first time develop an app using meteor, I find out there are many js files included in , like files from the default/installed packages and the clients files.
However when I view the in the live sites that created by meteor, there are very little or no js files in there at all. How can do this?
I can't find the information about this topic. Is it because the meteor will hide these js files once the app is deployed?
Yes, when your application will be deployed you'll not see them anymore. Like said by zero298, they will be minified and bundled.

Adding javascript files to Yeoman webapp generated website

I am playing with the yoman trying to build a web site using the webapp generator.
If Managed to create a web site that works under grunt server, when I change a js file grunt notices the change change and does a live load and everything works as you would expect.
When I try a plan grunt, it attempts to run the dist task, it manages to include my html files, but skips any of the javascript or script files I created in the script and styles diretores. I assume its the case I have to tell grunt to includes these files
Files such as main.js seem to make it through, but there are no references to main.js in the Gruntfile, so I not sure which part of Gruntfile.js to change.
Doing a yo doctor reports
[Yeoman Doctor] Everything looks all right!
Q. How to do I tell grunt to include and user created files.
Q. I noticed that all my image files where renamed, fair enough how do I refer to a file that I known is going to be renamed in a javascript file
Q. Does anybody known a good web resource for yoman where these quesion might have already been answered?
Be careful on this glob pattern scripts/{,*}/*.js. This takes only the js files that are inside scripts or immediate child folders.
Make sure to change it to scripts/**/*.js to include all js files in all subfolders.
Also get an idea on tags build: css, build: js in your index.html, wiredep plugin used by Yeoman in gruntfile to understand what files will be injected into dist folder.

Rename js files in maven build process with sha1/md5

I need to versioning my javascript files and think the best way is to generate the sha1/md5 of each file and rename it with that result (and the reference to each js file too obviously) during the build process.
This way, when a file content changes, its name changes too and I have not to worry about versioning anymore.
I am trying to find some info about how to make this works with maven but I don't find anything related to.
Any help?

Deployment Strategy for Require JS Optimized/Concatenated Website Files

My question is partly technical and partly about deployment strategies and workflow. I built a project using Require JS. It includes a number of distinct js modules, and is built upon Kirby CMS. The directory structure of the project is something like this:
project
assets
styles
style.css
js
scripts
script1.js
script2.js
script3.js
vendor
app.js
images
fonts
content
...
kirby folders
....
The file app.js is called in the footer of my site's page like so:
<script data-main="/assets/js/app" src="/assets/js/vendor/require.js"></script>
It configures RequireJS by calling the requirejs.config() function and then calls the main script file that loads everything else using RequireJS's requirejs() function.
I've used RequireJS' s optimization tool to compile the project in such a way that the optimized files are all dumpted into a directory called dist (a name I just picked up from this tutorial). So in the end dist contains a replication of every directory and file under assets, only optimized, and the file app.js is a concatenated and optimized version of all the js modules that I have in the project. So far so good.
What I am unsure about, however, is how I'm the supposed to make use of this new secondary version of all the code. What for instance if I want to deploy a version of the site to the production server without all the source js files? Each time I deploy the site, I would need to go through my code and in every place that I referred to files under the assets directory, I would need to replace that with dist. I deploy using git and beanstalk. One way to do this would be to manage different branches for staging, production, and development, in which the production and perhaps staging branches have references to the files under dist, but this seems awkward.
So my question is given this kind of optimization set up, which if you look at the tutorial linked above is one way to do this, how then do you manage the switch to the optmized version of everything seemlessly, without having to go back into your code and change everything up? Is there some key part of the process that I'm missing here?
Each time I deploy the site, I would need to go through my code and in every place that I referred to files under the assets directory, I would need to replace that with dist.
I've looked at the tutorial you've linked to and do not see how it is true for the tutorial. The tutorial does not use absolute paths, so should be deployable from dist just as well as from the directory that contains the pre-optimization sources. If you cannot do this for your application, that's because you've done something different from the tutorial. Your script tag, for instance, shows absolute paths.
So the solution is to design your application to avoid absolute paths. This way, you won't have to change paths when you deploy from dist. I'm using this very method to deploy optimized and non-optimized versions of one of my apps.

Categories