When you add a library using bower, that is not an ember addon, you have to manually add it to the ember-cli-build.js using app.import. For eg. if I add a typical js library I have to add both the css and js files like:
app.import('../path_to/library.min.js');
app.import('../path_to/library.min.css');
Question: Is there any way to automate this process? With all these nice utilities we have for front-end development, there must surely be?
I don't know any way of automating these processes.
Related
I have an Ember.js project where I use Fontawesome5 and Sass. Creating an icon is easy with <FaIcon #icon="..."/>. But now I want to use an icon from Fontawesome with Sass (more specifically with list-style). I guess I could use the way it is described in the fontawesome-sass-documentation, but this feels wrong in more than one way.
I tried to create a route get-icon, that I could use with list-style: url(...), but as far as I see that can't work with ember.js.
So is there a preferred way to get a fontawesome icon for list-style in an ember project?
I assume that you are using the official font awesome library for Ember.js: #fortawesome/ember-fontawesome It provides the <FaIcon> component you mentioned.
#fortawesome/ember-fontawesome does not provide integration to use the SASS styles. There is an open feature request as an issue on its GitHub repository but it hasn't received any response yet.
I assume that you are using ember-cli-sass to integrate SASS in your build process. It's the de facto standard in Ember community as fa as I'm aware.
ember-cli-sass has an includePaths option, which allows to import SASS files from other folders than app/styles. You can use this option to inlcude the required SASS files in your build and import the required SASS files in your app/styles/app.scss.
ember-cli-sass documentation includes an example how to do so for foundation CSS framework. You can use that one as a starting point.
Im looking for a reasonably simple toolset and workflow for incorporating Sass into my Django projects. Im predominantly backend focused and have just started investigating Sass, so bear with me.
My initial idea was to keep things simple by just using node-sass without trying to incorporate Gulp, django-pipeline or anything else initially.
My Django apps are usually structured such that I create a static/app/css folder in each app. One option I guess would be to now create an additional folder per app for scss files, ie: static/app/scss. The problem there would be that when running collectstatic in production, the scss files will be gathered as well. So should the scss files for each app be kept somewhere else? (I guess it doesn't really matter if the scss files are included when collectstatic runs?)
Next, outside of my Django project folders I would create a folder to install node-sass since I wouldn't want to install it globally and I don't want the node-modules folder inside my Django project or inside source control.
I guess the node-modules folder can be thought of like using a python virtualenv instead of installing packages globally?
Next, inside my Django project somewhere (not sure where?) I would have the package.json file containing a scripts section for every scss file I want compiled to css, eg:
"scripts": {
"compile:sass": "node-sass app1/static/app1/scss/style.scss app1/static/app1/css/style.css",
"compile:sass": "node-sass app2/static/app2/scss/style.scss app2/static/app2/css/style.css",
"compile:sass": "node-sass app3/static/app3/scss/style.scss app3/static/app3/css/style.css"
}
Lastly, I would just run compile:sass with the watch flag to constantly compile any files I work on and put them in the correct folders.
So my questions are, is the above setup a good approach (at least initially if im not ready to add yet another tool like Gulp etc to the mix)?
Also, how will I run compile:sass considering my package.json file will be in the Django project somewhere and the node-modules folder containing the node-sass installation will be somewhere else.
I help maintain node-sass, so I won't say not to use it. There is an alternate libsass-python that you might want to look at if you're working with Python though.
Check out the django-sass-processor package. It's simple to configure and use. I've used it a few times and have had good experiences with it. The package abstracts away Gulp, so you don't have to worry about it and streamlines the whole process.
Here's a tutorial on how to integrate django-sass-processor into a Django project.
My project structure is:
myProject
|
- ember app
|
- my addon
I am developing a product where I have to integrate with 3 or more products. Each integration requires only specific functionalities.I have all my features as components in my addon. Now I have installed my addon in my ember app. So there is an entry in package.json. So the whole addon will be available in the vendor.js file. For example, if my 1st product integration requires only 3 components from my addon , I am expected to give only those 3 components dependencies. But since I have entry in package.json,I am giving the whole addon. I want to take the entry of my addon from my app package.json, and write only the 3 components in to one file viz..., product1.js etc...For the next integration I will pick only the components required for that integration and write it as produc2.js. In this way I can remove the unnecessary things in the script.And respective integration will include it as a script from their end. So is there any way to satisfy my requirement?
Yes, there is, but you'll have to work a bit to make it happen. You'll need to pass flags from the consuming app to your addon using the ember-cli-build.js file. And then in your addon's index.js file you'll need to watch for those flags and use Broccoli to filter down to the appropriate files that you want included in the vendor file.
It's not overly complicated to do, but the Broccoli documentation is relatively sparse at the moment. Would suggest watching videos on this from various conferences and consulting other addons that do it similarly.
I started developing an addon in on ember-cli 0.2.1 and when I generated my files using the generator, they placed the files in ~/app/ and not ~/addon.
What do I need to do put the files in the right place?
The project contains services, mixins and utils with tests covering them.
I think it is the default behavior for a good reason: the generators are meant to be used in context of an application. You should consider your addon/ folder being sort of a lib directory, where you can use any file/folder structure that fits the best to your addon. The app/ folder, however, is meant to contain the re-exported modules, so they'll become available on the host app's container automatically.
Browse around a few well-written addons to find out how most people do this, a good example is the ember-radio-button
Here are all the modules
Then the only necessary modules are re-exported.
Notice that an abstact class like radio-button-base is useless by itself, and, therefore, unnecessary to reside on the container, but an addon user would want to import and extend it for his own purposes, which he can do by writing import RadioButtonBase from 'ember-radio-button/components/radio-button-base';
I'm trying to author an ember-cli addon, and I prefer to develop in Coffeescript. But it seems like the CLI build is hardcoded to look for just .js files. Is there any way to author an addon in Coffeescript and have the build take place with the consuming application's build (i.e. without me having to build the addon each time using a custom build process).
Yes, you can author in Coffeescript, but there was a bug in 0.0.46 where we would only preprocess *.js files in the addon tree. This is fixed on master, and should be included in 0.0.47 soonish...
So turns out this is a bug in the CLI, but it wasn't fixed in 0.0.47. See https://github.com/stefanpenner/ember-cli/issues/2354 for more context, it's currently an open issue & PR.