I am noticing that Aurelia is building to the scripts directory in my CLI project. Is it safe to add this directory to .gitignore, or is there some reason to track changes to 'scripts' in Git?
You can safely add scripts to the .gitignore file.
Aurelia CLI uses the scripts folder to store the generated scripts (vendor-bundle.js and app-bundle.js).
vendor-bundle.js is for libraries (e.g. aurelia-binding, bluebird and jquery).
app-bundle.js is for all your HTML, CSS and JS files from the src folder combined in one JS file.
Because these files are renewed every time you run au run or au bundle, there is no need for them to be in version control.
Depending on what functions the scripts have, you might want to leave them in the repo.
E.g.: you add a new member to your team, and said scripts might be required for your project to work. In which case, if they're not in the repo, he will bother one of you to transfer them to his computer.
Edit: If the scripts are automatically generated every time you build the project, or if they are downloaded via a packet-manager, then there is no need to leave them in the repository.
If this is the case, it's a safe bet you can add the folder to the .gitignore. If this is not the case, then it might be better to leave them in the repository.
This all depends on your project, where you are putting your scripts and how the frameworks work.
Related
Currently I am working on a website project. Its file structure looks like below:
source_code
- application
- node_modules
- system
- www
-- js
-- css
-- img
-- third-party
-- index.php
- package.json
This time I would like to ensure third-party libraries with NPM.
What is the best practice if some package should be available in public way and I want to avoid the manual copy-paste flow.
(Example packages: jquery, lazysize, bootstrap)
It depends on how you're setting things up to be used. If you're using webpack, for example, you would probably handle your JavaScript dependencies in package.json, and let webpack collect all these into a dist/bundle.js file which is the actual JS file included in your index.html.
If you don't have a packaging step like this set up, you can do one of these methods:
Link out to a CDN in your index.html (<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>)
Download this file in www/js/lib/ and include it locally within the site (<script src="/js/lib/jquery-3.2.1.slim.min.js"></script>).
I am making an NPM package for the front-end and I want to know what the best file structure to use is. I have one code.js file and will have one code.min.js file. Should I have these two files in the root directory? In a dist folder? In a src folder? What is the best practice for this file structure - specifically on the front-end?
you should separate your source from your development compiled files, as much as possible.
For example on my projects, all minificated files, should be in a dist folder. The non minificated files, are not getting on the server. You wouldn't want a customer to accidentally use a non-min css and get 0.2 sec for extra load, would you? :)
Also, I do strongly recommend you to google this: "recommended structure [add framework name here]"
code.min.js is certainly the minified version of code.js. You simply need to add code.min.js to your project.
For node projects, you can insert directly the cdn link into your code or when you create a file ( js, css or image), it goes to the public folder.
I need some help with organizing js files in VS.
So my problem is, that VS(MVC) put all js files by default into the script directory, but i also have js created by me, in a sub directory, like this:
Now my problem is that when i open the scripts folder, the js files installed by NuGet take 2-3 screens in length, so i either have to open/close it every time, or scroll trought like there is no tomorrow.
So my question is, is there any good solutions to it? Like moving all the files into a subdirectory, and change every bundles, and NuGet config, or should i create a separate script directory for my custom js files? Any good ideas?
You can place and use as many subdirectories you wish for your own scripts.
With the help of Bundle.IncludeDirectory all your scripts will be added to the bundle without having to define multiple bundles.
Concerning nuget I don't think you can (re)place those scripts at a location of your choice.
See Stackoverflow: Include all files in a folder in a single bundle
Sadly you cannot change the default folder that NuGet downloads the files. Is the author of the NuGet package that decides where it will get installed.
An alternative is to use Bower. With it you can control where files get downloaded (look at this question).
Or, as you said, move your own javascripts to another folder and forget about the default.
Question 1 :
I am installing my project dependency libraries using npm and it gets stored in the npm_modules folder. Is it necessary to keep the copy of library like angular.js,angular-route.js in lib folder or vendor folder? I could see few people are using lib folder or vendor folders to store the library in the permanent manner. I am confused by seeing this.
Question 2:
Do I need to copy/paste the node_modules folder to production or just run the npm install command on the project folder's command prompt to install all the dependencies in production. How does a dependency library get promoted to production?
Thank you kindly for your advice.
It all depends on how you need to deploy your site to production, really. Ultimately, you will probably want to bundle all your JS files into one or a few files, which are minified and sent with gzip compression.
How you bundle them is up to you. There are quite a few options:
Browserify
Webpack
Grunt / gulp build process
And many more besides
As to whether you need to keep a copy of these bundled javascript files under version control, well I think that boils down to 1 key question: can you run a build process (such as one of the tools using NodeJS) on the production server, or on a build server that creates a zip file or installer? If so, then you don't need to include them, just get the build server or production server to check out the latest copy from version control, npm install and then run the build process.
But if the best you could do is have the production server check files out from source control, then you would want to include the final versions of the files to use in the repository.
Keeping generated files, such as your bundled javascript files, in your source control repo should be avoided where possible. Because otherwise, every commit has to contain the changes to the source files, and the corresponding change to the generated files as well. And the latter is just noise, and has to be ignored by every developer looking at a diff/patch for a commit.
Imagine I've just used bower install angular-date-range-picker to install a plugin I want in the root directory of my project.
Now typically all of my js files (angular project) are sitting in a folder called js on on the root directory of the project.
Here's where I feel I'm missing something. How do I include my nice new plugin into my project without tracing back through every dependency the bower command installed? I typically include all my scripts on the index.html with tags. I've copied the plugin js file out of the bower_components folder and into my js folder (which I now feel is wrong).
If this is an acceptable way to link to plugins then should I be linking directly to the bower_components folder and how do I include all of that plugin's dependencies without literally writing a script tag for each one? (And how do I know what it depends on, there are other plugins in that bower_components folder for instance).
Apologies if this question doesn't make any sense, I'm obviously missing some very important workflow knowledge and I don't know how to phrase the question to find want I want with Google.
You should be writing a script tag for each one. In most cases, check the corresponding github repo to see what dependency libraries are needed. In addition to this, a hint to see what file you should be referencing in your script tag will have an extension of .min. .min is a minified version of the library that removes whitespace and replaces large variable names.
Once your application is ready for production, there are a couple things you can do.
You may want to move to a Content Delivery Network (CDN) instead of referencing your files locally. The advantage of this is you'll have a reliable host hosting your library files.
Another option is to use either Grunt or Gulp, which has the ability to combine all of your dependancy files into one file. The advantage of this is having a much quicker load time of loading one file instead of multiple.
Content Delivery Network - Wikipedia
Grunt - Homepage
Gulp - Homepage
Usually it's configured something like this:
<!-- build:js ${contextRoot}/app/assets/scripts/modules.min.js -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/select2/select2.js"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-route/angular-route.min.js"></script>
...
<!-- endbuild -->
to include script into index.html. Then during build process some grunt/gulp (grunt-usemin, for example) plugins can replace the entire section between <!-- build: --> comments with minified version of the files.
As said before, you can use Grunt with grunt-injector, it's been specially made for that and can be used to automatically inject bower dependencies into your index.html, as well as your other js/css files (you will need the wiredep dependency).
You will no longer have to worry about your files injection.