As per Firebase Functions with Yarn workspaces, I'd like to deploy a monorepo to Firebase using Yarn Workspaces. I can successfully deploy the "web" aspect to Firebase Hosting, which references a shared "core" workspace. However, attempts to do the same with the "functions" workspace on Firebase Functions fails.
I'm using Yarn Workspaces with the following folder structure:
packages/
core/ // name: firebase-monorepo-core: custom core package
functions/ // name: firebase-monorepo-functions: firebase functions package
web/ // name: firebase-monorepo-web: react package
These have been configured in the root package.json file:
"workspaces": {
"packages": [
"packages/*"
],
"nohoist": [
"**/firebase-monorepo-core"
]
}
In an attempt to enable Yarn workspaces in Firebase (and therefore share my core package) I've used the nohoist feature to create symlinks to the core workspace in functions and web as per twiz's Stackoverflow answer.
The core package also exists as a dependency in functions and web:
"dependencies": {
"firebase-monorepo-core": "*"
}
There are no problems when any of this runs locally, and in fact deployment of the web package to Firebase hosting works fine. However, deployment of the functions package to Firebase functions throws an error:
I've created a Github repository https://github.com/cjmyles/firebase-monorepo to demonstrate this, and the resultant web workspace can be viewed at https://fir-monorepo.firebaseapp.com.
I can get the functions package to deploy if I yarn pack the core workspace and reference it as a tarball in the package.json file, but I really don't like that solution and it will require more overhead to automate it.
Any advice would be appreciated to resolve this issue.
The issue is that firebase-tools assumes that all packages used by your function are available in npm.
A quick solution is to use firelink.
cd ./packages/functions
yarn add -D #rxdi/firelink
Add an equivalent section to your functions package.json for all shared dependencies.
"fireDependencies": {
"#org/common": "../../packages/common"
},
Change your deploy script to use firelink binary
"scripts": {
"build": "tsc --build tsconfig.build.json",
"predeploy": "yarn build",
"deploy:functions": "firelink deploy --only functions"
}
Just a heads up does not work with "devDependencies", but you should not be needing them in production anyway.
Update your firebase.json to run the predeploy target.
"functions": {
"predeploy": ["npm --prefix \"$RESOURCE_DIR\" run predeploy"],
"source": "packages/functions"
},
Lastly remove any local yarn.lock files in the workspace package. If you wish to lock the dependencies add npm install to your predeploy step. If anyone has a better solution to this let me know. It seem unfortunate that yarn does not have the ability to generate lock files on demand in a workspace.
one potential solution is to use Lerna.
You can then publish your core package to a private GitHub package and use Lerna to create a symlink to the core package for local development.
I got this to work but it was a pain and hacky. So far it's working well though. I'm using NPM Workspaces, but the concept should apply to any project where node modules are hoisted to the root folder. I'm also using GitHub Workflows / Actions for CI and TypeScript, so all of this works within those environments.
Build my dependent packages using TypeScript's tsc
Copy the compiled files into the functions folder (functions/src/domain to be exact) so that they get uploaded by Firebase CLI
cp -r packages/domain firebase/functions/src/domain
Insert local dependency inside functions/package.json. I'm doing it with sed, which GitHub actions supports:
sed -i 's/"dependencies": {/"dependencies": { "#mycompany\/domain": "file:src\/domain",/' package.json
Before that command, my package.json looks like this:
"dependencies": {
"lodash": "^4.17.20",
...
After that command, it looks like this:
"dependencies": { "#mycompany/domain": "file:src/domain",
"lodash": "^4.17.20",
...
Then deploy: firebase deploy --only functions
Not pretty, but it works with full automation. 😁
I have forked an npm package on GitHub, made changes to it, and now want to install the package in my Meteor app directly from GitHub.
My package.json looks like so:
{
"dependencies": {
"semantic-ui-react": "git+https://git#github.com/nolandg/Semantic-UI-React.git",
}
}
I then run
meteor npm install
Which appears to work fine and tells me it's installed the package:
semantic-ui-react#0.61.6 (git+https://git#github.com/nolandg/Semantic-UI-React.git#f27d5c736e5de1eed0acf7769f18caee57578526)
And indeed the package appears in the node_modules folder. But when I try to start my Meteor app, I get this error:
Cannot set property '/my-website/node_modules/semantic-ui-react/package.json' of undefined
at Resolver._resolvePkgJsonMain (/tools/isobuild/resolver.js:320:9)
Has anyone successfully install an npm package in a Meteor app directly from GitHub? I can't figure this one out. Thanks!
Meteor version: 1.4.2.3
The main reason why the package does not work when fetching from git is because it is not configured to work that way. This is not a Meteor specific problem, but a problem that a JS developer may face sometimes.
For this particular case there are two problems:
The whitelist files field in package.json only contains src and dist folder. That means when you fetch it by npm almost all config files needed to build the code are gone.
Code for this package requies to be built in order to work with your code. This is done when the author publish it to npm, but you fetch it directly from github so this step is undone.
Because you already folked and modified the package, so let modify the package.json as below (remove all the comments I added them to give you some explanation), push it to github, and fetch it again by npm:
// remove the "files" field
// ...
"scripts": {
// this script is used to build the package
"postinstall": "postinstall-build dist \"npm run build:commonjs\""
// ...
},
"dependencies": {
// this helps build the package
"postinstall-build": "^2.1.3"
},
// ...
Packages are not usually installed from github, they are published, which means that many versions of a package are available, you can choose which one you get. I'm not sure if what you are doing is possible, but it's certainly inadvisable.
If you want to make changes to a github package, you can download the it to your local machine and do npm link, so that it uses your local package instead of the one on npm. Read more about it at https://docs.npmjs.com/cli/link
Why do you not use simple command?
meteor npm install https://github.com/nolandg/Semantic-UI-React.git
I did:
meteor create test
cd test
meteor npm install
meteor add react react-dom
meteor npm install https://github.com/nolandg/Semantic-UI-React.git
meteor
And no errors (-:
Recently I started Angular 2 tutorial at https://angular.io/docs/ts/latest/tutorial/.
and left off with Angular 2 beta 8.
Now I resumed the tutorial and latest beta is beta 14.
If I simply do npm update a few modules (preloaded with the tutorial) are updated but not Angular2 (I can see that with npm ls).
If I do npm update angular 2 or npm update angular2#2.0.0beta.14 it just does nothing either.
The command npm update -D && npm update -S will update all packages inside package.json to their latest version, according to their defined version range. You can read more about it here.
If you want to update Angular from a version prior to 2.0.0-rc.1, then you'll need to manually edit package.json, as Angular was split into several npm modules. Without this, as angular2 package points to 2.0.0-beta.21, you'll never get to use the latest version of Angular.
A list with some of the most common modules that you'll need to get started can be found in the quickstart repository.
Notes:
A cool way to stay up to date with your packages' latest version is to use npm outdated which shows you all outdated packages together with their wanted and latest version.
The reason why we need to chain two commands, npm update -D and npm update -S is to overcome this bug until it's fixed.
Another nice package which I used for migrating form a beta version of Angular2 to Angular2 2.0.0 final is npm-check-updates
It shows the latest available version of all packages specified within your package.json. In contrast to npm outdated it is also capable to edit your package.json, enabling you to do a npm upgrade later.
Install
sudo npm install -g npm-check-updates
Usage
ncufor display
ncu -u for re-writing your package.json
Upgrade to latest Angular 5
Angular Dep packages:
npm install #angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router}#latest --save
Other packages that are installed by the angular cli
npm install --save core-js#latest rxjs#latest zone.js#latest
Angular Dev packages:
npm install --save-dev #angular/{compiler-cli,cli,language-service}#latest
Types Dev packages:
npm install --save-dev #types/{jasmine,jasminewd2,node}#latest
Other packages that are installed as dev dev by the angular cli:
npm install --save-dev codelyzer#latest jasmine-core#latest jasmine-spec-reporter#latest karma#latest karma-chrome-launcher#latest karma-cli#latest karma-coverage-istanbul-reporter#latest karma-jasmine#latest karma-jasmine-html-reporter#latest protractor#latest ts-node#latest tslint#latest
Install the latest supported version used by the Angular cli (don't do #latest):
npm install --save-dev typescript#2.4.2
Rename file angular-cli.json to .angular-cli.json and update the content:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"project": {
"name": "project3-example"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
UPDATE:
Starting from CLI v6 you can just run ng update in order to get your dependencies updated automatically to a new version.
With ng update sometimes you might want to add --force flag.
If you do so make sure that the version of typescript you got
installed this way is supported by your current angular version,
otherwise you might need to downgrade the typescript version.
Also checkout this guide Updating your Angular projects
For bash users only
If you are on are on Mac/Linux or running bash on Windows(that wont work in default Windows CMD) you can run that oneliner:
npm install #angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router,compiler-cli}#4.4.5 --save
yarn add #angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router,compiler-cli}#4.4.5
Just specify version you wan't e.g #4.4.5 or put #latest to get the latest
Check your package.json just to
make sure you are updating all #angular/* packages that you app is relying on
To see exact #angular version in your project run:
npm ls #angular/compiler or yarn list #angular/compiler
To check the latest stable #angular version available on npm run:
npm show #angular/compiler version
Official npm page suggest a structured method to update angular version for both global and local scenarios.
1.First of all, you need to uninstall the current angular from your
system.
npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli
npm uninstall -g #angular/cli
2.Clean up the cache
npm cache clean
EDIT
As pointed out by #candidj
npm cache clean is renamed as npm cache verify from npm 5 onwards
3.Install angular globally
npm install -g #angular/cli#latest
4.Local project setup if you have one
rm -rf node_modules
npm install --save-dev #angular/cli#latest
npm install
Please check the same down on the link below:
https://www.npmjs.com/package/#angular/cli#updating-angular-cli
This will solve the problem.
Alternative approach using npm-upgrade:
npm i -g npm-upgrade
Go to your project folder
npm-upgrade check
It will ask you if you wish to upgrade the package, select Yes
That's simple
If you want to install/upgrade all packages to the latest version and you are running windows you can use this in powershell.exe:
foreach($package in #("animations","common","compiler","core","forms","http","platform-browser","platform-browser-dynamic","router")) {
npm install #angular/$package#latest -E
}
If you also use the cli, you can do this:
foreach($package in #('animations','common','compiler','core','forms','http','platform-browser','platform-browser-dynamic','router', 'cli','compiler-cli')){
iex "npm install #angular/$package#latest -E $(If($('cli','compiler-cli').Contains($package)){'-D'})";
}
This will save the packages exact (-E), and the cli packages in devDependencies (-D)
Just start here:
https://update.angular.io
Select the version you're using and it will give you a step by step guide.
I recommend choosing 'Advanced' to see all steps. Complexity is a relative concept - and I don't know whose stupid idea this feature was, but if you select 'Basic' it won't show you all steps needed and you may miss something important that your otherwise 'Basic' application is using.
As of version 6 there is a new Angular CLI command ng update which intelligently goes through your dependencies and performs checks to make sure you're updating the right things :-)
The steps will outline how to use it :-)
npm uninstall --save-dev angular-cli
npm install --save-dev #angular/cli#latest
ng update #angular/cli
ng update #angular/core --force
ng update #angular/material or npm i #angular/cdk#6
#angular/material#6 --save
npm install typescript#'>=2.7.0 <2.8.0'
Best way to do is use the extension(pflannery.vscode-versionlens) in vscode.
this checks for all satisfy and checks for best fit.
i had lot of issues with updating and keeping my app functioining unitll i let verbose lense did the check and then i run
npm i
to install newly suggested dependencies.
If you are looking like me for just updating your project to the latest these is what works form me since Angular 6:
Open the console on your project folder: If you type: ng update then you will get the below message:
We analyzed your package.json, there are some packages to update:
Name Version Command to update
--------------------------------------------------------------------------------
#angular/cli 7.0.7 -> 7.2.2 ng update #angular/cli
#angular/core 7.0.4 -> 7.2.1 ng update #angular/core
There might be additional packages that are outdated.
Run "ng update --all" to try to update all at the same time.
So I usually go straight and do:
ng update --all
Finally you can check your new version:
ng version
Angular CLI: 7.2.2
Node: 8.12.0
OS: win32 x64
Angular: 7.2.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
Package Version
-----------------------------------------------------------
#angular-devkit/architect 0.12.2
#angular-devkit/build-angular 0.12.2
#angular-devkit/build-optimizer 0.12.2
#angular-devkit/build-webpack 0.12.2
#angular-devkit/core 7.2.2
#angular-devkit/schematics 7.2.2
#angular/cli 7.2.2
#ngtools/webpack 7.2.2
#schematics/angular 7.2.2
#schematics/update 0.12.2
rxjs 6.3.3
typescript 3.2.4
webpack 4.28.4
I have a fairly in-depth project setup with 10-20 libraries, and I'm trying to build an executable which uses them.
I have .NET Core 1.1.0 preview1 installed. With new projects, everything works fine. dotnet restore and dotnet build also work fine for this project, but somewhere along the line, something is wrong, and it will not run.
dotnet run yields:
The specified framework 'Microsoft.NETCore.App', version '1.1.0' was not found.
- Check application dependencies and target a framework version installed at:
C:\Program Files\dotnet\shared\Microsoft.NETCore.App
- The following versions are installed:
1.0.1
1.1.0-preview1-001100-00
- Alternatively, install the framework version '1.1.0'.
My library projects have:
"frameworks": {
"netstandard1.6": {
"dependencies": {
"NETStandard.Library": "1.6.1-preview1-*"
}
}
}
My executable project has:
"frameworks": {
"netcoreapp1.1": {
"dependencies": {
"Microsoft.NETCore.App": {
"version": "1.1.0-preview1-*",
"type": "platform"
}
},
"imports": [ "dnxcore50", "portable-net45+win8" ]
}
}
It does also reference another project which is set up with an entry point, whose frameworks section is identical, minus the imports section.
I've also updated any EF Core and ASP.NET Core references to their preview1-* versions, though I am using plenty of other dependencies too (which weren't versioned in the same way).
So, as you can see, I have 1.1.0-preview1-001100-00 installed, am not referencing 1.1.0 anywhere, and yet receiving this message looking for it.
What could be causing this, and/or how can I track it down? I've tried scouring project.json.lock files, but can't see any references to 1.1.0 there, with the exception of an entry for Microsoft.NETCore.App/1.1.0 under libraries and again under the ".NETCoreApp,Version=v1.1" part of targets.
Wildcards aren't appropriate and don't work for this kind of platform dependency.
It's necessary to use
"version": "1.1.0-preview1-001100-00"
and not
"version": "1.1.0-preview1-*"
I have faced with the same problem deploying on Heroku instance. In may case during deployment the latest build is used (https://github.com/sass/node-sass/releases/download/v3.10.1/linux-x64-46_binding.node).
As a workaround it works if change
"Microsoft.NETCore.App": {
"version": "1.1.0-preview1-*",
to
"Microsoft.NETCore.App": {
"version": "1.1.0",
but on the other hand, it stops to work on local machine in this case...
In a meteor project, I want to pull a few frontend packages. bower can pull many frontend dependencies which are not yet available using meteor add. In many cases, when the meteor packages are available, their versions are lagging behind the official ones, sometimes too behind to consider.
Being a bit of a Meteor newb I've tried to install bower (the most recent meteor bower package I could find):
$ meteor add bozhao:bower
but then, when I run the meteor server it crashes:
W20160110-15:37:57.997(2)? (STDERR) /Users/igal/.meteor/packages/meteor-tool/.1.1.10.7bj3ks++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/fibers/future.js:245
W20160110-15:37:57.998(2)? (STDERR) throw(ex);
W20160110-15:37:57.998(2)? (STDERR) ^
W20160110-15:37:57.998(2)? (STDERR) ReferenceError: window is not defined
W20160110-15:37:57.998(2)? (STDERR) at bower_components/leaflet/dist/leaflet-src.js:526:1
Question is:
What's the best strategy to install bower and use it in a meteor project? An acceptable answer may show the flow for correctly installing bower, then the leaflet package and it's leaflet.markercluster extension
Sep 27th 2016 edit
The meteor community switched to npm, thus using bower is no longer required. Simply do npm install <package> and import <package> in your client-side code, and you can start using the component!
meteor search bower turns up a few hits, which I haven't taken the time to compare in any depth. I went with mquandalle:bower as I found it recommended here. Perusing the doc, here is what worked for me:
npm install -g bower # If not already done
meteor add mquandalle:bower
echo '{ "directory": ".meteor/local/bower" }' > .bowerrc # If you use bower install --save
Then create a bower.json file at the top of the project tree that reads like this:
{
"name": "MyApp",
"version": "0.0.1",
"dependencies": {
"leaflet": ">0",
"leaflet.markercluster": ">0"
},
"private": true
}
Re-run your app with meteor run and presto, the stylesheets and JavaScript of your modules are embedded into your page without even having to edit the <head>.