We Keep Coding

How to add static css file to NX lib

I'm using NX.dev with Angular projects and I have a few projects and libs.
Im having a few static CSS/SCSS files I want to share for all projects (Apps & libs)
First CSS file - I want to just bundle it in the projects, in order to do that I added it to the project JSON file per app like this.
"targets": {
"build": {
"styles": [
"libs/ui/src/lib/styles/style.bundle.css"
],
}
}
It's working great, But I'm not getting I'm getting the same effect for the libs (It's not working)...
Second SCSS file - this file is a global variable file, I want this file to be available on-demand in the lib SCSS files.
I want each file to be able to do this:
#import "variables";
Not sure how to achieve that.
Any idea how can I get these two files into my libs?
One file should add on compile and one on-demand.
Thanks in advance!

Outputting compiled babel files to the same folder level

How do I output compiled babel files in the same level as the files. I currently have my script to read the source folder and output the compiled file in a separate folder that retains the folder structure using the code in my package.json
"build:lib": "./node_modules/.bin/babel src/components/ --out-dir lib",
say I have a react component in src/components/Button/Button.js. I want to compile the minified version in src/components/Button/Button.minified.js

File extension options reference: https://babeljs.io/docs/en/babel-cli#set-file-extensions
"build:lib": "./node_modules/.bin/babel src/components/ --out-dir src/components/ --out-file-extension .minified.js",
Note: this isn't minified, but transpiled? I don't see where you used a minifier?

how to include external javascript or css in webpack angular2

I was starting an angular 2 project with webpack.I am using angular2-webpack-starter https://github.com/AngularClass/angular2-webpack-starter.
I want to include external javascripts and css in my app.I have checked some blogs but I found them confusing.

I'm guessing by external css and js you mean downloaded files that you have in your project somewhere. If you've used the webpack starter seed as is you most likely have an assets folder inside src/ thats already set up for you to place external css and js files in and list them in the index.html file.
If not, either redownload the seed if you want to start again, or you can create this folder under src, and include the files in the index.html file, something like
<script src="/assets/css/lib.min.css" />
<script src="/assets/js/lib.min.js" />
If you are bundling using webpack then you will also need to tell webpack to move the assets folder to the create location. In webpack.config.js you can do the following:
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
...
plugins: [
new CopyWebpackPlugin([
{ from: 'src/assets', to 'assets' }
]),
...
}

Ember build output (dist folder)

In Ember JS project, we have package.json (for NPM managed) and bower.json (Bower managed) where we have all our dependencies/devDependencies (e.g. bootstrap, jquery, ember, etc)
Now these get downloaded from their respective registries and get downloaded locally into node_modules/bower_components folder.
Now my question is while these folders (node_modules/bower_components) contain a lot of code dependencies, when we do a build, I see some code in the "dist" folder.
I want to understand what actually goes into this dist ?
I see things like vendor.css, vendor.js, myappName.css, myappName.js, etc
So how do these get constructed and what code actually goes inside these ?
Is it also base on what we have in our package/bower json config files ?
Or is it based on what we have in ember-cli-build.js ?

What is put under /dist should be everything you need to publish your application. Components from bower_components are typically loaded via app.import() in ember-cli-build.js and stuff from node_modules by addons you've installed (which ember-cli picks up automatically).
Here is a quick rundown of the files.
index.html --> Generated by ember-cli upon project creation
* --> Everything from /public
assets/
appName.css --> All css from under /app
appName.js --> All js and compiled templates from /app
vendor.css --> Any css imported from bower_components/node_modules (via ember-cli-build.js)
vendor.js --> Any js imported from bower_components/node_modules (via ember-cli-build.js)
test-*.js --> Test loader/support for ember-cli if you've run "ember test"
Most files also come with sourcemaps as .map which you can exclude when publishing the site.

As you said, the dependencies you declare in your bower.json and package.json get downloaded to bower_components and node_modules
When you do you an ember build command what happens is that all the code you decide to import in your ember-cli-build.js will get dumped to the vendor.js / vendor.css file. All your application code (templates/routes/components/controllers/services) will be placed in my-app-name.js. All your application styles will go to the my-app-name.css file. All these files will be placed in the dist directory so that you can deploy it.
See this sample ember-cli-build.js file:
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
//CSS - Content of these files will go to "vendor.css"
app.import('vendor/css/bootstrap.css');
app.import('bower_components/datatables/media/css/jquery.dataTables.css');
app.import('bower_components/datatables/media/css/dataTables.bootstrap.css');
app.import('vendor/css/plugins/toastr/toastr.min.css');
// Javascript - Content of these files will go to "vendor.js"
app.import('vendor/js/bootstrap.js');
app.import('vendor/js/plugins/metisMenu/jquery.metisMenu.js');
app.import('vendor/js/plugins/toastr/toastr.min.js');
app.import('bower_components/datatables/media/js/jquery.dataTables.js');
return app.toTree();
};
The CSS imports will go to the vendor.css file and the JS imports will go to the vendor.js files.
The content of your my-app-name.css comes from the app/styles folder.
If you do ember build --environment production the ember build process will also fingertring your assets (append a hash at the end of the filename and generate an appropriate reference in the index.html file).

ember-cli where to put images

In the ember-cli folder structure where should I put images?
/app
/bower_components
/config
/dist
/node_modules
/public
/tests
/vendor
I am using ember-cli version 1.13.1.

Create a folder inside public -> public/assets/images/, and place your images inside. You can then access them in the browser using /assets/images/imagename.png
Source from the ember-cli documentation it states:
Raw Assets
public/assets vs app/styles
To add images, fonts, or other assets, place them in the public/assets directory. For example, if you place logo.png in public/assets/images, you can reference it in templates with assets/images/logo.png or in stylesheets with url('/assets/images/logo.png').