I'm trying to migrate some of my atmosphere packages to npm packages and ran into some issues with images not loading in the npm package uploadcare-widget. The package references images in the folder node_modules/uploadcare-widget/images. The images are displayed on the page via css, for example:
.uploadcare-dialog-file-sources:before {
background-image: url("node_modules/uploadcare-widget/images/arrow.png");
}
I can see my app attempts to load the images from the network inspector, but the image doesn't load from the displayed path. I can confirm that image files are in the specified file directory. Is there something special I need to do to be able to load images from an npm package?
I tried import 'node_modules/uploadcare-widget/images'; and other variations inside the public folder. I'll probably end up going back to using an atmosphere package :\
Probably, you use UPLOADCARE_SCRIPT_BASE like in readme, but maybe its wrong way.
Try to use just this code
import uploadcare from 'uploadcare-widget'
instead readme-like code.
Related
So I downloaded a package from NPM its called react-csv-importer. My React app is using scss to customize layouts. I am coding from a react-bootstrap template I purchased from react-bootstrap.
Their layout is confusing me and I cant seem to understand how to customize an NPM package I install...
Here is a photo of the index.css file that contains everything I need to edit
Here is a screenshot of the layout of the SCSS
Here is another screenshot inside the theme folder, It contains most of the scss files
Now shouldnt I just be able to create a new file called something like csv-importer.scss and then copy the code from index.css thats located in the NPM package and update it in the SCSS? How do people go about editing an NPM install this way?
You should never customize or touch a package you've installed through npm. If you change the package in node_modules then 1. it will get overwritten as soon as you do npm install again, 2. it won't be saved to your github since you need to exclude node_modules with .gitignore. node_module packages should be left alone, untouched.
Instead you should import the things you need to use from packages and use it in your own code. So if you have a package called "example" that you've installed through npm then you need to do:
import Something from 'example'
// use Something here
In order to use it. This is how you use stuff from node_modules.
In your case you should likely import the styles from the package you've installed, either through scss #import or through node import, after which you can use it in your own code. However you should not modify the original code they have.
If the package they have is .css then you can't change that to .scss, you'll just have to use it as .css. Which is not such a big deal since scss will get compiled to css anyways.
What you can do is to import all of their styles through #import and then to overwrite the things you want in your own code or scss.
For example, I want to use Slider Pro in my meteor project as an npm package without having to create an Atmosphere package out of it, however the docs (https://github.com/bqworks/slider-pro) say to include files in <head>. See Image Snippet of Docs. How would I do that?
There are a few ways you could do this. Either way you choose you still need to add it as an npm package through Meteor:
meteor npm install --save slider-pro
And then what I commonly do, is create a file inside imports/startup/client directory called vendor.js, and just use this code in the vendor.js file:
import '../../../node_modules/slider-pro/dist/js/jquery.sliderPro.js';
import '../../../node_modules/slider-pro/dist/css/slider-pro.css';
Then in the file located at imports/startup/index.js just add this to include that vendor.js file:
import './vendor.js';
You just need to make sure that the path is correct, in the vendor.js file, as you can see, since my vendor.js file is nested 3 directories deeper than the node_modules directory, all files have to be prepended with ../../../ which basically means "go back three directories"
I'm trying out semantic-ui in a meteor/npm environment and am left a little dissatisfied with the install process. I love the interactivity, but it's made a mess of my project. I now have semantic folders inside my node_modules directory and outside, a semantic.json config file in the root, and my node_modules directory is now just completely full of ugly gulp folders (node_modules was empty before the install). Is this how it is supposed to go? If so, I'm out, I want to keep it clean, simple, and contained.
I also faced this issue. I ended up doing the following:
npm uninstall gulp semantic-ui
And add semantic like this:
create an empty custom.semantic.json file within your client library folder. suggested location of /client/lib/semantic-ui/custom.semantic.json depending on your applications structure
Run in termnial meteor add semantic:ui flemay:less-autoprefixer jquery
That way you have 1 folder of semantic inside your lib.
im trying to install PhantomJS in a MeteorApp.
I have done those step:
Add the npm package
meteor add meteorhacks:npm
Run meteor to let the npm package to pre-initialise
meteor
A file packages.json has been created at the root. Edit it to:
{
"phantomjs": "1.9.13"
}
A this point everything seem to work. But i try to test with this exemple that ive found here :
https://github.com/gadicc/meteor-phantomjs
But i dont understand where to put my phantomDriver.js
Why is phantomDriver.js is in assets/app/phantomDriver.js... but after, they say to create the file in ./private/phantomDriver.js...
Thank for clear explication :)
In development mode you create the file in /private/phantomDriver.js. When you build a meteor app it refactors everything into an application bundle which can be run.
After meteor builds your app it stores stuff from private into assets. For phantomjs to execute this file it needs to look in this directory. You don't have to create it. This is how meteor works internally.
If you look in your .meteor/local/build/programs/server directory the assets directory is there with anything you placed in private.
From the context of where your meteor code runs (the server directory above) the assets directory runs from this directory when your project is running.
Keep in mind when you deploy your app it loses its entire project structure and becomes something else. Gadi's phantomjs project is designed to work in production environments too.
TLDR; Don't worry about the assets directory, keep your file in /private/phantomDriver.js. Meteor should take care of the rest.
I want to run two different Meteor apps on the same server (on different ports) but I want to change something in one of Meteor's core packages and I want one app to use the original package and the other app to use the modified one. How could I do it?
A bit more straightforward answer, based on answer from here :
Create packages folder in your project and change location to that folder ('cd yourproject' && 'mkdir packages' && 'cd packages')
Fetch files from git ('git clone https://github.com/YOUR_PACKAGE_ADDRESS' - you need to have git installed)
Inside fetched package folder find package.js and edit inside 'Package.describe' name value, for example by adding '-manually-modified'
Edit files you need to modify inside fetched package folder.
Add package to project (meteor add package-name-manually-modified)
You can get the package's files at the github repo : https://github.com/meteor/meteor/tree/master/packages
Fetch the files you want except the package.js files and add them to your project. Of note is you need to ensure their loading order sometimes so you might have to modify the file names, to have a look at the loading order have a look at package.js. By default meteor orders file by name but packages don't necessarily use that.
You can avoid renaming the files if you just mod the package and add it back using meteorite : https://github.com/oortcloud/meteorite
Full instructions on how to make a smart.json : https://atmosphere.meteor.com/wtf/package. If its anything nice please consider adding it to atmosphere too!
I have my packages in my user folder at its root as a hidden folder called .meteor.
Perhaps you can check there? On a mac it would be under:
~/.meteor/packages/your package name
You must also now go into a file there os.json, and change the "length" variable for the file you changed to match the new byte file size. Otherwise it might not compile, but try compiling first and see if its an issue that you changed some package code.