Loading Sonata Admin Assets via Bower - bower

I have never used Bower for package management and having managed to install on my localhost, the elements are not downloaded to the rightful folders.
How can I get around doing this? For past projects where I had less time, I copied files into /vendor folder and installed assets runs and hides.
Please assist

If you are only using bower to manage the asset dependencies of Sonata Admin then in the root of your project all you need are these two files:
.bowerrc
{
"directory": "web/bundles/sonatacore/vendor"
}
bower.json
{
"name": "my app",
"version": "1.0",
"license": "MIT",
"dependencies": {
"sonata-project-admin-bundle": "master"
},
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}
This way when you do a bower install, it will copy all of sonatas dependencies into the right folder.
The alternative is to integrate the bower install into a composer post install script that moves the files from bower_components into the right folders.
Hope that helps.

Related

Is putting monorepo packages under a package folder a convention, or do yarn workspace expect that?

My monorepo folder structure looks like this, but I haven't got cross app imports to work for yarn workspaces, that is, I can't import from shared to app1 or app2.
./
app1
app2
shared
server
package.json
Nearly all other workspaces I've seen includes a packages folder, is this required or just a convention? My folder structure would in that case look like:
./
packages
app1
app2
shared
server
package.json
Do I need to refactor for workspaces to work?
It's just a convention. You need to list your workspaces in package.json:
"workspaces": [
"app1",
"app2",
"shared",
"server"
],
The convention let's you use a glob (and presumably streamlines some other npm/yarn commands that you want to run across all packages):
"workspaces": ["packages/*"],

Clarification: How to add the customize package inside my app in react-native

I have changed a react-native package src component as per my requirement. How can I add that in my app?
(i.e) I have added react-native-floating-action and changed some styles in FloatingActionItem.js and FloatingAction.js file. How can I add the changes inside in my app.
Because If I remove the node module all the changes are gone after installing it again.
In your case, once you have modified npm package once you have to reinstall all packages and your changes are not be saved because you are installing dependency from GitHub repository. So anyway you have two options to edit npm package and save it.
Copy code from the original repository and make your own component inside your re-usable components folder. ( Before copy whole code read the license of selected package )
Simply you can fork the original repository to your github account and after that you can make changes to forked repository.
Personally I choose Second (2) option instead of First one
STEPS
Fork from the original repository
After that make clone of this forked repo to your machine and change whatever you need (Here styles).
After changing push the changes and commit into your forked repo
After that you need to remove old original package from your dependency
npm uninstall --save react-native-floating-action
After that install forked repo by this command
npm install git+https://git#github.com/myRepo/angular-translate.git
Instead of https://git#github.com/myRepo/angular-translate.git add your forked project URL here
You can write a custom script using JavaScript which capable of replace, delete and add lines.
NPM automaticly execute postinstall after npm install command. You need to put your custom script in postinstall within package.json. For an example:
package.json:
{
"name": "my_package",
"description": "",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"fix:issue": "node ./scripts/issue.js",
"postinstall": "npm run fix:issue"
},
"repository": {
"type": "git",
"url": "https://github.com/ashleygwilliams/my_package.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/ashleygwilliams/my_package/issues"
},
"homepage": "https://github.com/ashleygwilliams/my_package"
}
Keep your copy on root project folder or anywhere you prefer.
yarn remove <current package name in package.json>.
If this is native library, run pod install again for iOS.
yarn add file:/path-to-local-edited-package-folder
Rest of the steps will work same (pod install, etc)
Another approach as you mentioned (I don't suggest it as native libraries might not be removed completely)
Remove package from package.json.
On package.json file "library name same as current": "./<path to your folder>" or any other location.
yarn install

Exclude some folders, while doing electron-packager . --asar

I use 'electron-packager . --asar' command to package my project folder. but there are some folders which must not be included while packaging.
Is it possible to exclude some of folders?
If so, I would like to include those folders in exe file path so that the user can manage their files. Is there any way to do this?
Thank you in advance!
Is it possible to exclude some of folders?
Yes, you can do it with ignore
You can use --ignore to ignore files and folders via a regular
expression (not a glob pattern). Examples include --ignore=.gitignore
or --ignore=".git(ignore|modules)".
Take a look at API document here
If so, I would like to include those folders in exe file path so that the user can manage their files. Is there any way to do this?
You can use extraResource API to include them to resources directory (document here):
extraResource
String or Array of Strings
One or more files to be copied directly into the app's
Contents/Resources directory for OS X target platforms, and the
resources directory for other target platforms.
Hope this help.
I had similar problem. I wanted to exclude qpdf folder containing (*.exe, *.dll) from asar package. My qpdf.exe could not run without needed linked .dll directly from asar package.
I just added --extra-resource parameter into electron packager syntax where I am excluding whole qpdf folder. This folder and all files inside are then in resource folder with asar package.
Part of my package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron .",
"package-win": "electron-packager . hiss_xread --overwrite --extra-resource=\"./qpdf\" --asar --platform=win32 --arch=x64 --icon=src/xRead.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"Hiss xRead\""
},
Resource folder in builded app look like this.

Lerna Monorepos and Travis-CI

I need to setup Travis in a monorepo,
I couldn't find resources.
How can I setup the npm deploy for every package?
To setup a lerna repository with travis:
Using:
$ node -v
v10.14.2
$ npm -v
6.4.1
With the structure:
packages/
foo
index.js
package.json
package-lock.json
bar
index.js
package.json
package-lock.json
package.json
package-lock.json
lerna.json
.travis.yml
package-lock.json must be included for all packages.
package.json
{
"name": "my-project-name",
"scripts": {
"postinstall": "lerna bootstrap",
"test": "my-testing-script",
...
},
"dependencies": {
"lerna": "^3.7.1",
...
}
}
NPM script postinstall to set up the packages before running script test. Some people install the package globally, but since you already installed it locally, you don't need to.
Since this is the main package.json, you can put all the dependencies in dependencies.
The package.json for the packages can be configured as you need.
lerna.json
{
"packages": [
"packages/*"
]
}
The file can be configured however you need.
.travis.yml
language: node_js
node_js:
- "10.14"
script: npm run test
Here you can configure the testing environment the way you need.
In my case, I needed to transpile some files with babel and I used before_script to run this process before the testing script is run.

Install jquery.min.js with bower

When installing a dependency with bower, how would I get the minified version of the target dependency?
Say I wanted to install jquery-1.11.2.min.js with bower what would be the command for that?
Since the minified version of jquery is install as well when running bower install jquery, you can override the main file it points to, and point it to the minified jquery file.
If you look in the bower.json of bower_components/jquery the main file is:
"main": "dist/jquery.js"
You can override the main file in your projects bower.json by adding:
{
"overrides": {
"jquery": {
"main": "dist/jquery.min.js"
}
}
}
Try to explore Grunt (JS task runner).
Bower is for dependencies management, while Grunt is designed to act on these dependencies (you can compile CSS, do tasks like minification and concat, etc). There’s a Grunt module called “grunt-bower-task” that facilitates integrating the two. Enjoy! :)

Resources