I am relatively new to using git and GitHub, and I am working on my personal website. I am using the JS plugin Slick, a responsive carousel feature. I downloaded all of the necessary files and stored them within my local repo. The size and content of the Slick zip folder is much larger than the files for my site at the moment, so when syncing with GitHub this makes my project appear as 75% Javascript, whereas the actual website is not.
Am I doing this correctly, storing the files for my JS plugin directly within my repository folder? Or should I be using some other method to implement Slick on my site? Or is this just something I should not be worried about? Thanks
If you're just using one library, manually storing it in your Git repo is fine. You'd have to manually update the files if a new version is released, but that's not a big deal for one library. (And you might not even care about updates to this library).
However if you're using more than one library, I'd highly recommend using Node Package Manager (NPM) and a build tool like Webpack.
Here's an article that introduces these tools (plus a few others): https://medium.com/front-end-hacking/what-are-npm-yarn-babel-and-webpack-and-how-to-properly-use-them-d835a758f987
For using git, you should store your dependencies in a folder that is in your .gitignore. If you install browserify or another similar tool like webpack, you can use the npm package manager to create a dependency list file with npm init that allows for easy package installation with npm install by anyone. You can install packages slick with npm install --saveslick-carousel and use them with require() in your main js file. Then, take your js file and run browserify jsfile.js -o outputfile.js and it will package your js and your dependencies together to be used by the browser
When uploading to your git repo, add a .gitignore like this one for Node. This prevents your dependencies from being uploaded to the repo and instead when someone wants to run your project, they must run npm install to get all the dependencies.
Browserify gives an output JS file you add to your web server, the name of this file should be put in your .gitignore as well. Your code is stored in the js file you pass to browserify and other people can still access it without the output file, but they need to run the browserify command to package your code.
Related
When I install a JS library with npm, say:
npm install chartjs
It places the required JS file in ./node_modules/chartjs/chart.js.
Since I want the file to be located in, say, ./public/js/chart.js, I could just copy and paste it there. But is there a proper way to do that, like linking directly to the file installed by npm ?
Thanks in advance for your help. (Yes I'm kind of new to JS...)
In general, if you are using npm to manage your dependencies then you would use a bundler (such as Rollup, Webpack, or Parcel) to combine them into a browser-friendly file in your distribution directory.
MDN has a tutorial which walks through setting up a basic project in Parcel.
I am working on a VueJS web app. One of the modules it uses is a wrapper for a javascript library installed through npm and packaged to integrate into vuejs. It does not quite fit our needs, we need to add some functionality to it, so I want to fork it and edit it.
The repo has two folders: src and dist.
As far as I understand, src is the actual src code while dist is a minified version for distribution. Questions:
If I want to edit it, how do I deal with the contents of /dist ? Do I delete it?
Do components installed through npm use the /src/ version or the /dist/ one?
If I delete /dist, work on the /src code, how do I recreate /dist based on the modified /src files?
Thank you.
Based on your questions, I would suggest you get a bit more familiar into your stack and how to actually build your appication.
Generally speaking the /dist folder contains automatically generated files, which may be uploaded to a webserver of your choice. Since you are using VueJS, you should be able to generate these files by running npm run build.
If I want to edit it, how do I deal with the contents of /dist ? Do I delete it?
As I already mentioned, these files are automatically generated by running npm run build. Therefore everytime you run this command, everything in /dist, will be automatically updated.
Do components installed through npm use the /src/ version or the /dist/ one?
Your working directory is always /src. Dependencies can be used like in any other application (this example uses Axios, which is a http client):
import axios from 'axios';
const httpClient = axios.create({ baseURL: 'https://api.something.com' });
httpClient.get(/* ... */);
If you are a beginner and are not 100% sure about how to use depencencies, I highly encourage you to read this article: An Absolute Beginner's Guide to Using npm
If I delete /dist, work on the /src code, how do I recreate /dist based on the modified /src files?
You do not have to delete anything in /dist. Simply running npm run build automatically will add the latest changes.
Please keep in mind that running npm run build is only relevant for your production environment. For your development environment you always want to use a dev server, which can be started with npm run serve.
Possibly a stupid question. I installed Chart.js using package manager. It's in Solution explorer.
But where are the actual JS files or how do I get them? When I installed it, there are no changes that Git detects, so I'm not sure if anything at all happened.
Chart.js 2.5.0 includes a Content\Scripts directory inside its NuGet package which contains a Chart.js and Chart.min.js. Depending on what sort of project you are using these files may or may not be added directly into your project.
If you are using a .NET Framework project that has a packages.config file then the JavaScript files will be added into a Scripts folder into your project.
If you are using a project.json file, or your project uses PackageReferences, then nothing will be added since this sort of project only supports files that are in a contentFiles directory inside the NuGet package. Your project looks like a .NET Core project which will use PackageReferences. The Chart.js NuGet package itself will be in the %UserProfile%\.nuget\packages directory if you need to get the javascript files.
Tseng's answer that recommends switching to using Bower or the Node Package Manager to add the JavaScript files seems like the best solution here instead of using NuGet, which does not have good support for adding source files to your project for newer project file formats.
The usage of NuGet for css/javascript libraries is discouraged. For ASP.NET Core you should use the java script / node package managers, bower and npm respectively.
You can use either one. Bower is more focused on browser libraries and css, while NPM is more for server-sided stuff (using node.js). But node.js also contains most (if not all) of the packages bower has, so it's matter of preference.#
For that, you need to select your MVC project and add a new file to the project root. While in the template manager (Add->New File...), search for "Bower Configuration File" or "npm Configuration file".
Then edit the file and add your dependency, i.e.
package.json (npm)
{
"dependencies:" {
"chart.js": "2.5.0"
}
}
Once you save, the file will be downloaded in a directory named "node_modules`. This alone won't be enough, as the required files need to be copied over to wwwroot folder, where they can be accessed when the application runs.
For this you'd need either use the bundler to bundle the files together (should be in default ASP.NET Core project template) or use task runners such as Gulp or Grunt to run tasks on build/publishing, which does that for you. See ASP.NET Core Docs on Gulp examples.
Update
Bower been deprecated now for over a year.
I would like to get an explanation about the way npm modules getting build on install, I'll give an example:
When I'm taking a look on the material-ui npm module sources on GitHub, There's sources but there's no built files, when I take a look on my project node_modules/material-ui directory I can see that the directory contain only the built files (es5, uglify).
I'm trying to understand how that magic happens? I see that there's build script inside the package.json but there's nothing that tell npm to run it on install, what am I missing?
Thanks
Usually modules don't get built on the client's machine, because that would take additional time and might fail because they are using an older version of Node.js that doesn't support the build tools, and of course the build tools would need to be installed as well, which would make the process even longer. Instead you build it before publishing. What is on GitHub is different from what is actually published to the npm registry. Most modules don't check in the built sources into GitHub (although some people prefer to).
Presumably material-ui does this process manually and just publishes the built sources, as seen in Unpkg - material-ui.
Some other packages like redux use a prepublish hook, which builds the necessary sources just before it gets published when running npm publish (Redux prepublish hook), which reflects the published package as you can see in Unpkg - Redux. It's pretty close to the original source on GitHub but only contains the relevant files, including built files that are in its .gitignore file. Because a lot of files are unnecessary to be published (e.g. the test directory, rollup.config.js etc.) and would only take up space on the client, you can specify files in package.json to only publish the listed files (Redux files).
You just happened to have picked a quite confusing package with material-ui when it comes to publishing, whereas redux is a lot easier to understand.
I am trying to get up and running with Meteor and seeing what it can offer, while I like it overall, it seems it's a very very rigid system.
I set up a small testing setup using Velocity, it opens a small overlay window on the side which has a class of "velocityOverlay". The overlay is really small and makes error stack traces wrap. All I wanted to do was to edit the css of the "velocityOverlay" and increase the width.
I somehow (after wasting time) managed to find that Meteor is actually putting all the packages in my user directory by default, once I found that, I found the needed css file...
velocity_html-reporter/.0.5.1.aykpxq++os+web.browser+web.cordova/web.browser/packages/velocity_html-reporter/lib/client-report.less.css
And I did a small edit to the width, next thing you know the meteor app crashes when trying to launch using the "meteor" command throwing a "Error: couldn't read entire resource" error. I can't even edit the bootstrap.css file I installed using "ian_bootstrap-3".
Further more, I can't find any way to install packages locally just for my particular project, what if I wanted to modify a package only for my particular project? this is very easy to do in vanilla Node.js, you simply don't use the "-g" when using "npm install".
To add to that, within my project root, there is another ".meteor/local/build/web.browser" folder with most of the global package files replicated again. When does Meteor use which? This is very confusing.
You can run a package locally very easily.
Download it from Github (for example) and put it in the packages/ directory of your application like this /packages/package_name.
Then add it to your application with the same meteor add package_name command as usual.
Meteor will automatically look in the local folder before anywhere else and compile the package with the rest of your code.
This allows you to do any modification you want on the package and test it locally before publishing it to the registry.
Also, folders located in .meteor/local/* are used for building purpose only and are generated automatically by Meteor. So it is not the best place to edit the files!
This worked for me https://atmospherejs.com/i/publishing. mrt link-package didn't work for me, might just be outdated code.
Steps:
Download (or clone) package from GitHub to local dir
Stop meteor if running
2.1. Make sure you have a packages folder: mkdir packages
Locally link your package:
3.1 If you have mrt installed: Run mrt link-package /path/to/package in a project dir
3.2 If you don't have mrt: ln -s /path/to/package packages/package
Then run meteor add developer:package-name, do not forget to change package name
Run meteor in a project dir
From now any changes in developer:package-name package folder will cause rebuilding of project app
Download the package and place it in new package directory in your project root.
open the package.js inside the downloaded package and remove the author's name in the property "name:"
e.g: - name:'dburles:google-maps' to name:'google-maps'
then run
meteor add google-maps