I'm relatively new to node and the npm package system. For my redux/react web application, I currently use the photoswipe package in combination with react-photoswipe. Now I wanted to add some extra functionality to the photoswipe package, so I went into the photoswipe folder in the npm-modules folder, made the required changes and ran npm build in there.
This works, but the changes will of course be lost as soon as for whatever reason the node_modules-folder gets deleted and recreated, or if I upgrade the photoswipe package.
What is the correct workflow in this case? Can I somehow clone the existing package, change it, then store it in something like a local repository that npm recognizes? Thanks alot for clarification!
The answer depends on the license of the photoswipe package. If it is open source then I would highly recommend that you open a pull request with your changes so that everyone benefits from your feature :)
That being said, you can always clone the package, make your changes and reference the photoswipe package from your github repo. For e.g.: npm install github:alex-cory/fasthacks
Related
all! I currently met a difficulty with my project. I want to modify the code of a component from a UI library (like Semantic-UI, Material-UI). What I do now is just edited the code from the node_modules. But the reality is no matter how I change the code from node_modules, my project will not be affected. Why this will
Well that's because most modules have build process which you need to run before using them. Also editing a module directly is not a good idea because any change you do to them is guaranteed to be lost after next npm install.
As Vuetify is a MIT licensed, I suggest to fork its GitHub project and then publish it as your own npm package.
I've followed the instructions in this URL (https://github.com/react-component/calendar) to install a component app in my dependencies. I have succesfully installed it, imported it and it is visible and usable in my web app.
npm install rc-calendar
import Calendar from 'rc-calendar';
<Calendar />
However, I can't seem to edit it or find a 'Calendar.js' file to make changes to it? I'm able to see it in my package.json file but not more than that
You'll find the source files in your node_modules folder in your project. But I would not edit them there. If you want to use that plugin as a starting point and edit it from there, I recommend downloading the source files from the github repo and including it in your project as a regular .js file / regular component. Then you can edit from there. It looks like that plugin has many files that are written in typescript.
TL;DR You can, but you shouldn't.
When you use npm it's supposed that you don't change those packages, what you can do is create your own version. If you want to find the source code, some packages come with it, you'll find it in: <project folder>/node_modules/rc-calendar.
The typical convention is to not edit packages installed via npm . However, you can clone the package repo and include it in your project. There, you can do what ever you want.
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.
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
I am currently using the accounts-ui-bootstrap-3-blaze package in my Meteor application and I want to modify the login_buttons_dropdown.html file to just add an additional button in the drop down.
How can I patch this package in a 'clean' way?
I already downloaded the package and embedded it manually via the smart.json file, but then I was not able to perform an automatic update via mrt.
Any help would be greatly appreciated.
If it's only for the purposes of a single project then the easiest way would be not to use mrt at all, but put the package source code to the packages directory manually. You will also have to update the .meteor/packages file by yourself. One advantage of this solutions is that any updates to the package source code will be automatically detected by Meteor, so you can take advantage of the hot-code-push feature. This is particularly convenient while in the development process.
If you're planning to re-use your patches in other projects, then I would recommend forking the original repository. It should be quite easy as it will be probably hosted on github. You don't need to publish a package on the atmosphere to be able to install it with mrt command. The only thing you need to do is tell the meteorite to look for this particular package in your custom github repository, so:
"accounts-ui-bootstrap-3-blaze": {
"git": "https://github.com/yourUsername/accounts-ui-bootstrap-3-blaze.git"
}
in your smart.json and you are good to go.