Import jquery npm package in meteor client app - meteor

I try to import the jquery npm package (it is already installed on the project) instead of the atmospherejs package but I would like to import it in the whole client part. I use the btws:bootstrap which needs jquery (with many others).
How can I manage to do that ?

I suggest you use both Bootstrap and jQuery from npm.
Do this:
$ meteor remove twbs:boostrap
$ meteor npm install --save bootstrap
$ meteor remove jquery
$ meteor npm install --save jquery

Related

How to export SASS as npm package and use it just like bootstrap?

I want to make a CSS framework but, I don't know how to export SASS as npm package to use it for future projects

aldeed:collection2 not working with iron cli

I am new to meteor iron and I am trying to install aldeed collection2 but the app is crushing
W20190215-12:44:48.023(2)? (STDERR) WARNING: npm peer requirements (for aldeed:collection2) not installed:
W20190215-12:44:48.024(2)? (STDERR) - simpl-schema#>=0.0.0 not installed.
I have tried to install simple-schema but nothing is working.
meteor npm install simpl-schema --save
I have also removed and reinstalled collection2 but I still get the same error. What is it that I am missing?
I tried to reproduce the error with a new created repo, that contains the dependencies you have listed but everything runs fine on my side.
However, I found, thataldeed:collection2-core is now somewhat deprecated and being merged back into aldeed:collection2 as you can read in the project repository on GitHub:
MPORTANT: This package has been merged back into aldeed:collection2 as version 3.0.0 of that package. Refer to https://github.com/aldeed/meteor-collection2/blob/master/CHANGELOG.md#300
Create issues and PRs in the other repo going forward: https://github.com/aldeed/meteor-collection2/issues
Issues remain enabled on this repo for reference to existing issues only.
So a good first step would be to remove the deprecated package and install the updated one:
meteor remove aldeed:collection2-core
meteor add aldeed:collection2
If you want to start from a new clean project you can reproduce these steps to get to a running starting point here:
meteor create someprojectname
cd someprojectname
meteor add iron:router twbs:bootstrap aldeed:autoform aldeed:collection2
meteor npm install --save iron simpl-schema
meteor
The project will start without errors. From here you can start including your former code and see if the error will come back (which is then likely to be an issue inside your code) or not.
Important note on twbs:bootstrap:
The package twbs:bootstrap is using an old version (3.3.6) which is considered to contain several security vulnerabilities (read here and here).
If you want to use the latest Bootstrap you may rather install bootstrap using npm like so:
meteor remove twbs:bootstrap
meteor npm install --save bootstrap#latest jquery#latest popper.js#latest
You need jquery here, too because Meteor does not contain the required version and popper.js handles the Popover, Modal etc.
To include it in your code you need to add these lines to your client code:
import 'bootstrap'
import popper from 'popper.js'
global.Popper = popper
To use Bootstrap 4 with AutoForm you can install imajus:autoform-bootstrap4 (repo) and add the following to your client code:
AutoForm.setDefaultTemplate('bootstrap4')

using flag-icon-css (npm package) with meteor

I'm trying to use the npm package flag-icon-css with meteor.
I'm using sass to modify the icons path as follows:
$flag-icon-css-path: '/npm/node_modules/flag-icon-css/flags';
$flag-icon-rect-path: '/4x3';
$flag-icon-square-path: '/1x1';
#import '{}/node_modules/flag-icon-css/sass/flag-icon.scss';
but I'm stuck as i don't understand what is the correct path for the variable $flag-icon-css-path .
the question is simple : how can I access files that are in a npm package ? what is the correct path ? Do I need to export them all explicitly or something similar ?
It turns out that files from npm packages are not directly visible to the client. A solution should be to wrap the npm package in a meteor package and export what is needed to the client explicitly. In this case the solution is to use an already made package for this npm module : meteor add jss:flag-icon
NPM are packages that should be installed. It would then be able to directly adress it:
https://docs.npmjs.com/cli/install
Go in the folder using the prompt, and execute:
npm install

How to manage packages in Meteor.js?

I couldn't find a clear answer for this anywhere so here it is. Instead of constantly doing
meteor add <package-name>
whenever I want to install a new package. Or instead of creating a bash script that adds and removes all of the packages, it would be nice if there was a more elegant way of doing this. Kind of like packages.json files for npm.
There is .meteor/packages (all meteor add <package-name> does is adding a line in this file)
Additionally, Meteor now supports npm packages directly (since the 1.3 release) and I'd recommend using them for anything that is not particularly related to Meteor. For that you use traditional the npm flow, ie a package.json at the root and npm install
Then in your scripts, you'd do
import {ReactMeteorData} from 'meteor/react-meteor-data';
to import from the Meteor react-meteor-data package, and
import React, {Component} from 'react'; to import from the npm react package.
Having to write here, as it wont allow to comment, yet.
I am on Ubuntu and my packages are at
~/.meteor/packages/<distribution>/<version>/<target(web.browser || web.cordova)

Meteor 1.3 angular meteor project with npm and bower

tl;dr: how looks the workflow of using npm and bower inside meteor 1.3?
In my project ( meteor + angularjs 1) i use bower for several packages, like ngDraggable. Now i want to upgrade my project to meteor 1.3 and use npm + native bower from npm in my project. As the angular-meteor depends on babel package, the babel package tries to compile all files in bower_components. So i thought, that i might be on false path. Is there any defined workflow using bower within meteor 1.3?
The workflow is using npm and ignoring bower

Resources