What gulp-release-tasks exactly does? - angularjs

I couldn't understand what does the gulp-release-tasks module exactly. it's written that it's a "scoped release tasks for gulp" : what is that ?! and that it "bumps the versions of your package.json and bower.json" what does it mean? i found it used in a project generated automatically with the generator-gulp-angular.

Bower and npm are package managers and bower.json and package.json are their configuration files (respectively).
You can install and save your project dependencies with commands like bower install [package] --save which will add records to your bower.json (or package.json).
In those configurations files you specify version of your project and repository (you want to keep clean record of what dependencies belong to which versions of your project):
"repository": "[your repository]",
"version": "0.0.3",
This is where gulp-release-tasks comes into play. It allows you to automate process of managing semantic versioning (doc) of those configs. You can run commands such as gulp bump --minor which will bump version (for example) from v0.0.3 -> v0.1.0, commit changes and automatically push to your repository. Or you can perform those operations directly from your gulp tasks.

Related

How to do a react build, when react-scripts is marked as dev-dependency

There is some license issue with one of the dependencies getting installed with react-scripts.
Project is created using CRA, so react-scripts is marked as dependency in package.json.
If I mark react-scripts as dev-dependency, since i don't need it for production, and install all the packages using 'npm install --production', I will not be able to use build script as react-scripts is not installed.
Browsing around this I see react-scripts should ideally be a Dev-dependency.
So just wanted to check if anyone can help here, how to use build script keeping react-scripts as Dev-dependency? is using webpack as a to bundle would be the only option here?
NPM and package.json initially were created for Node.js, which is intended to either run some scripts, or to run continuously. In this cases you might need some dependencies only when you are developing (for example some debuggers, or nodemon and so on), but don't need them in production.
In case of CRA, you don't need any dependencies on production, since you are building bunch of static files. Generally, you have some build pipeline, that will install all dependencies, build your static files and then transfer only built files to produciton (where only production dependencies may be installed again, or it can be another build step in pipeline). If you don't have such pipeline, you can install all dependencies, build on server and then delete node_modules.

Execution failed for task ':app:bundleDevReleaseJsAndAssets'

When I run my Jenkins build for my React Native project it fails with the following errors:
Unable to resolve module `reactotron-core-client` from `/Users/nfib/Jenkins/Jenkins-Workspaces/ENGA/ENGAL/node_modules/reactotron-redux/dist/index.js`: Module does not exist in the module map
Execution failed for task ':app:bundleDevReleaseJsAndAssets'.
I followed the recommended rm -rf node_modules && npm install but I am not exactly sure that this would help since it seems to me like its a generic solution from the npm team.
React-Native version: 0.53.3 with "reactotron-react-native": "3.5.0", "reactotron-redux": "3.1.0",
Has anyone had similar issues to this? How can I ensure this does not continue to happen?
The issue is your Jenkins build server is unable to locate the reactotron-core-client module which is necessary to complete your Jenkins build. You can see this from your stack trace:
Unable to resolve module reactotron-core-client
The recommended solution from the npm team of:
rm -rf node_modules && npm install
is a generic solution because this command will remove your previous node_modules directory containing your project's dependencies and then reinstall the listed dependencies within in your project's package.json file. This may resolve issues stemming from your lock file as well as versioning issues if npm has been updated on your build server.
This solution may resolve your issue if all of your project's required libraries are listed within your package.json file. However, if the reactotron-core-client library isn't listed as a required dependency within your package.json file this problem will persist moving forward. Perhaps you could try the following:
npm i --save reactotron-core-client
as this will save and install the reactotron-core-client dependency for your project. By save I mean list this library as dependency within your package.json file.
Ideally, moving forward your best bet is to keep your package.json file up-to-date with your project's dependencies as well as installing dependencies prior to attempting a Jenkins build.
Hopefully that helps!

How should I include aws-appsync in AngularJS project

I am working on a AngularJS project that uses bower as package manager and gulp to inject the dependencies into the index.html file. I am not very familiar with both of these tools.
I now want to use AWS AppSync, but it is not available as a bower package.
Currently the AWS SDK is specified as a file dependency in bower.json as:
"aws-sdk": "./thirdparty/script/aws-sdk-2.69.0.min.js",
When I install aws-appsync with npm npm install aws-appsync the node_modules folder for aws-appsync contains multiple js files in the lib directory.
How can I include these with bower or is there another way to do this altogether?
I am currently unable to change much of the build and dependency management process so any suggestions working with the current tools would be much appreciated.
Thanks for reaching out!
The Bower team itself has recommended that people migrate to npm or yarn, and so aws-appsync has not been pushed to Bower.
It might be worth investigating whether you can install directly from github using something like...
bower install <github url>.git
... and install directly from the appsync-sdk github repo.
In the end I hacked together an interim solution until I can move the whole project over to npm and browserify.
I added the aws-appsync package using npm and required it in a new file. This file is then passed through a gulp task that uses the browserify plugin. The added file is then included into the rest of the build process as before.

Installing npm package from fork with yarn + webpack - Can't resolve './dist/

I want to contribute to an open source React Component and I'd like to use a fork of the project in my webpack bundle.
I am using yarn and I tried to install my fork using
yarn add github:Startouf/react-coverflow
However, when webpack tries to compile my bundle, it raises weird errors
ERROR in ./~/react-coverflow/main.js
Module not found: Error: Can't resolve './dist/react-coverflow' in '/Users/Cyril/dev/MyApp/client/node_modules/react-coverflow'
Did I miss something ?
EDIT : when I use the released package from npm, the node module folder contains
LICENSE README.md dist main.js package.json
When I use my fork, it seems like the project isn't compiled and contains
LICENSE README.md package.json src webpack.config.js
Makefile main.js site test
Seems like I'm missing a step... I though doing yarn add with a github fork would automatically make a release but seems like I'm wrong ?
Unfortunately, using a repository directly as source can result in execution error. This is because it's not bundled at all, while the package expects an prebuilt version existing in dist. The bundling scripts are often executed before publishing releases to npm.
Some workarounds are:
execute the prepublish step in the target directory (this depends on
what the project uses)
of course, using the published version is the best. create your own package on npm and upload it.
References: npm issue
The package should be updated to include a prepare step.
A prepare step does exactly what you want in all cases.
https://stackoverflow.com/a/57503862/4612476
You can add the prepare script in package.json#scripts yourself that runs the build. Npm and Yarn will then automatically run the prepare script on install directly from GitHub. You can then treat it like any other package and it will always just work™.
Don't forget the package.json#files section. See the linked answer for more details.

Package dependencies in NPM and Bower

First time user of npm and bower. I am able to install packages correctly but I am not sure how the dependencies work? As an example, I did "npm install angularjs" in my application root which created a folder "node_modules/angularjs/" with some files in it. I can also see that there is a package.json file within the angularjs folder, and it looks like it has not been processed as there is numerous packages listed in it and not installed.
Long story short, should I install all these packages manually or is there a built in feature that npm/bower can also process these sets of dependencies?
UPDATE:
I greatly lack the ability to ask precise questions, I apologise to those who have answered and did not give the correct sypnosis.
What I expect to happen:
Using npm or bower, I want to clarify that if I do an install of one of their packages, will it automatically also install the new package's dependancies or would I need to do a npm/bower install for each of the packages.json or bower.json files manually?
What I did to try make it work:
Created folder D:\Websites\TestSite
Within the folder through CMD, I did a "npm init" and ran through the guide
I followed that up with a "npm install angularjs"
A new folder was created D:\Websites\TestSite\node_modules\angularjs and within this folder there was a "index.js" and package.json file
Opening index.js I get a "require("angular");" and module.exports = window.angular.
The package.json file contains a number of dependancies which has not been installed.
My Result:
As per my expectations, npm install in point 3 above did not install the dependancies of the package.json file after it installed angularjs.
I am not sure but I assume that the index.js file needs to be included in my html and that it required the requirejs library initiated? If this is the case, then requirejs (which I do not have installed on my site) should be a dependancy for angularjs to work, and should be installed prior to giving me the ability to try and initiate it?
Am I missing a step or misunderstanding the functionality of NPM/Bower? Thank you for your patience!
Npm and Bower are great tools for managing your dependencies, i'll try to make it clear in a few words.
In general npm is used for managing your back-end dependencies and Bower is responsible for your front end dependencies.
There are 2 config files:
package.json, here are listed your dependencies that are not used in browser(e.g. bower, grunt). To install all dependencies in package.json run npm install.
Bower.json, here will be listed your "in browser" dependencies(e.g angular, jQuery). Run bower install to install all dependencies listed here in bower_components
You can find a extended guide i wrote here.

Resources